diff --git a/docs/content/en/sentry/options.md b/docs/content/en/sentry/options.md index b01d21e6..2fa5590e 100644 --- a/docs/content/en/sentry/options.md +++ b/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 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 extra options for [Tracking Vue components](https://docs.sentry.io/platforms/javascript/guides/vue/features/component-tracking/) can be passed through the `vueOptions` object. diff --git a/lib/plugin.client.js b/lib/plugin.client.js index e15ab50c..3c5b65c2 100644 --- a/lib/plugin.client.js +++ b/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) { %> diff --git a/lib/plugin.lazy.js b/lib/plugin.lazy.js index 7d1b1dd9..34898573 100644 --- a/lib/plugin.lazy.js +++ b/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) diff --git a/test/fixture/default/pages/index.vue b/test/fixture/default/pages/index.vue index 146088ec..52aff6b5 100644 --- a/test/fixture/default/pages/index.vue +++ b/test/fixture/default/pages/index.vue @@ -4,6 +4,11 @@ {{ serverSentry ? 'Works!' : '$sentry object is missing!' }}

Client-side

{{ clientSentry ? 'Works!' : '$sentry object is missing!' }} +

+ +

diff --git a/test/fixture/lazy/nuxt.config.js b/test/fixture/lazy/nuxt.config.js index c05d8046..1e6cb671 100644 --- a/test/fixture/lazy/nuxt.config.js +++ b/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: {