Was sind Error Boundaries und was fangen sie ab?

Question

Accepted Answer

Eine **Error Boundary** ist eine Komponente, die JavaScript-Fehler abfängt, die **während des Renderns** in ihrem Unterbaum geworfen werden, eine Fallback-UI anstelle eines App-Absturzes anzeigt und den Fehler protokollieren kann. ```jsx class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; // render the fallback on next render } componentDidCatch(error, info) { logToService(error, info); // side effect: report it } render() { return this.state.hasError ? : this.props.children; } } // wrap an independent section so its failure doesn't blank the page: ``` ## Was sie abfängt — und was nicht ✅ Fängt ab: Fehler in **render**, in **lifecycle methods** und in Konstruktoren der Komponenten darunter. ❌ Fängt nicht ab: - Fehler in **Event-Handlern** (verwenden Sie dort ein normales `try/catch`). - **Asynchroner** Code (Promises, `setTimeout`) — sie befinden sich außerhalb des Rendering-Flows. - Fehler in der Boundary selbst oder während **SSR**. ## Warum es wichtig ist - Error Boundaries müssen derzeit **Klassenkomponenten** sein (oder verwenden Sie die Bibliothek `react-error-boundary` für eine Hook-freundliche API). - Platzieren Sie mehrere Boundaries um unabhängige Abschnitte (Widgets, Routes), damit ein fehlendes Widget nicht alles zum Absturz bringt — eine einzelne Top-Level-Boundary verwandelt jeden Fehler in eine vollständig leere Seite.