Ce sunt limitele de erori (error boundaries) și ce prind ele?

Question

Accepted Answer

O **limită de erori** (error boundary) este o componentă care prinde erori JavaScript aruncate **în timpul redării** în subarborele ei, arată o interfață de rezervă în loc să blocheze întreaga aplicație și poate înregistra eroarea. ```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: ``` ## De ce contează ✅ Prinde: erori în **render**, în **metodele de ciclu de viață** și în constructorii componentelor de mai jos. ❌ **Nu** prinde: - Erori în **manipulatorii de evenimente** (utilizează un `try/catch` normal acolo). - Cod **asincron** (promises, `setTimeout`) — se află în afara fluxului de redare. - Erori în limitele în sine sau în timpul **SSR**. ## Note practice - Limitele de erori trebuie să fie în prezent **componente de clasă** (sau utilizează biblioteca `react-error-boundary` pentru un API prietenos cu hook-uri). - Plasează mai multe limite în jurul secțiunilor independente (widgeturi, rute) pentru ca un widget defect să nu dărâme totul — o singură limită de nivel superior transformă orice eroare într-o pagină complet albă.