Fehler-Monitoring für React.

Stand: 21.10.2026, @sentry/react 11.8.0. Mit Fehlo getestet haben wir @sentry/browser 11.8.0 und sentry-cli 3.8.0, auf denen das React-SDK aufbaut.

1. Paket installieren

npm install @sentry/react

2. SDK starten

Leg im Projekt eine Datei instrument.js an und importiere sie als Erstes in deinem Einstiegspunkt, vor allen anderen Imports.

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

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

dataCollection: { userInfo: false } verhindert, dass das SDK Nutzerdaten und IP-Adressen mitsendet. Seit Version 11 ist das sonst an; mehr dazu unter Error Tracking und DSGVO.

3. Fehler aus Komponenten erfassen

Ab React 19 übergibst du die Fehler-Hooks von createRoot an das SDK:

import "./instrument";
import { createRoot } from "react-dom/client";
import * as Sentry from "@sentry/react";
import App from "./App";

const root = createRoot(document.getElementById("root"), {
  onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
    console.warn("Uncaught error", error, errorInfo.componentStack);
  }),
  onCaughtError: Sentry.reactErrorHandler(),
  onRecoverableError: Sentry.reactErrorHandler(),
});
root.render(<App />);

Mit React 18 oder älter legst du stattdessen eine Error Boundary um deine App:

<Sentry.ErrorBoundary fallback={<p>Etwas ist schiefgelaufen.</p>}>
  <App />
</Sentry.ErrorBoundary>

4. Testen

Bau einen Knopf ein, der einen Fehler wirft, und klick ihn an. Fehler, die du in der Konsole der Entwicklerwerkzeuge auslöst, erfasst das SDK nicht.

<button type="button" onClick={() => { throw new Error("Fehlo test error"); }}>
  Testfehler senden
</button>

Der Fehler erscheint nach wenigen Sekunden in der Fehlerliste deines Projekts.

5. Source Maps hochladen

Ohne Source Maps zeigt der Stacktrace minifizierten Code. Lass Vite Source Maps erzeugen, ohne sie im Bundle zu verlinken:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: "hidden",
  },
});

Nach dem Build schreibt sentry-cli eine Debug-ID in jede Datei und lädt die Maps zu Fehlo hoch. Liefere die Dateien aus dist erst danach aus, damit sie dieselben IDs tragen.

npm install --save-dev @sentry/cli

export SENTRY_URL=https://app.fehlo.de/
export SENTRY_ORG=<organisation-slug>
export SENTRY_PROJECT=<project-slug>
export SENTRY_AUTH_TOKEN=<token>

npx sentry-cli sourcemaps inject dist
npx sentry-cli sourcemaps upload --release "my-app@1.0.0" dist

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>.

Wenn du lieber das Vite-Plugin @sentry/vite-plugin nimmst: Es kennt die Option url für den Server. Mit Fehlo getestet haben wir den Weg über sentry-cli.

sentryVitePlugin({
  url: "https://app.fehlo.de/",
  org: "<organisation-slug>",
  project: "<project-slug>",
  authToken: process.env.SENTRY_AUTH_TOKEN,
  telemetry: false,
}),

Performance messen

Für Seitenaufrufe und Anfragen ergänzt du in Sentry.init:

integrations: [Sentry.browserTracingIntegration()],
tracesSampleRate: 0.2,

Jede gemessene Seitenansicht ist eine Transaktion. Transaktionen zählen zu einem eigenen Kontingent deines Plans, nicht zu den Ereignissen. 0.2 heißt: jede fünfte Seitenansicht wird gemessen.

Häufige Fragen