feat(nuxt): Wrap config in nuxt context (#13457)

To be able to use `useRuntimeConfig()` in the user-defined Sentry config
file, it needs to be wrapped in a Nuxt context. Right now, this is only
done on the client-side because the server-side is currently still in
the `public` folder (this will be changed) and cannot use the virtual
`#imports` import (`useRuntimeConfig` is imported from `#imports`)

Author: s1gr1d

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://[email protected]/1337',
+      },
+    },
+  },
 });

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,
 });

packages/nuxt/src/module.ts

@@ -26,10 +26,18 @@ export default defineNuxtModule<ModuleOptions>({
       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' });

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 }));
+      }
+    });
+  },
 });