feat(vue): Allow to set routeLabel: 'path' to opt-out of using name

Author: mydea

packages/vue/src/router.ts

@@ -1,7 +1,8 @@
-import { captureException, WINDOW } from '@sentry/browser';
+import { captureException, getCurrentHub, WINDOW } from '@sentry/browser';
 import type { Transaction, TransactionContext, TransactionSource } from '@sentry/types';
 
 import { getActiveTransaction } from './tracing';
+import type { Options } from './types';
 
 export type VueRouterInstrumentation = <T extends Transaction>(
   startTransaction: (context: TransactionContext) => T | undefined,
@@ -38,6 +39,9 @@ interface VueRouter {
  * @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>;
+
   return (
     startTransaction: (context: TransactionContext) => Transaction | undefined,
     startTransactionOnPageLoad: boolean = true,
@@ -81,7 +85,7 @@ export function vueRouterInstrumentation(router: VueRouter): VueRouterInstrument
       // Determine a name for the routing transaction and where that name came from
       let transactionName: string = to.path;
       let transactionSource: TransactionSource = 'url';
-      if (to.name) {
+      if (to.name && options.routeLabel !== 'path') {
         transactionName = to.name.toString();
         transactionSource = 'custom';
       } else if (to.matched[0] && to.matched[0].path) {

packages/vue/src/sdk.ts

@@ -16,6 +16,7 @@ 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,6 +46,14 @@ 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,6 +368,7 @@ const testHarness = ({
     tracingOptions: {},
     trackComponents: [],
     timeout: 0,
+    routeLabel: 'name',
     hooks: [] as Operation[],
   };
 

packages/vue/test/router.test.ts

@@ -1,7 +1,8 @@
 import * as SentryBrowser from '@sentry/browser';
 import type { Transaction } from '@sentry/types';
+import { createApp } from 'vue';
 
-import { vueRouterInstrumentation } from '../src';
+import { init, vueRouterInstrumentation } from '../src';
 import type { Route } from '../src/router';
 import * as vueTracing from '../src/tracing';
 
@@ -169,6 +170,51 @@ 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');
+
+    init({
+      app,
+      defaultIntegrations: false,
+      routeLabel: 'path',
+    });
+
+    app.mount(el);
+
+    // create instrumentation
+    const instrument = vueRouterInstrumentation(mockVueRouter);
+
+    // instrument
+    instrument(mockStartTransaction, true, true);
+
+    // check
+    const beforeEachCallback = mockVueRouter.beforeEach.mock.calls[0][0];
+
+    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("doesn't overwrite a pageload transaction name it was set to custom before the router resolved the route", () => {
     const mockedTxn = {
       setName: jest.fn(),