Hvad er fejlgrænser (error boundaries), og hvad fanger de?

Question

Accepted Answer

En **error boundary** er en komponent, der fanger JavaScript-fejl, der kastes **under rendering** i sit underordnede træ, viser en fallback-UI i stedet for at få hele appen til at gå ned, og kan logge fejlen. ```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: ``` ## Hvad den fanger — og hvad den ikke gør ✅ Fanger: fejl i **render**, i **lifecycle methods** og i konstruktører for komponenter under den. ❌ Fanger ikke: - Fejl i **event handlers** (brug normalt `try/catch` der). - **Async** kode (promises, `setTimeout`) — de er uden for renderingsflowet. - Fejl i selve grænsen eller under **SSR**. ## Praktiske noter - Fejlgrænser skal i øjeblikket være **klasskomponenter** (eller brug biblioteket `react-error-boundary` for et hook-venligt API). - Placer flere grænser omkring uafhængige sektioner (widgets, ruter), så en fejlslået widget ikke ødelægger alt — en enkelt grænse på øverste niveau gør enhver fejl til en fuldstændig tom side.