Co jsou hranice chyb (error boundaries) a co zachycují?

Question

Accepted Answer

**Error boundary** je komponenta, která zachycuje chyby JavaScriptu vyvolané **během renderování** ve své podstromě, zobrazí záložní UI místo selhání celé aplikace a může zaznamenat chybu. ```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: ``` ## Co zachycuje — a co ne ✅ Zachycuje: chyby v **render**, v **lifecycle methods** a v konstruktorech komponent pod ním. ❌ Nezachycuje: - Chyby v **event handlers** (použijte tam normální `try/catch`). - **Async** kód (promises, `setTimeout`) — jsou mimo tok renderování. - Chyby v samotné hranici nebo během **SSR**. ## Praktické poznámky - Error boundaries musí být v současnosti **třídní komponenty** (nebo použijte knihovnu `react-error-boundary` pro API vhodné pro hooks). - Umístěte více hranic kolem nezávislých sekcí (widgety, trasy), aby selhání jednoho widgetu nezničilo vše — jediná hranice na nejvyšší úrovni změní jakoukoli chybu na zcela prázdnou stránku.