Error monitoring for Nuxt.

As of 24 October 2026, @sentry/nuxt 11.9.0, Nuxt 3.7 or later (3.14 recommended) and Nuxt 4. We tested @sentry/browser and @sentry/node 11.8.0, which the Nuxt SDK builds on, with Fehlo.

1. Install the package

npm install @sentry/nuxt

The wizards npx @sentry/wizard -i nuxt and npx sentry init sign in to sentry.io. The manual setup is three files.

2. Module and source maps

export default defineNuxtConfig({
  modules: ["@sentry/nuxt/module"],
  sourcemap: { client: "hidden" },
  sentry: {
    sentryUrl: "https://app.fehlo.de/",
    org: "<organisation-slug>",
    project: "<project-slug>",
    authToken: process.env.SENTRY_AUTH_TOKEN,
    telemetry: false,
  },
});

sentryUrl points the source map upload at Fehlo. sourcemap: { client: "hidden" } creates maps for the browser code without linking them in the bundle. Create the token in Fehlo under Settings, API tokens, with the preset "For source maps". The organisation and project slugs are in the address bar of the project settings: /<organisation>/settings/projects/<project>.

3. Browser and server

Both files go in the project root, next to package.json:

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

Sentry.init({
  dsn: "https://<key>@app.fehlo.de/<project-id>",
  environment: "production",
  dataCollection: {
    userInfo: false,
  },
});

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

Sentry.init({
  dsn: process.env.SENTRY_DSN ?? "https://<key>@app.fehlo.de/<project-id>",
  environment: "production",
  dataCollection: {
    userInfo: false,
  },
});

useRuntimeConfig() isn't available in the server config yet; read values from process.env. Since version 11, Nuxt bundles the server config into the Nitro build. Start the server as usual, without --import:

npx nuxi build
node .output/server/index.mjs

4. Test it

A page with two buttons and an API route that throws:

<script setup>
function clientError() {
  throw new Error("Fehlo client test error");
}

async function serverError() {
  await $fetch("/api/fehlo-test");
}
</script>

<template>
  <button type="button" @click="clientError">Client error</button>
  <button type="button" @click="serverError">Server error</button>
</template>

export default defineEventHandler(() => {
  throw new Error("Fehlo server test error");
});

Both errors appear in Fehlo: one with component and browser, the other with the route on the server.

Privacy

dataCollection: { userInfo: false } is in both files because since version 11 the SDK otherwise collects user data and IP addresses. On the server it also collects headers, cookies and bodies unless restricted. What else you can switch off is on GDPR-compliant error tracking.

Questions