Error Boundaries
Implementieren Sie klassenbasierte Error Boundaries mit componentDidCatch und getDerivedStateFromError, damit nicht abgefangene Renderfehler nicht die gesamte App zum Absturz bringen.
Error Boundaries ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Error Boundaries?
Ein nicht abgefangener Fehler beim Rendern, in einer Lifecycle-Methode oder in einem Konstruktor lässt standardmäßig den gesamten React-Baum abstürzen. Error Boundaries fangen solche Fehler in einem Teilbaum ab und ermöglichen stattdessen das Rendern eines Fallbacks.
Nur Klassenkomponenten
Error Boundaries müssen Klassenkomponenten sein (auch 2026 gibt es dafür noch kein entsprechendes Hook). Der Hook useErrorBoundary ist in Bibliotheken wie react-error-boundary verfügbar.
getDerivedStateFromError
Eine statische Methode, die aufgerufen wird, wenn ein Nachfahre einen Fehler auslöst. Geben Sie eine Zustandsaktualisierung zurück, die das Rendern des Fallbacks auslöst.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}componentDidCatch zum Protokollieren
Verwenden Sie componentDidCatch, um den Fehler an einen Dienst wie Sentry oder Datadog zu protokollieren. Die Methode erhält sowohl den Fehler als auch den React-Komponenten-Stack.
componentDidCatch(error, errorInfo) {
Sentry.captureException(error, {
contexts: { react: { componentStack: errorInfo.componentStack } }
});
}Den App-Root wrappen
Wrappen Sie Ihre oberste App-Komponente in eine Error Boundary, um den gefürchteten weißen Bildschirm zu verhindern.
<ErrorBoundary fallback={<GlobalErrorPage />}>
<App />
</ErrorBoundary>Granulare Boundaries pro Route oder Widget
Eine globale Boundary ist das Minimum. Fügen Sie Boundaries pro Route hinzu, damit ein Absturz in einem Bereich nicht die gesamte App leer darstellt.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={
<ErrorBoundary fallback={<DashboardError />}>
<Dashboard />
</ErrorBoundary>
} />
</Routes>Was Error Boundaries NICHT abfangen
Boundaries fangen NICHT ab: Fehler in Event-Handlern, in asynchronem Code (setTimeout, promises), Fehler, die während SSR ausgelöst werden, sowie Fehler innerhalb der Boundary selbst. Verwenden Sie an diesen Stellen try/catch.
Fehler in Event-Handlern
Umschließen Sie Event-Handler mit try/catch und rufen Sie eine manuelle reportError-Funktion auf.
function Button() {
function onClick() {
try {
riskyOperation();
} catch (err) {
reportError(err);
toast.error('Something went wrong');
}
}
return <button onClick={onClick}>Click</button>;
}react-error-boundary-Bibliothek
Das Community-Paket react-error-boundary stellt eine API bereit, die für Funktionskomponenten geeignet ist und das Zurücksetzen unterstützt.
import { ErrorBoundary } from 'react-error-boundary';
<ErrorBoundary
fallbackRender={({ error, resetErrorBoundary }) => (
<div>
<p>Error: {error.message}</p>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
)}
onReset={() => refetch()}
>
<DataView />
</ErrorBoundary>Beim Wiederherstellen zurücksetzen
Bieten Sie eine Möglichkeit zur Wiederherstellung an, etwa eine Schaltfläche zum erneuten Versuch oder einen Routenwechsel. Die Boundary sollte ihren Zustand zurücksetzen, damit sie nicht mehr den Fallback anzeigt.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
reset = () => this.setState({ hasError: false });
render() {
if (this.state.hasError) {
return <button onClick={this.reset}>Retry</button>;
}
return this.props.children;
}
}Entwicklung und Produktion
In der Entwicklung rendert React auch mit einer Boundary weiterhin das rote Fehler-Overlay – das ist beabsichtigt. In der Produktion wird nur der Fallback der Boundary angezeigt.
Bewährte Vorgehensweisen
1) Globale Boundary am App-Root. 2) Boundaries pro Route. 3) Granulare Boundaries um unabhängige Widgets. 4) Immer an einen Tracking-Dienst protokollieren. 5) Aktionen zur Wiederherstellung anzeigen (erneut versuchen, zur Startseite). 6) Fehler niemals stillschweigend verschlucken.
Kurze Überprüfung
Welche Arten von Fehlern fangen React Error Boundaries NICHT ab?
Zusammenfassung: Error Boundaries
Klassenkomponente mit static getDerivedStateFromError und componentDidCatch. Umschließt einen Teilbaum, um Fehler während des Renderns abzufangen. Fängt keine Fehler in Event-Handlern, asynchronem Code oder SSR ab. Platzieren Sie eine globale Boundary am App-Root sowie Boundaries pro Route und pro Widget. Protokollieren Sie Fehler in Sentry. Bieten Sie eine Aktion zur Wiederherstellung an. Die react-error-boundary-Bibliothek sorgt für eine übersichtlichere API.
Häufig gestellte Fragen
Ist die Lektion „Error Boundaries“ kostenlos?
Ja — der vollständige Text von „Error Boundaries“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Error Boundaries“?
Implementieren Sie klassenbasierte Error Boundaries mit componentDidCatch und getDerivedStateFromError, damit nicht abgefangene Renderfehler nicht die gesamte App zum Absturz bringen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Error Boundaries“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Zusammengesetzte Komponenten mit Context
- Render Props und HOC-Muster
- Portals für Modals und Tooltips
- Error Boundaries