Što su error boundaries i što oni hvataju?

Question

Accepted Answer

**Error boundary** je component koji hvata JavaScript greške izbačene **tijekom renderiranja** u njegovom child tree-u, pokazuje fallback UI umjesto da rušio cijelu aplikaciju, i može zabilježiti grešku. ```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: ``` ## Što hvata — i što ne hvata ✅ Hvata: greške u **render**, u **lifecycle methods**, i u konstruktorima komponenti ispod njega. ❌ **Ne** hvata: - Greške u **event handlers** (koristite obični `try/catch` tamo). - **Async** kod (promises, `setTimeout`) — oni su izvan render toka. - Greške u samoj granici, ili tijekom **SSR**. ## Praktične napomene - Error boundaries trebaju trenutno biti **class components** (ili koristite `react-error-boundary` biblioteku za hook-friendly API). - Postavite nekoliko granica oko nezavisnih dijelova (widgets, rute) kako jedan neispravan widget ne bi srušio sve — jedna granica na vrhu pretvor svaku grešku u potpuno praznu stranicu.