feat(tracing): allow configuring vueRouterInstrumentation options (#614)

Author: rchl

docs/content/en/configuration/options.md

@@ -317,9 +317,13 @@ export default function () {
     vueOptions: {
       trackComponents: true,
     },
+    vueRouterInstrumentationOptions: {
+      routeLabel: 'name',
+    },
   }
   ```
-- On the browser side the `BrowserTracing` integration is enabled by default and adds automatic instrumentation for monitoring the performance of the application. The [Vue Router Integration](https://docs.sentry.io/platforms/javascript/guides/vue/configuration/integrations/vue-router/) is also automatically enabled. See all available [`BrowserTracing` options](https://docs.sentry.io/platforms/javascript/guides/vue/performance/instrumentation/automatic-instrumentation/).
+- On the browser side the `BrowserTracing` integration is enabled by default and adds automatic instrumentation for monitoring the performance of the application. See all available [`BrowserTracing` options](https://docs.sentry.io/platforms/javascript/guides/vue/performance/instrumentation/automatic-instrumentation/).
+- The [Vue Router Integration](https://docs.sentry.io/platforms/javascript/guides/vue/configuration/integrations/vue-router/) is also automatically enabled on the browser side and defaults to using route names as labels. [Supported options](https://docs.sentry.io/platforms/javascript/guides/vue/configuration/integrations/vue-router/#configuration) can be passed through the `vueRouterInstrumentationOptions` object.
 - On the browser side extra options for [Tracking Vue components](https://docs.sentry.io/platforms/javascript/guides/vue/features/component-tracking/) can be passed through the `vueOptions` object.
 - On the server side the `Http` integration is enabled to trace HTTP requests and [tracingHandler](https://docs.sentry.io/platforms/node/guides/express/performance/) is enabled to trace `connect` and `express` routes.
 - See also the [Performance Monitoring](/guide/performance) section for more information.

src/options.ts

@@ -137,6 +137,9 @@ function resolveTracingOptions (options: ModuleConfiguration): void {
     vueOptions: {
       trackComponents: true,
     },
+    vueRouterInstrumentationOptions: {
+      routeLabel: 'name',
+    },
   }
 
   options.tracing = defu(options.tracing, defaultTracingOptions)

src/templates/client.shared.js

@@ -56,9 +56,9 @@ export<%= (options.clientConfigPath || options.customClientIntegrations) ? ' asy
       .join(',\n    ') %>,
   ]
   <% if (options.tracing) { %>
-  const { browserTracing, vueOptions, ...tracingOptions } = <%= serialize(options.tracing) %>
+  const { browserTracing, vueOptions, vueRouterInstrumentationOptions, ...tracingOptions } = <%= serialize(options.tracing) %>
   config.integrations.push(new BrowserTracing({
-    ...(ctx.app.router ? { routingInstrumentation: vueRouterInstrumentation(ctx.app.router) } : {}),
+    ...(ctx.app.router ? { routingInstrumentation: vueRouterInstrumentation(ctx.app.router, vueRouterInstrumentationOptions) } : {}),
     ...browserTracing,
   }))
   merge(config, vueOptions, tracingOptions)

src/types/configuration.d.ts

@@ -1,7 +1,7 @@
 import { Configuration as WebpackOptions } from 'webpack'
 import { Options as SentryOptions, IntegrationClass } from '@sentry/types'
 import * as PluggableIntegrations from '@sentry/integrations'
-import { BrowserTracing, Integrations as BrowserIntegrations, Replay } from '@sentry/vue'
+import { BrowserTracing, Integrations as BrowserIntegrations, Replay, vueRouterInstrumentation } from '@sentry/vue'
 import { Options as SentryVueOptions, TracingOptions as SentryVueTracingOptions } from '@sentry/vue/types/types'
 import { SentryCliPluginOptions } from '@sentry/webpack-plugin'
 import { Integrations as NodeIntegrations, NodeOptions, Handlers } from '@sentry/node'
@@ -29,6 +29,7 @@ export interface LazyConfiguration {
 export interface TracingConfiguration extends Pick<SentryOptions, 'tracesSampleRate'> {
     browserTracing?: Partial<BrowserTracing['options']>
     vueOptions?: Partial<SentryVueTracingOptions>
+    vueRouterInstrumentationOptions?: Parameters<typeof vueRouterInstrumentation>[1]
 }
 
 export interface ModuleConfiguration {

test/options.test.ts

@@ -155,6 +155,9 @@ describe('Resolve Server Options', () => {
         vueOptions: {
           trackComponents: true,
         },
+        vueRouterInstrumentationOptions: {
+          routeLabel: 'name',
+        },
       },
     })
     const integrations = Array.isArray(resolvedOptions.config.integrations) ? resolvedOptions.config.integrations : null