Skip to content

Commit 2334f24

Browse files
AbhiPrasadAbhiPrasad
authored
feat(v8/vue): Remove all deprecated exports from vue (#10533)
1 parent 3b1d836 commit 2334f24

File tree

5 files changed

+93
-447
lines changed

5 files changed

+93
-447
lines changed

‎packages/vue/src/index.ts

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
export * from '@sentry/browser';
22

33
export { init } from './sdk';
4-
// eslint-disable-next-line deprecation/deprecation
5-
export { vueRouterInstrumentation } from './router';
64
export { browserTracingIntegration } from './browserTracingIntegration';
75
export { attachErrorHandler } from './errorhandler';
86
export { createTracingMixins } from './tracing';
9-
export {
10-
vueIntegration,
11-
// eslint-disable-next-line deprecation/deprecation
12-
VueIntegration,
13-
} from './integration';
7+
export { vueIntegration } from './integration';

‎packages/vue/src/integration.ts

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { convertIntegrationFnToClass, defineIntegration, hasTracingEnabled } from '@sentry/core';
2-
import type { Client, Integration, IntegrationClass, IntegrationFn } from '@sentry/types';
1+
import { defineIntegration, hasTracingEnabled } from '@sentry/core';
2+
import type { Client, IntegrationFn } from '@sentry/types';
33
import { GLOBAL_OBJ, arrayify, consoleSandbox } from '@sentry/utils';
44

55
import { DEFAULT_HOOKS } from './constants';
6+
import { DEBUG_BUILD } from './debug-build';
67
import { attachErrorHandler } from './errorhandler';
78
import { createTracingMixins } from './tracing';
89
import type { Options, Vue, VueOptions } from './types';
@@ -33,17 +34,6 @@ const _vueIntegration = ((integrationOptions: Partial<VueOptions> = {}) => {
3334

3435
export const vueIntegration = defineIntegration(_vueIntegration);
3536

36-
/**
37-
* Initialize Vue error & performance tracking.
38-
*
39-
* @deprecated Use `vueIntegration()` instead.
40-
*/
41-
// eslint-disable-next-line deprecation/deprecation
42-
export const VueIntegration = convertIntegrationFnToClass(
43-
INTEGRATION_NAME,
44-
vueIntegration,
45-
) as IntegrationClass<Integration>;
46-
4737
function _setupIntegration(client: Client, integrationOptions: Partial<VueOptions>): void {
4838
const options: Options = { ...DEFAULT_CONFIG, ...client.getOptions(), ...integrationOptions };
4939
if (!options.Vue && !options.app) {
@@ -67,23 +57,25 @@ Update your \`Sentry.init\` call with an appropriate config option:
6757
}
6858

6959
const vueInit = (app: Vue, options: Options): void => {
70-
// Check app is not mounted yet - should be mounted _after_ init()!
71-
// This is _somewhat_ private, but in the case that this doesn't exist we simply ignore it
72-
// See: https://github.com/vuejs/core/blob/eb2a83283caa9de0a45881d860a3cbd9d0bdd279/packages/runtime-core/src/component.ts#L394
73-
const appWithInstance = app as Vue & {
74-
_instance?: {
75-
isMounted?: boolean;
60+
if (DEBUG_BUILD) {
61+
// Check app is not mounted yet - should be mounted _after_ init()!
62+
// This is _somewhat_ private, but in the case that this doesn't exist we simply ignore it
63+
// See: https://github.com/vuejs/core/blob/eb2a83283caa9de0a45881d860a3cbd9d0bdd279/packages/runtime-core/src/component.ts#L394
64+
const appWithInstance = app as Vue & {
65+
_instance?: {
66+
isMounted?: boolean;
67+
};
7668
};
77-
};
7869

79-
const isMounted = appWithInstance._instance && appWithInstance._instance.isMounted;
80-
if (isMounted === true) {
81-
consoleSandbox(() => {
82-
// eslint-disable-next-line no-console
83-
console.warn(
84-
'[@sentry/vue]: Misconfigured SDK. Vue app is already mounted. Make sure to call `app.mount()` after `Sentry.init()`.',
85-
);
86-
});
70+
const isMounted = appWithInstance._instance && appWithInstance._instance.isMounted;
71+
if (isMounted === true) {
72+
consoleSandbox(() => {
73+
// eslint-disable-next-line no-console
74+
console.warn(
75+
'[@sentry/vue]: Misconfigured SDK. Vue app is already mounted. Make sure to call `app.mount()` after `Sentry.init()`.',
76+
);
77+
});
78+
}
8779
}
8880

8981
attachErrorHandler(app, options);

‎packages/vue/src/router.ts

Lines changed: 37 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,12 @@
1-
import { WINDOW, captureException } from '@sentry/browser';
2-
import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, spanToJSON } from '@sentry/core';
3-
import type { SpanAttributes, Transaction, TransactionContext, TransactionSource } from '@sentry/types';
4-
5-
import { getActiveTransaction } from './tracing';
6-
7-
interface VueRouterInstrumationOptions {
8-
/**
9-
* What to use for route labels.
10-
* By default, we use route.name (if set) and else the path.
11-
*
12-
* Default: 'name'
13-
*/
14-
routeLabel: 'name' | 'path';
15-
}
16-
17-
export type VueRouterInstrumentation = <T extends Transaction>(
18-
startTransaction: (context: TransactionContext) => T | undefined,
19-
startTransactionOnPageLoad?: boolean,
20-
startTransactionOnLocationChange?: boolean,
21-
) => void;
1+
import { captureException } from '@sentry/browser';
2+
import {
3+
SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
4+
SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
5+
getActiveSpan,
6+
getRootSpan,
7+
spanToJSON,
8+
} from '@sentry/core';
9+
import type { Span, SpanAttributes, TransactionContext, TransactionSource } from '@sentry/types';
2210

2311
// The following type is an intersection of the Route type from VueRouter v2, v3, and v4.
2412
// This is not great, but kinda necessary to make it work with all versions at the same time.
@@ -43,57 +31,18 @@ interface VueRouter {
4331
beforeEach: (fn: (to: Route, from: Route, next?: () => void) => void) => void;
4432
}
4533

46-
/**
47-
* Creates routing instrumentation for Vue Router v2, v3 and v4
48-
*
49-
* You can optionally pass in an options object with the available option:
50-
* * `routeLabel`: Set this to `route` to opt-out of using `route.name` for transaction names.
51-
*
52-
* @param router The Vue Router instance that is used
53-
*
54-
* @deprecated Use `browserTracingIntegration()` from `@sentry/vue` instead - this includes the vue router instrumentation.
55-
*/
56-
export function vueRouterInstrumentation(
57-
router: VueRouter,
58-
options: Partial<VueRouterInstrumationOptions> = {},
59-
): VueRouterInstrumentation {
60-
return (
61-
startTransaction: (context: TransactionContext) => Transaction | undefined,
62-
startTransactionOnPageLoad: boolean = true,
63-
startTransactionOnLocationChange: boolean = true,
64-
) => {
65-
// We have to start the pageload transaction as early as possible (before the router's `beforeEach` hook
66-
// is called) to not miss child spans of the pageload.
67-
// We check that window & window.location exists in order to not run this code in SSR environments.
68-
if (startTransactionOnPageLoad && WINDOW && WINDOW.location) {
69-
startTransaction({
70-
name: WINDOW.location.pathname,
71-
op: 'pageload',
72-
attributes: {
73-
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.vue',
74-
[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
75-
},
76-
});
77-
}
78-
79-
instrumentVueRouter(
80-
router,
81-
{
82-
routeLabel: options.routeLabel || 'name',
83-
instrumentNavigation: startTransactionOnLocationChange,
84-
instrumentPageLoad: startTransactionOnPageLoad,
85-
},
86-
startTransaction,
87-
);
88-
};
89-
}
90-
9134
/**
9235
* Instrument the Vue router to create navigation spans.
9336
*/
9437
export function instrumentVueRouter(
9538
router: VueRouter,
9639
options: {
40+
/**
41+
* What to use for route labels.
42+
* By default, we use route.name (if set) and else the path.
43+
*
44+
* Default: 'name'
45+
*/
9746
routeLabel: 'name' | 'path';
9847
instrumentPageLoad: boolean;
9948
instrumentNavigation: boolean;
@@ -139,17 +88,16 @@ export function instrumentVueRouter(
13988
}
14089

14190
if (options.instrumentPageLoad && isPageLoadNavigation) {
142-
// eslint-disable-next-line deprecation/deprecation
143-
const pageloadTransaction = getActiveTransaction();
144-
if (pageloadTransaction) {
145-
const existingAttributes = spanToJSON(pageloadTransaction).data || {};
91+
const activeRootSpan = getActiveRootSpan();
92+
if (activeRootSpan) {
93+
const existingAttributes = spanToJSON(activeRootSpan).data || {};
14694
if (existingAttributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE] !== 'custom') {
147-
pageloadTransaction.updateName(transactionName);
148-
pageloadTransaction.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, transactionSource);
95+
activeRootSpan.updateName(transactionName);
96+
activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, transactionSource);
14997
}
15098
// Set router attributes on the existing pageload transaction
151-
// This will the origin, and add params & query attributes
152-
pageloadTransaction.setAttributes({
99+
// This will override the origin, and add params & query attributes
100+
activeRootSpan.setAttributes({
153101
...attributes,
154102
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.vue',
155103
});
@@ -158,6 +106,7 @@ export function instrumentVueRouter(
158106

159107
if (options.instrumentNavigation && !isPageLoadNavigation) {
160108
attributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE] = transactionSource;
109+
attributes[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN] = 'auto.navigation.vue';
161110
startNavigationSpanFn({
162111
name: transactionName,
163112
op: 'navigation',
@@ -173,3 +122,17 @@ export function instrumentVueRouter(
173122
}
174123
});
175124
}
125+
126+
function getActiveRootSpan(): Span | undefined {
127+
const span = getActiveSpan();
128+
const rootSpan = span ? getRootSpan(span) : undefined;
129+
130+
if (!rootSpan) {
131+
return undefined;
132+
}
133+
134+
const op = spanToJSON(rootSpan).op;
135+
136+
// Only use this root span if it is a pageload or navigation span
137+
return op === 'navigation' || op === 'pageload' ? rootSpan : undefined;
138+
}

‎packages/vue/src/tracing.ts

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { getActiveSpan, getCurrentScope, startInactiveSpan } from '@sentry/browser';
2-
import type { Span, Transaction } from '@sentry/types';
1+
import { getActiveSpan, startInactiveSpan } from '@sentry/browser';
2+
import type { Span } from '@sentry/types';
33
import { logger, timestampInSeconds } from '@sentry/utils';
44

55
import { DEFAULT_HOOKS } from './constants';
@@ -32,16 +32,6 @@ const HOOKS: { [key in Operation]: Hook[] } = {
3232
update: ['beforeUpdate', 'updated'],
3333
};
3434

35-
/**
36-
* Grabs active transaction off scope.
37-
*
38-
* @deprecated You should not rely on the transaction, but just use `startSpan()` APIs instead.
39-
*/
40-
export function getActiveTransaction(): Transaction | undefined {
41-
// eslint-disable-next-line deprecation/deprecation
42-
return getCurrentScope().getTransaction();
43-
}
44-
4535
/** Finish top-level span and activity with a debounce configured using `timeout` option */
4636
function finishRootSpan(vm: VueSentry, timestamp: number, timeout: number): void {
4737
if (vm.$_sentryRootSpanTimer) {

0 commit comments

Comments
 (0)