From 4e1c8af7fd52322c12715bbe829166284ef35a2b Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Wed, 20 Nov 2024 16:35:24 +0000 Subject: [PATCH 1/2] feat(vue): Deprecate configuring Vue tracing options anywhere else other than through the `vueIntegration`'s `tracingOptions` option --- docs/migration/draft-v9-migration-guide.md | 21 ++++++++ packages/vue/src/integration.ts | 50 ++++++++---------- packages/vue/src/types.ts | 59 +++++++++++++++++++++- 3 files changed, 100 insertions(+), 30 deletions(-) diff --git a/docs/migration/draft-v9-migration-guide.md b/docs/migration/draft-v9-migration-guide.md index d117d66ecae3..dd5e0d00f0c6 100644 --- a/docs/migration/draft-v9-migration-guide.md +++ b/docs/migration/draft-v9-migration-guide.md @@ -34,6 +34,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 900fa686dbcf..b76caee47976 100644 --- a/packages/vue/src/integration.ts +++ b/packages/vue/src/integration.ts @@ -1,5 +1,4 @@ import { defineIntegration, hasTracingEnabled } from '@sentry/core'; -import type { Client, IntegrationFn } from '@sentry/types'; import { GLOBAL_OBJ, arrayify, consoleSandbox } from '@sentry/utils'; import { DEFAULT_HOOKS } from './constants'; @@ -22,38 +21,32 @@ 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 = arrayify(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 = arrayify(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 +78,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 { From 57a0cb416f926e30ad3606a93f2b9a6f8e4725c2 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Thu, 21 Nov 2024 09:44:01 +0000 Subject: [PATCH 2/2] test --- packages/vue/src/integration.ts | 4 +--- packages/vue/test/integration/init.test.ts | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/vue/src/integration.ts b/packages/vue/src/integration.ts index 6fb8338b4e52..b3f6c6ecf659 100644 --- a/packages/vue/src/integration.ts +++ b/packages/vue/src/integration.ts @@ -28,9 +28,7 @@ export const vueIntegration = defineIntegration((integrationOptions: Partial { // 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).`, + '[@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; 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).', ]); });