Source Maps

Upload your source maps to Sentry to enable readable stack traces in your errors.

@sentry/nuxt uses the Sentry Vite Plugin and the Sentry Rollup Plugin to generate and upload source maps automatically. This means that when you run a production build (nuxt build), source maps will be generated and uploaded to Sentry, so that errors in Sentry will contain readable stack traces.

To automatically upload source maps, you need to provide your Sentry auth token, your organization, and project slugs to the sentry.sourceMapsUploadOptions in your Nuxt config:

nuxt.config.ts
Copied
export default defineNuxtConfig({
  modules: ["@sentry/nuxt/module"],
sentry: { sourceMapsUploadOptions: { org: "example-org", project: "example-project", authToken: "sntrys_YOUR_TOKEN_HERE", }, },
});

Note: Source maps are only generated and uploaded during production builds (nuxt build). Development builds (nuxt dev) do not generate source maps for upload.

See how uploading source maps lets you see the exact line of code that caused an error:

To enable client-side source maps, you need to do so explicitly. Nuxt applies default source map settings, and the Sentry Nuxt Module respects these when they are defined.

To enable client-side source map generation, add the following to your Nuxt configuration:

nuxt.config.ts
Copied
export default defineNuxtConfig({
sourcemap: { client: "hidden" },
});

The hidden option functions the same as true, by enabling source map generation. However, it also suppresses the source map reference comments that normally appear at the end of each generated file in the build output. This option keeps the source maps available without exposing their references in the files.

When you open your browser's developer tools, the browser tries to fetch source maps using the reference comments found in bundled files. If the source maps are uploaded to Sentry and removed from the client side, these references cause 404 errors in the developer tools. The hidden option stops these comments from being generated, preventing browsers from trying to fetch missing files and avoiding unnecessary errors.

@sentry/nuxt will generate and upload source maps automatically during production builds, so that errors in Sentry contain readable stack traces.

The easiest way to configure uploading source maps is by using the Sentry Wizard.

If you installed the SDK manually or the wizard failed, follow the steps below to manually configure source maps upload.

To automatically upload source maps, you need to provide your Sentry auth token, organization, and project slugs in your Nuxt configuration:

Make sure you add your auth token to your CI, if you are using one to deploy your application.

Add your auth token to your environment:

.env
Copied
SENTRY_AUTH_TOKEN=sntrys_YOUR_TOKEN_HERE

To enable client-side source maps, you need to do so explicitly. Nuxt applies default source map settings, and the Sentry Nuxt Module respects these when they are defined.

To enable client-side source map generation, add the following to your Nuxt configuration:

nuxt.config.ts
Copied
export default defineNuxtConfig({
  sourcemap: { client: "hidden" },
});

The hidden option functions the same as true, by enabling source map generation. However, it also suppresses the source map reference comments that normally appear at the end of each generated file in the build output. This option keeps the source maps available without exposing their references in the files.

When you open your browser's developer tools, the browser tries to fetch source maps using the reference comments found in bundled files. If the source maps are uploaded to Sentry and removed from the client side, these references cause 404 errors in the developer tools. The hidden option stops these comments from being generated, preventing browsers from trying to fetch missing files and avoiding unnecessary errors.

Configure source map behavior using the source maps options in your Nuxt config:

nuxt.config.ts
Copied
export default defineNuxtConfig({
  modules: ["@sentry/nuxt/module"],
  sentry: {
    sourceMapsUploadOptions: {
      org: "example-org",
      project: "example-project",
      authToken: process.env.SENTRY_AUTH_TOKEN,
      sourcemaps: {
        assets: ["./output/**/*"],
        ignore: ["**/node_modules/**"],
        filesToDeleteAfterUpload: ["./output/**/*.map"],
      },
    },
  },
});

If you're experiencing issues with source maps, see Troubleshooting Source Maps.

Was this helpful?
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").