From 977a74e7b28f360116514258adcf8cbcec2b5be1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Ch=C5=82odnicki?= <rchl2k@gmail.com>
Date: Mon, 28 Aug 2023 09:22:10 +0200
Subject: [PATCH] feat(tracing): allow configuring vueRouterInstrumentation
 options (#614)

---
 docs/content/en/configuration/options.md | 6 +++++-
 src/options.ts                           | 3 +++
 src/templates/client.shared.js           | 4 ++--
 src/types/configuration.d.ts             | 3 ++-
 test/options.test.ts                     | 3 +++
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/docs/content/en/configuration/options.md b/docs/content/en/configuration/options.md
index aca5220e..cef09256 100644
--- a/docs/content/en/configuration/options.md
+++ b/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.
diff --git a/src/options.ts b/src/options.ts
index 4cfbfedc..96c61d89 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -137,6 +137,9 @@ function resolveTracingOptions (options: ModuleConfiguration): void {
     vueOptions: {
       trackComponents: true,
     },
+    vueRouterInstrumentationOptions: {
+      routeLabel: 'name',
+    },
   }
 
   options.tracing = defu(options.tracing, defaultTracingOptions)
diff --git a/src/templates/client.shared.js b/src/templates/client.shared.js
index e38a1da3..028f145e 100644
--- a/src/templates/client.shared.js
+++ b/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)
diff --git a/src/types/configuration.d.ts b/src/types/configuration.d.ts
index ab70842f..d8bc3293 100644
--- a/src/types/configuration.d.ts
+++ b/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 {
diff --git a/test/options.test.ts b/test/options.test.ts
index 14511784..bf2b0964 100644
--- a/test/options.test.ts
+++ b/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