Mik az error boundaries és mit fognak el?

Question

Accepted Answer

Az **error boundary** egy olyan component, amely JavaScript hibákat fog el a **renderelés során** annak child tree-jében, fallback UI-t mutat az egész alkalmazás összeomlása helyett, és képes naplózni a hibát. ```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: ``` ## Mit fog el — és mit nem ✅ Elfogas: hibákat a **render** során, az **lifecycle methods** során, és az alatta lévő komponensek konstruktoraiban. ❌ **Nem** fog el: - Hibákat az **event handlers** során (használjon normális `try/catch`-et ott). - **Async** kódot (promises, `setTimeout`) — ezek kívül vannak a render folyamaton. - Hibákat a határban magában, vagy az **SSR** során. ## Gyakorlati megjegyzések - Az error boundaries jelenleg **class components** -nek kell lenniük (vagy használja a `react-error-boundary` könyvtárat egy hook-barátságos API-ért). - Helyezzen több határt az független szakaszok körül (widgets, útvonalak), hogy egy hibás widget ne döntsön le mindent — egy egyetlen top-level határt bármilyen hibát teljesen üres oldalra fordít.