ref to option for routing instrumentation

Author: mydea

packages/vue/src/router.ts

@@ -1,8 +1,17 @@
-import { captureException, getCurrentHub, WINDOW } from '@sentry/browser';
+import { captureException, WINDOW } from '@sentry/browser';
 import type { Transaction, TransactionContext, TransactionSource } from '@sentry/types';
 
 import { getActiveTransaction } from './tracing';
-import type { Options } from './types';
+
+interface VueRouterInstrumationOptions {
+  /**
+   * What to use for route labels.
+   * By default, we use route.name (if set) and else the path.
+   *
+   * Default: 'name'
+   */
+  routeLabel: 'name' | 'path';
+}
 
 export type VueRouterInstrumentation = <T extends Transaction>(
   startTransaction: (context: TransactionContext) => T | undefined,
@@ -36,12 +45,15 @@ interface VueRouter {
 /**
  * Creates routing instrumentation for Vue Router v2, v3 and v4
  *
+ * You can optionally pass in an options object with the available option:
+ * * `routeLabel`: Set this to `route` to opt-out of using `route.name` for transaction names.
+ *
  * @param router The Vue Router instance that is used
  */
-export function vueRouterInstrumentation(router: VueRouter): VueRouterInstrumentation {
-  const client = getCurrentHub().getClient();
-  const options = ((client && client.getOptions()) || {}) as Partial<Options>;
-
+export function vueRouterInstrumentation(
+  router: VueRouter,
+  options: Partial<VueRouterInstrumationOptions> = {},
+): VueRouterInstrumentation {
   return (
     startTransaction: (context: TransactionContext) => Transaction | undefined,
     startTransactionOnPageLoad: boolean = true,

packages/vue/src/sdk.ts

@@ -16,7 +16,6 @@ const DEFAULT_CONFIG: Options = {
   hooks: DEFAULT_HOOKS,
   timeout: 2000,
   trackComponents: false,
-  routeLabel: 'name',
   _metadata: {
     sdk: {
       name: 'sentry.javascript.vue',

packages/vue/src/types.ts

@@ -46,14 +46,6 @@ export interface Options extends TracingOptions, BrowserOptions {
 
   /** {@link TracingOptions} */
   tracingOptions?: Partial<TracingOptions>;
-
-  /**
-   * What to use for route labels.
-   * By default, we use route.name (if set) and else the path.
-   *
-   * Default: 'name'
-   */
-  routeLabel: 'name' | 'path';
 }
 
 /** Vue specific configuration for Tracing Integration  */

packages/vue/test/errorHandler.test.ts

@@ -368,7 +368,6 @@ const testHarness = ({
     tracingOptions: {},
     trackComponents: [],
     timeout: 0,
-    routeLabel: 'name',
     hooks: [] as Operation[],
   };
 

packages/vue/test/router.test.ts

@@ -1,8 +1,7 @@
 import * as SentryBrowser from '@sentry/browser';
 import type { Transaction } from '@sentry/types';
-import { createApp } from 'vue';
 
-import { init, vueRouterInstrumentation } from '../src';
+import { vueRouterInstrumentation } from '../src';
 import type { Route } from '../src/router';
 import * as vueTracing from '../src/tracing';
 
@@ -171,22 +170,39 @@ describe('vueRouterInstrumentation()', () => {
   );
 
   it('allows to configure routeLabel=path', () => {
-    // Need to setup a proper client with options etc.
-    const app = createApp({
-      template: '<div>hello</div>',
-    });
-    const el = document.createElement('div');
+    // create instrumentation
+    const instrument = vueRouterInstrumentation(mockVueRouter, { routeLabel: 'path' });
 
-    init({
-      app,
-      defaultIntegrations: false,
-      routeLabel: 'path',
-    });
+    // instrument
+    instrument(mockStartTransaction, true, true);
+
+    // check
+    const beforeEachCallback = mockVueRouter.beforeEach.mock.calls[0][0];
 
-    app.mount(el);
+    const from = testRoutes.normalRoute1;
+    const to = testRoutes.namedRoute;
+    beforeEachCallback(to, from, mockNext);
 
+    // first startTx call happens when the instrumentation is initialized (for pageloads)
+    expect(mockStartTransaction).toHaveBeenLastCalledWith({
+      name: '/login',
+      metadata: {
+        source: 'route',
+      },
+      data: {
+        params: to.params,
+        query: to.query,
+      },
+      op: 'navigation',
+      tags: {
+        'routing.instrumentation': 'vue-router',
+      },
+    });
+  });
+
+  it('allows to configure routeLabel=name', () => {
     // create instrumentation
-    const instrument = vueRouterInstrumentation(mockVueRouter);
+    const instrument = vueRouterInstrumentation(mockVueRouter, { routeLabel: 'name' });
 
     // instrument
     instrument(mockStartTransaction, true, true);
@@ -200,9 +216,9 @@ describe('vueRouterInstrumentation()', () => {
 
     // first startTx call happens when the instrumentation is initialized (for pageloads)
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
-      name: '/login',
+      name: 'login-screen',
       metadata: {
-        source: 'route',
+        source: 'custom',
       },
       data: {
         params: to.params,