Hva er feilgrenser (error boundaries) og hva fanger de?

Question

Accepted Answer

En **feilgrense** (error boundary) er en komponent som fanger JavaScript-feil som kastes **under rendering** i sitt underordnede tre, viser et fallback-UI i stedet for å krasje hele appen, og kan logge feilen. ```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: ``` ## Hva den fanger — og hva den ikke gjør ✅ Fanger: feil i **render**, i **livssyklusmetoder**, og i konstruktører av komponentene under den. ❌ Fanger **ikke**: - Feil i **event handlers** (bruk vanlig `try/catch` der). - **Asynk** kode (promises, `setTimeout`) — de er utenfor render-flyten. - Feil i selve grensen, eller under **SSR**. ## Praktiske merknader - Feilgrenser må for øyeblikket være **klassekomponenter** (eller bruk `react-error-boundary`-biblioteket for et hook-vennlig API). - Plasser flere grenser rundt uavhengige seksjoner (widgets, ruter) slik at en mislykket widget ikke tar ned alt — en enkelt top-level-grense gjør enhver feil til en helt blank side.