Fehler-Monitoring für Nuxt.

Stand: 24.10.2026, @sentry/nuxt 11.9.0, Nuxt ab 3.7 (empfohlen ab 3.14) und Nuxt 4. Mit Fehlo getestet haben wir @sentry/browser und @sentry/node 11.8.0, auf denen das Nuxt-SDK aufbaut.

1. Paket installieren

npm install @sentry/nuxt

Die Assistenten npx @sentry/wizard -i nuxt und npx sentry init melden sich bei sentry.io an. Die Einrichtung von Hand braucht drei Dateien.

2. Modul und 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 zeigt den Upload der Source Maps auf Fehlo. sourcemap: { client: "hidden" } erzeugt Maps für den Browser-Code, ohne sie im Bundle zu verlinken. Das Token legst du in Fehlo unter Einstellungen, API-Tokens an, mit der Vorlage „Für Source Maps“. Organisation und Projekt stehen in der Adresszeile der Projekteinstellungen: /<organisation>/settings/projects/<projekt>.

3. Browser und Server

Beide Dateien liegen im Wurzelverzeichnis des Projekts, neben der 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,
  },
});

In der Server-Konfiguration steht useRuntimeConfig() noch nicht zur Verfügung; lies Werte aus process.env. Seit Version 11 baut Nuxt die Server-Konfiguration in den Nitro-Build ein. Du startest den Server wie gewohnt, ohne --import:

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

4. Testen

Eine Seite mit zwei Knöpfen und eine API-Route, die einen Fehler wirft:

<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");
});

Beide Fehler erscheinen in Fehlo: der eine mit Komponente und Browser, der andere mit der Route auf dem Server.

Datenschutz

dataCollection: { userInfo: false } steht in beiden Dateien, weil das SDK seit Version 11 sonst Nutzerdaten und IP-Adressen sammelt. Auf dem Server sammelt es ohne weitere Einschränkung auch Header, Cookies und Bodies. Was du zusätzlich abschalten kannst, steht unter Error Tracking und DSGVO.

Häufige Fragen