feat(nuxt): Setup source maps with vite config

packages/astro/src/integration/types.ts

@@ -70,7 +70,7 @@ type SourceMapsOptions = {
     telemetry?: boolean;
 
     /**
-     * A glob or an array of globs that specify the build artifacts and source maps that will uploaded to Sentry.
+     * A glob or an array of globs that specify the build artifacts and source maps that will be uploaded to Sentry.
      *
      * If this option is not specified, sensible defaults based on your `outDir`, `rootDir` and `adapter`
      * config will be used. Use this option to override these defaults, for instance if you have a

packages/nuxt/.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
       files: ['src/vite/**', 'src/server/**'],
       rules: {
         '@sentry-internal/sdk/no-optional-chaining': 'off',
+        '@sentry-internal/sdk/no-nullish-coalescing': 'off',
       },
     },
   ],

packages/nuxt/README.md

@@ -140,12 +140,24 @@ Add an import flag to the node options, so the file loads before any other impor
 }
 ```
 
-### 5. Vite Setup
-
-todo: add vite setup
-
 ---
 
 ## Uploading Source Maps
 
-todo: add source maps instructions
+To upload source maps, you can use the `sourceMapsUploadOptions` option inside the `sentry` options of your
+`nuxt.config.ts`:
+
+```javascript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@sentry/nuxt/module'],
+  sentry: {
+    debug: true,
+    sourceMapsUploadOptions: {
+      org: 'your-org-slug',
+      project: 'your-project-slug',
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+    },
+  },
+});
+```

packages/nuxt/src/common/types.ts

@@ -1,4 +1,71 @@
+import type { Options } from '@sentry/types';
 import type { init } from '@sentry/vue';
 
 // Omitting 'app' as the Nuxt SDK will add the app instance in the client plugin (users do not have to provide this)
 export type SentryNuxtOptions = Omit<Parameters<typeof init>[0] & object, 'app'>;
+
+type SourceMapsOptions = {
+  /**
+   * Options for the Sentry Vite plugin to customize the source maps upload process.
+   *
+   * These options are always read from the `sentry` module options in the `nuxt.config.(js|ts).
+   * Do not define them in the `sentry.client.config.(js|ts)` or `sentry.server.config.(js|ts)` files.
+   */
+  sourceMapsUploadOptions?: {
+    /**
+     * If this flag is `true`, and an auth token is detected, the Sentry integration will
+     * automatically generate and upload source maps to Sentry during a production build.
+     *
+     * @default true
+     */
+    enabled?: boolean;
+
+    /**
+     * The auth token to use when uploading source maps to Sentry.
+     *
+     * Instead of specifying this option, you can also set the `SENTRY_AUTH_TOKEN` environment variable.
+     *
+     * To create an auth token, follow this guide:
+     * @see https://docs.sentry.io/product/accounts/auth-tokens/#organization-auth-tokens
+     */
+    authToken?: string;
+
+    /**
+     * The organization slug of your Sentry organization.
+     * Instead of specifying this option, you can also set the `SENTRY_ORG` environment variable.
+     */
+    org?: string;
+
+    /**
+     * The project slug of your Sentry project.
+     * Instead of specifying this option, you can also set the `SENTRY_PROJECT` environment variable.
+     */
+    project?: string;
+
+    /**
+     * If this flag is `true`, the Sentry plugin will collect some telemetry data and send it to Sentry.
+     * It will not collect any sensitive or user-specific data.
+     *
+     * @default true
+     */
+    telemetry?: boolean;
+
+    /**
+     * A glob or an array of globs that specify the build artifacts and source maps that will be uploaded to Sentry.
+     *
+     * If this option is not specified, sensible defaults based on your `outDir`, `rootDir` and `adapter`
+     * config will be used. Use this option to override these defaults, for instance if you have a
+     * customized build setup that diverges from Nuxt's defaults.
+     *
+     * The globbing patterns must follow the implementation of the `glob` package.
+     * @see https://www.npmjs.com/package/glob#glob-primer
+     */
+    assets?: string | Array<string>;
+  };
+};
+
+/**
+ * The SDK options are mostly handled inside the `init` function in separate files (see type `SentryNuxtOptions`).
+ * Other options, such as the source maps options are added inside the `nuxt.config.ts` to be able to access those options during build time and modify the Vite config.
+ */
+export type SentryNuxtModuleOptions = Pick<Options, 'debug'> & SourceMapsOptions;

packages/nuxt/src/module.ts

@@ -1,9 +1,10 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { addPlugin, addPluginTemplate, addServerPlugin, createResolver, defineNuxtModule } from '@nuxt/kit';
-import type { SentryNuxtOptions } from './common/types';
+import type { SentryNuxtModuleOptions } from './common/types';
+import { setupSourceMaps } from './vite/sourceMaps';
 
-export type ModuleOptions = SentryNuxtOptions;
+export type ModuleOptions = SentryNuxtModuleOptions;
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
@@ -14,7 +15,7 @@ export default defineNuxtModule<ModuleOptions>({
     },
   },
   defaults: {},
-  setup(_moduleOptions, nuxt) {
+  setup(moduleOptions, nuxt) {
     const moduleDirResolver = createResolver(import.meta.url);
     const buildDirResolver = createResolver(nuxt.options.buildDir);
 
@@ -47,6 +48,10 @@ export default defineNuxtModule<ModuleOptions>({
 
       addServerPlugin(moduleDirResolver.resolve('./runtime/plugins/sentry.server'));
     }
+
+    if (clientConfigFile || serverConfigFile) {
+      setupSourceMaps(moduleOptions, nuxt);
+    }
   },
 });
 

packages/nuxt/src/vite/sourceMaps.ts

@@ -0,0 +1,33 @@
+import type { Nuxt } from '@nuxt/schema';
+import { sentryVitePlugin } from '@sentry/vite-plugin';
+import type { SentryNuxtModuleOptions } from '../common/types';
+
+/**
+ *  Setup source maps for Sentry inside the Nuxt module during build time.
+ */
+export function setupSourceMaps(moduleOptions: SentryNuxtModuleOptions, nuxt: Nuxt): void {
+  nuxt.hook('vite:extendConfig', async (viteInlineConfig, _env) => {
+    const sourceMapsUploadOptions = moduleOptions.sourceMapsUploadOptions || {};
+
+    if ((sourceMapsUploadOptions.enabled ?? true) && viteInlineConfig.mode !== 'development') {
+      const sentryPlugins = sentryVitePlugin({
+        org: sourceMapsUploadOptions.org ?? process.env.SENTRY_ORG,
+        project: sourceMapsUploadOptions.project ?? process.env.SENTRY_PROJECT,
+        authToken: sourceMapsUploadOptions.authToken ?? process.env.SENTRY_AUTH_TOKEN,
+        telemetry: sourceMapsUploadOptions.telemetry ?? true,
+        _metaOptions: {
+          telemetry: {
+            metaFramework: 'nuxt',
+          },
+        },
+        debug: moduleOptions.debug ?? false,
+      });
+
+      viteInlineConfig.plugins = viteInlineConfig.plugins || [];
+      viteInlineConfig.plugins.push(...sentryPlugins);
+
+      viteInlineConfig.build = viteInlineConfig.build || {};
+      viteInlineConfig.build.sourcemap = true;
+    }
+  });
+}