diff --git a/dev-packages/e2e-tests/test-applications/vue-3/src/main.ts b/dev-packages/e2e-tests/test-applications/vue-3/src/main.ts index b940023b3153..4a08ed4ddbcc 100644 --- a/dev-packages/e2e-tests/test-applications/vue-3/src/main.ts +++ b/dev-packages/e2e-tests/test-applications/vue-3/src/main.ts @@ -7,7 +7,7 @@ import router from './router'; import { createPinia } from 'pinia'; import * as Sentry from '@sentry/vue'; -import { browserTracingIntegration } from '@sentry/vue'; +import { browserTracingIntegration, vueIntegration } from '@sentry/vue'; const app = createApp(App); const pinia = createPinia(); @@ -17,12 +17,16 @@ Sentry.init({ dsn: import.meta.env.PUBLIC_E2E_TEST_DSN, tracesSampleRate: 1.0, integrations: [ + vueIntegration({ + tracingOptions: { + trackComponents: ['ComponentMainView', ''], + }, + }), browserTracingIntegration({ router, }), ], tunnel: `http://localhost:3031/`, // proxy server - trackComponents: ['ComponentMainView', ''], }); pinia.use( diff --git a/docs/migration/v8-to-v9.md b/docs/migration/v8-to-v9.md index a43a86bd1566..930234f1256b 100644 --- a/docs/migration/v8-to-v9.md +++ b/docs/migration/v8-to-v9.md @@ -152,6 +152,27 @@ Sentry.init({ Use the `SentryGlobalFilter` instead. The `SentryGlobalFilter` is a drop-in replacement. +## `@sentry/vue` + +- The options `tracingOptions`, `trackComponents`, `timeout`, `hooks` have been removed everywhere except in the `tracingOptions` option of `vueIntegration()`. + These options should now be set as follows: + + ```ts + import * as Sentry from '@sentry/vue'; + + Sentry.init({ + integrations: [ + Sentry.vueIntegration({ + tracingOptions: { + trackComponents: true, + timeout: 1000, + hooks: ['mount', 'update', 'unmount'], + }, + }), + ], + }); + ``` + ## 5. Build Changes Previously the CJS versions of the SDK code (wrongfully) contained compatibility statements for default exports in ESM: diff --git a/packages/vue/src/integration.ts b/packages/vue/src/integration.ts index 5c30a956304b..c3ee8baaa03f 100644 --- a/packages/vue/src/integration.ts +++ b/packages/vue/src/integration.ts @@ -12,9 +12,11 @@ const DEFAULT_CONFIG: VueOptions = { attachProps: true, logErrors: true, attachErrorHandler: true, - hooks: DEFAULT_HOOKS, - timeout: 2000, - trackComponents: false, + tracingOptions: { + hooks: DEFAULT_HOOKS, + timeout: 2000, + trackComponents: false, + }, }; const INTEGRATION_NAME = 'Vue'; @@ -73,12 +75,6 @@ const vueInit = (app: Vue, options: Options): void => { } if (hasTracingEnabled(options)) { - app.mixin( - createTracingMixins({ - ...options, - // eslint-disable-next-line deprecation/deprecation - ...options.tracingOptions, - }), - ); + app.mixin(createTracingMixins(options.tracingOptions)); } }; diff --git a/packages/vue/src/sdk.ts b/packages/vue/src/sdk.ts index 532da6f350f4..0c06f8473317 100644 --- a/packages/vue/src/sdk.ts +++ b/packages/vue/src/sdk.ts @@ -2,21 +2,12 @@ import { SDK_VERSION, getDefaultIntegrations, init as browserInit } from '@sentr import type { Client } from '@sentry/core'; import { vueIntegration } from './integration'; -import type { Options, TracingOptions } from './types'; +import type { Options } from './types'; /** * Inits the Vue SDK */ -export function init( - config: Partial< - Omit & { - /** - * @deprecated Add the `vueIntegration()` and pass the `tracingOptions` there instead. - */ - tracingOptions: Partial; - } - > = {}, -): Client | undefined { +export function init(config: Partial> = {}): Client | undefined { const options = { _metadata: { sdk: { diff --git a/packages/vue/src/tracing.ts b/packages/vue/src/tracing.ts index 055e46039d66..3ece35d9fe5d 100644 --- a/packages/vue/src/tracing.ts +++ b/packages/vue/src/tracing.ts @@ -59,7 +59,7 @@ export function findTrackComponent(trackComponents: string[], formattedName: str return isMatched; } -export const createTracingMixins = (options: TracingOptions): Mixins => { +export const createTracingMixins = (options: Partial = {}): Mixins => { const hooks = (options.hooks || []) .concat(DEFAULT_HOOKS) // Removing potential duplicates @@ -138,7 +138,7 @@ export const createTracingMixins = (options: TracingOptions): Mixins => { if (!span) return; span.end(); - finishRootSpan(this, timestampInSeconds(), options.timeout); + finishRootSpan(this, timestampInSeconds(), options.timeout || 2000); } }; } diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts index 8b23a2389e69..af0613c7fbe9 100644 --- a/packages/vue/src/types.ts +++ b/packages/vue/src/types.ts @@ -60,64 +60,9 @@ export interface VueOptions { /** {@link TracingOptions} */ tracingOptions?: Partial; - - /** - * Decides whether to track components by hooking into its lifecycle methods. - * Can be either set to `boolean` to enable/disable tracking for all of them. - * Or to an array of specific component names (case-sensitive). - * - * @deprecated Use tracingOptions - */ - trackComponents: boolean | string[]; - - /** - * How long to wait until the tracked root activity is marked as finished and sent of to Sentry - * - * @deprecated Use tracingOptions - */ - timeout: number; - - /** - * List of hooks to keep track of during component lifecycle. - * Available hooks: 'activate' | 'create' | 'destroy' | 'mount' | 'unmount' | 'update' - * Based on https://vuejs.org/v2/api/#Options-Lifecycle-Hooks - * - * @deprecated Use tracingOptions - */ - hooks: Operation[]; } -export interface Options extends BrowserOptions, VueOptions { - /** - * @deprecated Use `vueIntegration` tracingOptions - */ - tracingOptions?: Partial; - - /** - * Decides whether to track components by hooking into its lifecycle methods. - * Can be either set to `boolean` to enable/disable tracking for all of them. - * Or to an array of specific component names (case-sensitive). - * - * @deprecated Use `vueIntegration` tracingOptions - */ - trackComponents: boolean | string[]; - - /** - * How long to wait until the tracked root activity is marked as finished and sent of to Sentry - * - * @deprecated Use `vueIntegration` tracingOptions - */ - timeout: number; - - /** - * List of hooks to keep track of during component lifecycle. - * Available hooks: 'activate' | 'create' | 'destroy' | 'mount' | 'unmount' | 'update' - * Based on https://vuejs.org/v2/api/#Options-Lifecycle-Hooks - * - * @deprecated Use `vueIntegration` tracingOptions - */ - hooks: Operation[]; -} +export type Options = BrowserOptions & VueOptions; /** Vue specific configuration for Tracing Integration */ export interface TracingOptions {