From d9eada117fdb23bd95f00348bb818a6fc15ea5e3 Mon Sep 17 00:00:00 2001 From: Rafal Chlodnicki Date: Mon, 19 Dec 2022 01:18:19 +0100 Subject: [PATCH 1/3] feat(tracing): enable Vue Router instrumentation by default --- docs/content/en/sentry/options.md | 2 +- lib/plugin.client.js | 5 ++++- lib/plugin.lazy.js | 19 ++++++++++++++++--- test/default.test.js | 12 ++++++++++++ test/fixture/default/pages/index.vue | 5 +++++ test/fixture/lazy/nuxt.config.js | 1 + 6 files changed, 39 insertions(+), 5 deletions(-) diff --git a/docs/content/en/sentry/options.md b/docs/content/en/sentry/options.md index b01d21e6..80255e3c 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 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. 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/default.test.js b/test/default.test.js index ee6e3764..07922d76 100644 --- a/test/default.test.js +++ b/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. }) 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: { From 5c058419b5c3520ddabf8963170947cb61502f61 Mon Sep 17 00:00:00 2001 From: Rafal Chlodnicki Date: Mon, 19 Dec 2022 01:26:15 +0100 Subject: [PATCH 2/3] docs --- docs/content/en/sentry/options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/en/sentry/options.md b/docs/content/en/sentry/options.md index 80255e3c..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. 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 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. From 5e9311cbc76ea26af1fedf5da1a0decf80172787 Mon Sep 17 00:00:00 2001 From: Rafal Chlodnicki Date: Mon, 19 Dec 2022 13:00:00 +0100 Subject: [PATCH 3/3] will introduce new tests later --- test/default.test.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/test/default.test.js b/test/default.test.js index 07922d76..ee6e3764 100644 --- a/test/default.test.js +++ b/test/default.test.js @@ -44,17 +44,5 @@ 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. })