feat(vue): Deprecate configuring Vue tracing options anywhere else ot…

…her than through the `vueIntegration`'s `tracingOptions` option (#14385)
getsentry · Nov 25, 2024 · 807883e · 807883e
1 parent d8d9324
commit 807883e
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 36 deletions.
diff --git 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
@@ -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<VueOptions> = {}) => {
+export const vueIntegration = defineIntegration((integrationOptions: Partial<VueOptions> = {}) => {
   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<VueOptions>): 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
@@ -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<TracingOptions>;
+
+  /**
+   * 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<TracingOptions>;
+
+  /**
+   * 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
@@ -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).',
     ]);
   });