Vad är error boundaries och vad fångar de?

Question

Accepted Answer

En **error boundary** är en komponent som fångar JavaScript-fel som kastas **under rendering** i sitt underträd, visar ett fallback UI istället för att krascha hela appen, och kan logga felet. ```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: ``` ## Vad den fångar — och vad den inte gör ✅ Fångar: fel i **render**, i **lifecycle methods**, och i konstruktorer för komponenterna under den. ❌ Fångar **inte**: - Fel i **event handlers** (använd en vanlig `try/catch` där). - **Async** kod (promises, `setTimeout`) — de är utanför render-flödet. - Fel i själva boundary-komponenten, eller under **SSR**. ## Praktiska anmärkningar - Error boundaries måste för närvarande vara **klasskomponenter** (eller använd `react-error-boundary`-biblioteket för ett hook-vänligt API). - Placera flera boundaries runt oberoende sektioner (widgets, routes) så att en felande widget inte tar ned allt — en enda top-level boundary gör vilket fel som helst till en helt tom sida.