feat(nuxt): Configure sentry in external config

packages/nuxt/README.md

@@ -53,20 +53,24 @@ If the setup through the wizard doesn't work for you, you can also set up the SD
 
 The Sentry Nuxt SDK is based on [Nuxt Modules](https://nuxt.com/docs/api/kit/modules).
 
-1. Add `@sentry/nuxt` to the modules section of `nuxt.config.ts`:
+1. Add `@sentry/nuxt/module` to the modules section of `nuxt.config.ts`:
 
 ```javascript
 // nuxt.config.ts
 export default defineNuxtConfig({
-  modules: ['@sentry/nuxt'],
-  runtimeConfig: {
-    public: {
-      sentry: {
-        dsn: env.DSN,
-        // Additional config
-      },
-    },
-  },
+  modules: ['@sentry/nuxt/module'],
+});
+```
+
+2. Add a `sentry.client.config.(js|ts)` file to the root of your project:
+
+```javascript
+import * as Sentry from '@sentry/nuxt';
+
+Sentry.init({
+  dsn: env.DSN,
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
 });
 ```
 

packages/nuxt/package.json

@@ -12,16 +12,25 @@
   "files": [
     "/build"
   ],
-  "main": "build/module.cjs",
-  "module": "build/module.mjs",
-  "types": "build/types.d.ts",
+  "main": "build/cjs/index.server.js",
+  "module": "build/esm/index.server.js",
+  "browser": "build/esm/index.client.js",
+  "types": "build/types/index.types.d.ts",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
-      "types": "./build/types.d.ts",
-      "import": "./build/module.mjs",
-      "require": "./build/module.cjs"
+      "types": "./build/types/index.types.d.ts",
+      "browser": {
+        "import": "./build/esm/index.client.js",
+        "require": "./build/cjs/index.client.js"
+      },
+      "node": "./build/cjs/index.server.js"
     },
-    "./package.json": "./package.json"
+    "./module": {
+      "types": "./build/module/types.d.ts",
+      "import": "./build/module/module.mjs",
+      "require": "./build/module/module.cjs"
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -31,6 +40,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.12.2",
+    "@sentry/browser": "8.13.0",
     "@sentry/core": "8.13.0",
     "@sentry/node": "8.13.0",
     "@sentry/opentelemetry": "8.13.0",
@@ -41,15 +51,18 @@
   },
   "devDependencies": {
     "@nuxt/module-builder": "0.8.0",
+    "nitropack": "2.9.6",
     "nuxt": "^3.12.2"
   },
   "scripts": {
-    "build": "run-p build:transpile",
+    "build": "run-p build:transpile build:types build:nuxt-module",
     "build:dev": "yarn build",
-    "build:transpile": "nuxt-module-build build --outDir build",
+    "build:nuxt-module": "nuxt-module-build build --outDir build/module",
+    "build:transpile": "rollup -c rollup.npm.config.mjs",
+    "build:types": "tsc -p tsconfig.types.json",
     "build:watch": "run-p build:transpile:watch build:types:watch",
     "build:dev:watch": "yarn build:watch",
-    "build:transpile:watch": "nuxt-module-build build --outDir build --watch",
+    "build:transpile:watch": "rollup -c rollup.npm.config.mjs --watch",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
     "build:tarball": "npm pack",
     "circularDepCheck": "madge --circular src/index.client.ts && madge --circular src/index.server.ts && madge --circular src/index.types.ts",
@@ -72,7 +85,8 @@
           "^build:types"
         ],
         "outputs": [
-          "{projectRoot}/build"
+          "{projectRoot}/build",
+          "{projectRoot}/build/module"
         ]
       }
     }

packages/nuxt/rollup.npm.config.mjs

@@ -0,0 +1,7 @@
+import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollup-utils';
+
+export default makeNPMConfigVariants(
+  makeBaseNPMConfig({
+    entrypoints: ['src/index.server.ts', 'src/index.client.ts', 'src/client/index.ts', 'src/server/index.ts'],
+  }),
+);

packages/nuxt/src/client/sdk.ts

@@ -1,6 +1,6 @@
 import { applySdkMetadata } from '@sentry/core';
 import type { Client } from '@sentry/types';
-import { init as initVue } from '@sentry/vue';
+import { init as initBrowser } from '@sentry/browser';
 import type { SentryVueOptions } from '../common/types';
 
 /**
@@ -15,5 +15,5 @@ export function init(options: SentryVueOptions): Client | undefined {
 
   applySdkMetadata(sentryOptions, 'nuxt', ['nuxt', 'vue']);
 
-  return initVue(sentryOptions);
+  return initBrowser(sentryOptions);
 }

packages/nuxt/src/common/debug-build.ts

@@ -0,0 +1,8 @@
+declare const __DEBUG_BUILD__: boolean;
+
+/**
+ * This serves as a build time flag that will be true by default, but false in non-debug builds or if users replace `__SENTRY_DEBUG__` in their generated code.
+ *
+ * ATTENTION: This constant must never cross package boundaries (i.e. be exported) to guarantee that it can be used for tree shaking.
+ */
+export const DEBUG_BUILD = __DEBUG_BUILD__;

packages/nuxt/src/common/snippets.ts

@@ -0,0 +1,39 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+// todo: tests
+/** Returns an import snippet */
+export function buildSdkInitFileImportSnippet(filePath: string): string {
+  const pathToPosix = (originalPath: string): string => {
+    return originalPath.split(path.sep).join(path.posix.sep);
+  };
+
+  return `import "${pathToPosix(filePath)}";`;
+}
+
+// todo: tests
+/** Adds an import statement right after <script setup> */
+export function addImportStatement(filePath: string, importStatement: string): void {
+  try {
+    const data = fs.readFileSync(filePath, 'utf8');
+    const scriptIndex = data.indexOf('<script setup>');
+
+    // Insert the import statement after the script tag
+    const output = [
+      data.slice(0, scriptIndex + '<script setup>'.length),
+      '\n',
+      importStatement,
+      data.slice(scriptIndex + '<script setup>'.length),
+    ].join('');
+
+    try {
+      fs.writeFileSync(filePath, output, 'utf8');
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(`Error writing file: ${err}`);
+    }
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error(`Error reading file: ${err}`);
+  }
+}

packages/nuxt/src/common/types.ts

@@ -1,3 +1,3 @@
 import type { init } from '@sentry/vue';
 
-export type SentryVueOptions = Parameters<typeof init>[0] & object;
+export type SentryVueOptions = Omit<Parameters<typeof init>[0] & object, 'app'>;

packages/nuxt/src/index.server.ts

@@ -1 +1 @@
-export {};
+export * from './server';

packages/nuxt/src/index.types.ts

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

packages/nuxt/src/module.ts

@@ -1,4 +1,7 @@
-import { type Resolver, addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit';
+import * as fs from 'fs';
+import * as path from 'path';
+import { type Resolver, addPlugin, addServerPlugin, createResolver, defineNuxtModule } from '@nuxt/kit';
+import { addImportStatement, buildSdkInitFileImportSnippet } from './common/snippets';
 import type { SentryVueOptions } from './common/types';
 
 export type ModuleOptions = SentryVueOptions;
@@ -11,13 +14,37 @@ export default defineNuxtModule<ModuleOptions>({
       nuxt: '^3.0.0',
     },
   },
-  // Default configuration options of the Nuxt module
   defaults: {},
-  setup(_moduleOptions, _nuxt) {
+  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(err);
+          }
+        }
+      });
+    }
+
     if (resolver) {
-      addPlugin(resolver.resolve('runtime/plugins/sentry.client.js'));
+      addPlugin(resolver.resolve('./runtime/plugins/sentry.client'));
+      addServerPlugin(resolver.resolve('./runtime/plugins/sentry.server'));
     }
   },
 });
+
+function findDefaultSdkInitFile(type: 'server' | 'client'): string | undefined {
+  const possibleFileExtensions = ['ts', 'js', 'mjs', 'cjs', 'mts'];
+
+  const cwd = process.cwd();
+  return possibleFileExtensions
+    .map(e => path.resolve(path.join(cwd, `sentry.${type}.config.${e}`)))
+    .find(filename => fs.existsSync(filename));
+}

packages/nuxt/src/runtime/plugins/sentry.client.ts

@@ -1,12 +1,8 @@
-import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app';
-import { init } from '../../client';
+import * as Sentry from '@sentry/vue';
+import { defineNuxtPlugin } from 'nuxt/app';
 
 export default defineNuxtPlugin(nuxtApp => {
-  const config = useRuntimeConfig();
-  const sentryConfig = config.public.sentry || {};
-
-  init({
-    ...sentryConfig,
-    app: nuxtApp.vueApp,
+  nuxtApp.hook('app:created', vueApp => {
+    Sentry.addIntegration(Sentry.vueIntegration({ app: vueApp }));
   });
 });

packages/nuxt/src/runtime/plugins/sentry.server.ts

@@ -0,0 +1,4 @@
+import { defineNitroPlugin } from 'nitropack/runtime';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export default defineNitroPlugin(_nitroApp => {});

packages/nuxt/src/server/index.ts

@@ -0,0 +1,3 @@
+// todo: export @sentry/node
+
+export { init } from './sdk';

packages/nuxt/src/server/sdk.ts

@@ -0,0 +1,23 @@
+import { applySdkMetadata, setTag } from '@sentry/core';
+import type { NodeClient, NodeOptions } from '@sentry/node';
+import { getDefaultIntegrations as getDefaultNodeIntegrations } from '@sentry/node';
+import { init as initNodeSdk } from '@sentry/node';
+
+/**
+ *
+ * @param options
+ */
+export function init(options: NodeOptions): NodeClient | undefined {
+  const sentryOptions = {
+    defaultIntegrations: [...getDefaultNodeIntegrations(options)],
+    ...options,
+  };
+
+  applySdkMetadata(sentryOptions, 'nuxt', ['nuxt', 'vue']);
+
+  const client = initNodeSdk(sentryOptions);
+
+  setTag('runtime', 'node');
+
+  return client;
+}

yarn.lock

@@ -25455,7 +25455,7 @@ nise@^5.1.4:
     just-extend "^4.0.2"
     path-to-regexp "^1.7.0"
 
-nitropack@^2.9.6:
+nitropack@2.9.6, nitropack@^2.9.6:
   version "2.9.6"
   resolved "https://registry.yarnpkg.com/nitropack/-/nitropack-2.9.6.tgz#90af114b796872f34e125e780e6148525149769f"
   integrity sha512-HP2PE0dREcDIBVkL8Zm6eVyrDd10/GI9hTL00PHvjUM8I9Y/2cv73wRDmxNyInfrx/CJKHATb2U/pQrqpzJyXA==