feat(vue)!: Remove configuring Vue tracing options anywhere else other than through the vueIntegration's tracingOptions option (#14856)

Deprecation PR:
#14265

Closes: #5907

---------

Co-authored-by: Sigrid Huemer <[email protected]>

Author: andreiborza

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', '<ComponentOneView>'],
+      },
+    }),
     browserTracingIntegration({
       router,
     }),
   ],
   tunnel: `http://localhost:3031/`, // proxy server
-  trackComponents: ['ComponentMainView', '<ComponentOneView>'],
 });
 
 pinia.use(

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:

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));
   }
 };

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<Options, 'tracingOptions'> & {
-      /**
-       * @deprecated Add the `vueIntegration()` and pass the `tracingOptions` there instead.
-       */
-      tracingOptions: Partial<TracingOptions>;
-    }
-  > = {},
-): Client | undefined {
+export function init(config: Partial<Omit<Options, 'tracingOptions'>> = {}): Client | undefined {
   const options = {
     _metadata: {
       sdk: {

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<TracingOptions> = {}): 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);
         }
       };
     }

packages/vue/src/types.ts

@@ -60,64 +60,9 @@ export interface VueOptions {
 
   /** {@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 {
-  /**
-   * @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[];
-}
+export type Options = BrowserOptions & VueOptions;
 
 /** Vue specific configuration for Tracing Integration  */
 export interface TracingOptions {