diff --git a/docs/migration/draft-v9-migration-guide.md b/docs/migration/draft-v9-migration-guide.md index 2dae18a68037..7fa63bf33b6c 100644 --- a/docs/migration/draft-v9-migration-guide.md +++ b/docs/migration/draft-v9-migration-guide.md @@ -41,6 +41,27 @@ - Deprecated `Request` in favor of `RequestEventData`. +## `@sentry/vue` + +- Deprecated `tracingOptions`, `trackComponents`, `timeout`, `hooks` options everywhere other than in the `tracingOptions` option of the `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'], + }, + }), + ], + }); + ``` + ## Server-side SDKs (`@sentry/node` and all dependents) - Deprecated `processThreadBreadcrumbIntegration` in favor of `childProcessIntegration`. Functionally they are the same. diff --git a/packages/vue/src/integration.ts b/packages/vue/src/integration.ts index 1ffa6000f1ea..22f394d72720 100644 --- a/packages/vue/src/integration.ts +++ b/packages/vue/src/integration.ts @@ -1,7 +1,4 @@ -import { defineIntegration, hasTracingEnabled } from '@sentry/core'; -import { GLOBAL_OBJ, consoleSandbox } from '@sentry/core'; -import type { Client, IntegrationFn } from '@sentry/types'; - +import { GLOBAL_OBJ, consoleSandbox, defineIntegration, hasTracingEnabled } from '@sentry/core'; import { DEFAULT_HOOKS } from './constants'; import { DEBUG_BUILD } from './debug-build'; import { attachErrorHandler } from './errorhandler'; @@ -22,38 +19,30 @@ const DEFAULT_CONFIG: VueOptions = { const INTEGRATION_NAME = 'Vue'; -const _vueIntegration = ((integrationOptions: Partial = {}) => { +export const vueIntegration = defineIntegration((integrationOptions: Partial = {}) => { return { name: INTEGRATION_NAME, setup(client) { - _setupIntegration(client, integrationOptions); + const options: Options = { ...DEFAULT_CONFIG, ...client.getOptions(), ...integrationOptions }; + if (!options.Vue && !options.app) { + consoleSandbox(() => { + // eslint-disable-next-line no-console + console.warn( + '[@sentry/vue]: Misconfigured SDK. Vue specific errors will not be captured. Update your `Sentry.init` call with an appropriate config option: `app` (Application Instance - Vue 3) or `Vue` (Vue Constructor - Vue 2).', + ); + }); + return; + } + + if (options.app) { + const apps = Array.isArray(options.app) ? options.app : [options.app]; + apps.forEach(app => vueInit(app, options)); + } else if (options.Vue) { + vueInit(options.Vue, options); + } }, }; -}) satisfies IntegrationFn; - -export const vueIntegration = defineIntegration(_vueIntegration); - -function _setupIntegration(client: Client, integrationOptions: Partial): void { - const options: Options = { ...DEFAULT_CONFIG, ...client.getOptions(), ...integrationOptions }; - if (!options.Vue && !options.app) { - consoleSandbox(() => { - // eslint-disable-next-line no-console - console.warn( - `[@sentry/vue]: Misconfigured SDK. Vue specific errors will not be captured. -Update your \`Sentry.init\` call with an appropriate config option: -\`app\` (Application Instance - Vue 3) or \`Vue\` (Vue Constructor - Vue 2).`, - ); - }); - return; - } - - if (options.app) { - const apps = Array.isArray(options.app) ? options.app : [options.app]; - apps.forEach(app => vueInit(app, options)); - } else if (options.Vue) { - vueInit(options.Vue, options); - } -} +}); const vueInit = (app: Vue, options: Options): void => { if (DEBUG_BUILD) { @@ -85,6 +74,7 @@ const vueInit = (app: Vue, options: Options): void => { app.mixin( createTracingMixins({ ...options, + // eslint-disable-next-line deprecation/deprecation ...options.tracingOptions, }), ); diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts index 9735923cd52c..8b23a2389e69 100644 --- a/packages/vue/src/types.ts +++ b/packages/vue/src/types.ts @@ -26,7 +26,7 @@ export type ViewModel = { }; }; -export interface VueOptions extends TracingOptions { +export interface VueOptions { /** Vue constructor to be used inside the integration (as imported by `import Vue from 'vue'` in Vue2) */ Vue?: Vue; @@ -60,9 +60,64 @@ export interface VueOptions extends TracingOptions { /** {@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 {} +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[]; +} /** Vue specific configuration for Tracing Integration */ export interface TracingOptions { diff --git a/packages/vue/test/integration/init.test.ts b/packages/vue/test/integration/init.test.ts index fd9d7c56fc93..699f99a7057c 100644 --- a/packages/vue/test/integration/init.test.ts +++ b/packages/vue/test/integration/init.test.ts @@ -85,9 +85,7 @@ describe('Sentry.init', () => { app.mount(el); expect(warnings).toEqual([ - `[@sentry/vue]: Misconfigured SDK. Vue specific errors will not be captured. -Update your \`Sentry.init\` call with an appropriate config option: -\`app\` (Application Instance - Vue 3) or \`Vue\` (Vue Constructor - Vue 2).`, + '[@sentry/vue]: Misconfigured SDK. Vue specific errors will not be captured. Update your `Sentry.init` call with an appropriate config option: `app` (Application Instance - Vue 3) or `Vue` (Vue Constructor - Vue 2).', ]); });