diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3/nuxt.config.ts b/dev-packages/e2e-tests/test-applications/nuxt-3/nuxt.config.ts index 69b31a4214ec..0fcccd560af9 100644 --- a/dev-packages/e2e-tests/test-applications/nuxt-3/nuxt.config.ts +++ b/dev-packages/e2e-tests/test-applications/nuxt-3/nuxt.config.ts @@ -4,4 +4,11 @@ export default defineNuxtConfig({ imports: { autoImport: false, }, + runtimeConfig: { + public: { + sentry: { + dsn: 'https://public@dsn.ingest.sentry.io/1337', + }, + }, + }, }); diff --git a/dev-packages/e2e-tests/test-applications/nuxt-3/sentry.client.config.ts b/dev-packages/e2e-tests/test-applications/nuxt-3/sentry.client.config.ts index 5253d08c90f0..5c4e0f892ca8 100644 --- a/dev-packages/e2e-tests/test-applications/nuxt-3/sentry.client.config.ts +++ b/dev-packages/e2e-tests/test-applications/nuxt-3/sentry.client.config.ts @@ -1,8 +1,9 @@ import * as Sentry from '@sentry/nuxt'; +import { useRuntimeConfig } from '#imports'; Sentry.init({ environment: 'qa', // dynamic sampling bias to keep transactions - dsn: 'https://public@dsn.ingest.sentry.io/1337', + dsn: useRuntimeConfig().public.sentry.dsn, tunnel: `http://localhost:3031/`, // proxy server tracesSampleRate: 1.0, }); diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts index da7fcf778366..5d529c99330c 100644 --- a/packages/nuxt/src/module.ts +++ b/packages/nuxt/src/module.ts @@ -26,10 +26,18 @@ export default defineNuxtModule({ addPluginTemplate({ mode: 'client', filename: 'sentry-client-config.mjs', - getContents: () => - `import "${buildDirResolver.resolve(`/${clientConfigFile}`)}"\n` + - 'import { defineNuxtPlugin } from "#imports"\n' + - 'export default defineNuxtPlugin(() => {})', + + // Dynamic import of config file to wrap it within a Nuxt context (here: defineNuxtPlugin) + // Makes it possible to call useRuntimeConfig() in the user-defined sentry config file + getContents: () => ` + import { defineNuxtPlugin } from "#imports"; + + export default defineNuxtPlugin({ + name: 'sentry-client-config', + async setup() { + await import("${buildDirResolver.resolve(`/${clientConfigFile}`)}") + } + });`, }); addPlugin({ src: moduleDirResolver.resolve('./runtime/plugins/sentry.client'), mode: 'client' }); diff --git a/packages/nuxt/src/runtime/plugins/sentry.client.ts b/packages/nuxt/src/runtime/plugins/sentry.client.ts index a6bcd0115528..95dc954c4b89 100644 --- a/packages/nuxt/src/runtime/plugins/sentry.client.ts +++ b/packages/nuxt/src/runtime/plugins/sentry.client.ts @@ -29,24 +29,28 @@ interface VueRouter { // Tree-shakable guard to remove all code related to tracing declare const __SENTRY_TRACING__: boolean; -export default defineNuxtPlugin(nuxtApp => { - // This evaluates to true unless __SENTRY_TRACING__ is text-replaced with "false", in which case everything inside - // will get tree-shaken away - if (typeof __SENTRY_TRACING__ === 'undefined' || __SENTRY_TRACING__) { - const sentryClient = getClient(); +export default defineNuxtPlugin({ + name: 'sentry-client-integrations', + dependsOn: ['sentry-client-config'], + async setup(nuxtApp) { + // This evaluates to true unless __SENTRY_TRACING__ is text-replaced with "false", in which case everything inside + // will get tree-shaken away + if (typeof __SENTRY_TRACING__ === 'undefined' || __SENTRY_TRACING__) { + const sentryClient = getClient(); - if (sentryClient && '$router' in nuxtApp) { - sentryClient.addIntegration( - browserTracingIntegration({ router: nuxtApp.$router as VueRouter, routeLabel: 'path' }), - ); + if (sentryClient && '$router' in nuxtApp) { + sentryClient.addIntegration( + browserTracingIntegration({ router: nuxtApp.$router as VueRouter, routeLabel: 'path' }), + ); + } } - } - nuxtApp.hook('app:created', vueApp => { - const sentryClient = getClient(); + nuxtApp.hook('app:created', vueApp => { + const sentryClient = getClient(); - if (sentryClient) { - sentryClient.addIntegration(vueIntegration({ app: vueApp })); - } - }); + if (sentryClient) { + sentryClient.addIntegration(vueIntegration({ app: vueApp })); + } + }); + }, });