Wat zijn error boundaries en wat vangen ze?

Question

Accepted Answer

Een **error boundary** is een component die JavaScript-fouten opvangt die **tijdens het renderen** in zijn onderliggende boomstructuur worden geworpen, een fallback UI toont in plaats van de hele app tot stilstand te brengen, en de fout kan vastleggen. ```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: ``` ## Wat het opvangt — en wat niet ✅ Vangt op: fouten in **render**, in **lifecycle methods**, en in constructors van onderliggende componenten. ❌ Vangt niet op: - Fouten in **event handlers** (gebruik daar een normale `try/catch`). - **Async** code (promises, `setTimeout`) — deze bevinden zich buiten de renderflow. - Fouten in de boundary zelf, of tijdens **SSR**. ## Praktische opmerkingen - Error boundaries moeten momenteel **class components** zijn (of gebruik de `react-error-boundary` library voor een hook-vriendelijke API). - Plaats meerdere boundaries rond onafhankelijke secties (widgets, routes) zodat één defecte widget niet alles meeneemt — een enkele top-level boundary verandert elke fout in een volledig lege pagina.