This SDK is under active development! Feel free to already try it but expect breaking changes

todo: link official SDK docs

• Official Browser SDK Docs
• Official Node SDK Docs

The minimum supported version of Nuxt is 3.0.0.

This package is a wrapper around @sentry/node for the server and @sentry/vue for the client side, with added functionality related to Nuxt.

What is working:

• Error Reporting
  • Vue
  • Node
  • Nitro

What is partly working:

• Tracing by setting tracesSampleRate
  • UI (Vue) traces
  • HTTP (Node) traces

What is not yet(!) included:

• Source Maps
• Nuxt-specific traces and connecting frontend & backend traces

Known Issues:

• When adding sentry.server.config.(ts/js), you get this error: "Failed to register ESM hook", but the application will still work
• When initializing Sentry on the server with instrument.server.(js|ts), you get an 'import-in-the-middle' error, and the application won't work

todo: add wizard instructions

Take a look at the sections below if you want to customize your SDK configuration.

If the setup through the wizard doesn't work for you, you can also set up the SDK manually.

1. Install the Sentry Nuxt SDK:

   # Using npm
   npm install @sentry/nuxt
   
   # Using yarn
   yarn add @sentry/nuxt

The Sentry Nuxt SDK is based on Nuxt Modules.

1. Add @sentry/nuxt/module to the modules section of nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@sentry/nuxt/module'],
});

Add a sentry.client.config.(js|ts) file to the root of your project:

import * as Sentry from '@sentry/nuxt';

Sentry.init({
  dsn: process.env.SENTRY_DSN,
});

Add an instrument.server.mjs file to your public folder:

import * as Sentry from '@sentry/nuxt';

// Only run `init` when process.env.SENTRY_DSN is available.
if (process.env.SENTRY_DSN) {
  Sentry.init({
    dsn: process.env.SENTRY_DSN,
  });
}

Add an import flag to the NODE_OPTIONS of your preview script in the package.json file, so the file loads before any other imports:

{
  "scripts": {
    "preview": "NODE_OPTIONS='--import ./public/instrument.server.mjs' nuxt preview"
  }
}

To upload source maps, you can use the sourceMapsUploadOptions option inside the sentry options of your nuxt.config.ts:

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