feat(tracing): enable Vue Router instrumentation by default

Author: rchl

docs/content/en/sentry/options.md

@@ -327,7 +327,7 @@ export default function () {
     },
   }
   ```
-- On the browser side the `BrowserTracing` integration is enabled by default and adds automatic instrumentation for monitoring the performance of the application. See 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. The Vue Router instrumentation (`Sentry.vueRouterInstrumentation`) 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 extra options for [Tracking Vue components](https://docs.sentry.io/platforms/javascript/guides/vue/features/component-tracking/) can be passed through the `vueOptions` object.
 
 <alert type="info">

lib/plugin.client.js

@@ -54,7 +54,10 @@ export default async function (ctx, inject) {
   <% if (options.tracing) { %>
   // eslint-disable-next-line prefer-regex-literals
   const { browserTracing, vueOptions, ...tracingOptions } = <%= serialize(options.tracing) %>
-  config.integrations.push(new BrowserTracing(browserTracing))
+  config.integrations.push(new BrowserTracing({
+    ...(ctx.app.router ? { routingInstrumentation: Sentry.vueRouterInstrumentation(ctx.app.router) } : {}),
+    ...browserTracing,
+  }))
   merge(config, vueOptions, tracingOptions)
   <% } %>
   <% if (options.customClientIntegrations) { %>

lib/plugin.lazy.js

@@ -110,6 +110,7 @@ async function loadSentry (ctx, inject) {
   }
   %>
   const Sentry = await import(/* <%= magicComments.join(', ') %> */ '@sentry/vue')
+  <% if (options.tracing) { %>const { BrowserTracing } = await import(/* <%= magicComments.join(', ') %> */ '@sentry/tracing')<% } %>
   <%
   if (options.initialize) {
     let integrations = options.PLUGGABLE_INTEGRATIONS.filter(key => key in options.integrations)
@@ -122,8 +123,7 @@ async function loadSentry (ctx, inject) {
   const serializedConfig = Object
     .entries({
       ...options.config,
-      ...options.integrations.Vue,
-      ...(options.tracing ? options.tracing.vueOptions.tracingOptions : {}),
+      ...(options.tracing ? options.tracing.vueOptions : {}),
     })
     .map(([key, option]) => {
       const value = typeof option === 'function' ? serializeFunction(option) : serialize(option)
@@ -159,7 +159,20 @@ async function loadSentry (ctx, inject) {
       }).join(',\n    ')
     %>,
   ]
-  /* eslint-enable quotes, key-spacing */
+  <% if (options.tracing) {
+  const serializedTracingConfig = Object
+    .entries(options.tracing.browserTracing)
+    .map(([key, option]) => {
+      const value = typeof option === 'function' ? serializeFunction(option) : serialize(option)
+      return`${key}: ${value}`
+    })
+    .join(',\n    ')
+%>
+  config.integrations.push(new BrowserTracing({
+    ...(ctx.app.router ? { routingInstrumentation: Sentry.vueRouterInstrumentation(ctx.app.router) } : {}),
+    <%= serializedTracingConfig %>
+  }))
+  <% } %>
 
   <%if (options.customClientIntegrations) {%>
   const customIntegrations = (await import(/* <%= magicComments.join(', ') %> */ '<%= options.customClientIntegrations %>').then(m => m.default || m))(ctx)

test/default.test.js

@@ -44,5 +44,17 @@ describe('Smoke test (default)', () => {
     expect(errors).toEqual([])
   })
 
+  test('reports error on crash', async () => {
+    const page = await browser.newPage()
+    await page.goto(url('/'))
+    expect(await $$('#server-side', page)).toBe('Works!')
+    expect(await $$('#client-side', page)).toBe('Works!')
+    const crashButton = await page.$('#crash-button')
+    expect(crashButton).not.toBeNull()
+    await crashButton?.click()
+    const reports = testkit.reports()
+    expect(reports).toHaveLength(1)
+  })
+
   // TODO: Add tests for custom integration. Blocked by various sentry-kit bugs reported in its repo.
 })

test/fixture/default/pages/index.vue

@@ -4,6 +4,11 @@
     <span id="server-side">{{ serverSentry ? 'Works!' : '$sentry object is missing!' }}</span>
     <h3>Client-side</h3>
     <span id="client-side">{{ clientSentry ? 'Works!' : '$sentry object is missing!' }}</span>
+    <p>
+      <button id="crash-button" @click="crash_me()">
+        crash me
+      </button>
+    </p>
   </div>
 </template>
 

test/fixture/lazy/nuxt.config.js

@@ -21,6 +21,7 @@ const config = {
       TryCatch: { eventTarget: false },
     },
     customClientIntegrations: '~/config/custom-client-integrations.js',
+    tracing: true,
   },
   publicRuntimeConfig: {
     sentry: {