Nuxt

Prerequisites

• You need a Sentry account and project

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.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({
  // If set up, you can use your runtime config here
  // dsn: useRuntimeConfig().public.sentry.dsn,
  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 a sentry.server.config.ts file to the root of your project:

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

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

The Nuxt useRuntimeConfig() does not work in the Sentry server config due to technical reasons (the config file has to be loaded before Nuxt is loaded). To be able to use process.env you either have to add --env-file=.env to your node command or use the dotenv package:

node --env-file=.env --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs

2. Add an --import flag to the Node options of your node command you run in production (not nuxt preview), so the file loads before any other imports (keep in mind the .mjs file ending). Depending on your setup, you might need to adjust the path to the sentry.server.config.mjs file:

{
  "scripts": {
    "preview": "nuxt preview",
    "start": "node --import ./.output/server/sentry.server.config.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 select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.