Error boundaries ni nini na kile gani kinachokamata?

Question

Accepted Answer

**Error boundary** ni sehemu inayokamata makosa ya JavaScript yanayotupwa **wakati wa kuboresha** katika kile kinachotoka chini yake, kuonyesha UI ya mbadala badala ya kukamatia programu nzima, na inaweza kurekodi hiyo kosa. ```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: ``` ## Kile kinachokamata — na kile hakikishocho ✅ Kinakamata: makosa katika **render**, katika **lifecycle methods**, na katika wajenzi wa sehemu zilizo chini yake. ❌ **Hakikamata**: - Makosa katika **event handlers** (tumia `try/catch` ya kawaida hapo). - Kod ya **Async** (promises, `setTimeout`) — ziko nje ya mtiririko wa render. - Makosa katika boundary yenyewe, au wakati wa **SSR**. ## Maelezo ya vitendo - Error boundaries lazima sasa ni **class components** (au tumia `react-error-boundary` library kwa API inayofaa hooks). - Weka mipaka kadhaa kuzunguka sehemu huru (widgets, routes) ili kina kidogo kinachoshindwa hakuangusha kila kitu — mipaka moja ya juu inabadilisha kosa lolote kuwa ukurasa tupu kabisa.