Nuxt

Don't already have an account and Sentry project established? Head over to sentry.io, then return to this page.

Install

Sentry captures data by using an SDK within your application’s runtime.

npm install @sentry/nuxt --save

Configure

Configuration should happen as early as possible in your application's lifecycle.

To set up the Sentry SDK, register the Sentry Nuxt module and initialize the SDK for client and server. At build time, the Sentry Nuxt Module looks for the following two files:

• Client-Side: sentry.client.config.(js|ts) in the root containing Sentry.init
• Server-Side: instrument.server.mjs in the public directory containing Sentry.init

In these files, you can specify the full range of Sentry SDK options.

Nuxt Module Setup

Add the Sentry Nuxt Module to your nuxt.config.ts file:

export default defineNuxtConfig({
  modules: ["@sentry/nuxt/module"],
});

Adding this module enables the Sentry SDK in your Nuxt application. The Sentry Nuxt Module will then automatically look for the Sentry configuration files and initialize the SDK accordingly.

Client-side Setup

Add a sentry.client.config.(js|ts) file to the root of your project (this is probably the same level as the package.json). In this file, import and initialize Sentry, specifying any SDK options for the client:

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

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

Server-side Setup

1. Add an instrument.server.mjs file to your public folder. In this file, import and initialize Sentry, specifying any SDK options for the server:

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

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
});

2. Add an --import flag to the NODE_OPTIONS environment variable wherever you run your application's production build output. For local previews, update your nuxt preview script in the package.json (see below). Also, ensure this environment variable is set in your deployment environment, such as on Netlify or Vercel.

{
  "scripts": {
    "preview": "NODE_OPTIONS='--import ./public/instrument.server.mjs' nuxt preview",
    "start": "node --import .output/public/instrument.server.mjs .output/server/index.mjs"
  }
}

Add Readable Stack Traces to Errors

The Sentry Nuxt Module uses the Sentry Vite Plugin to upload source maps for both server and client builds. This means that when you run a production build (nuxt build), source maps will be generated and uploaded to Sentry, so that you get readable stack traces in your Sentry issues.

To upload source maps, specify your Sentry auth token as well as your org and project slugs. Set them in the sourceMapsUploadOptions option inside the sentry options of your nuxt.config.ts.

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

Verify

This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.

<script setup>
  const triggerError = () => {
    throw new Error("Nuxt Button Error");
  };
</script>

<template>
  <button id="errorBtn" @click="triggerError">Trigger Error</button>
</template>

To view and resolve the recorded error, log into sentry.io and open your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.