feat(nuxt): Inject sentry client config with Nuxt addPluginTemplate

packages/nuxt/README.md

@@ -62,24 +62,18 @@ export default defineNuxtConfig({
 });
 ```
 
-2. Add a `sentry.client.config.(js|ts)` file to the root of your project:
+### 3. Client-side setup
+
+Add a `sentry.client.config.(js|ts)` file to the root of your project:
 
 ```javascript
 import * as Sentry from '@sentry/nuxt';
 
-if (!import.meta.env.SSR) {
-  Sentry.init({
-    dsn: env.DSN,
-    replaysSessionSampleRate: 0.1,
-    replaysOnErrorSampleRate: 1.0,
-  });
-}
+Sentry.init({
+  dsn: env.DSN,
+});
 ```
 
-### 3. Server-side Setup
-
-todo: add server-side setup
-
 ### 4. Vite Setup
 
 todo: add vite setup

packages/nuxt/package.json

@@ -42,19 +42,18 @@
     "nuxt": "3.x"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.12.2",
+    "@nuxt/kit": "^3.12.3",
     "@sentry/browser": "8.15.0",
     "@sentry/core": "8.15.0",
-    "@sentry/node": "8.15.0",
     "@sentry/opentelemetry": "8.15.0",
     "@sentry/types": "8.15.0",
     "@sentry/utils": "8.15.0",
     "@sentry/vite-plugin": "2.20.1",
     "@sentry/vue": "8.15.0"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "0.8.0",
-    "nuxt": "^3.12.2"
+    "@nuxt/module-builder": "0.8.1",
+    "nuxt": "^3.12.3"
   },
   "scripts": {
     "build": "run-p build:transpile build:types build:nuxt-module",

packages/nuxt/src/index.types.ts

@@ -1 +1 @@
-export * from './client';
+export * from './index.client';

packages/nuxt/src/module.ts

@@ -1,7 +1,6 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import { type Resolver, addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit';
-import { addImportStatement, buildSdkInitFileImportSnippet } from './common/snippets';
+import { addPlugin, addPluginTemplate, createResolver, defineNuxtModule } from '@nuxt/kit';
 import type { SentryNuxtOptions } from './common/types';
 
 export type ModuleOptions = SentryNuxtOptions;
@@ -16,34 +15,33 @@ export default defineNuxtModule<ModuleOptions>({
   },
   defaults: {},
   setup(_moduleOptions, nuxt) {
-    const resolver: Resolver = createResolver(import.meta.url);
-
-    const pathToClientInit = findDefaultSdkInitFile('client');
-
-    if (pathToClientInit) {
-      nuxt.hook('app:templates', nuxtApp => {
-        if (nuxtApp.rootComponent) {
-          try {
-            addImportStatement(nuxtApp.rootComponent, buildSdkInitFileImportSnippet(pathToClientInit));
-          } catch (err) {
-            // eslint-disable-next-line no-console
-            console.error(`[Sentry] Could not add import statement to root component. ${err}`);
-          }
-        }
+    const moduleDirResolver = createResolver(import.meta.url);
+    const buildDirResolver = createResolver(nuxt.options.buildDir);
+
+    const clientConfigFile = findDefaultSdkInitFile('client');
+
+    if (clientConfigFile) {
+      // Inject the client-side Sentry config file with a side effect import
+      addPluginTemplate({
+        mode: 'client',
+        filename: 'sentry-client-config.mjs',
+        getContents: () =>
+          `import "${buildDirResolver.resolve(`/${clientConfigFile}`)}"\n` +
+          'export default defineNuxtPlugin(() => {})',
       });
-    }
 
-    if (resolver) {
-      addPlugin(resolver.resolve('./runtime/plugins/sentry.client'));
+      addPlugin({ src: moduleDirResolver.resolve('./runtime/plugins/sentry.client'), mode: 'client' });
     }
   },
 });
 
-function findDefaultSdkInitFile(type: /* 'server' | */ 'client'): string | undefined {
+function findDefaultSdkInitFile(type: /* 'server' */ 'client'): string | undefined {
   const possibleFileExtensions = ['ts', 'js', 'mjs', 'cjs', 'mts', 'cts'];
 
   const cwd = process.cwd();
-  return possibleFileExtensions
+  const filePath = possibleFileExtensions
     .map(e => path.resolve(path.join(cwd, `sentry.${type}.config.${e}`)))
     .find(filename => fs.existsSync(filename));
+
+  return filePath ? path.basename(filePath) : undefined;
 }