ما هي حدود الأخطاء (Error Boundaries) وماذا تمسك؟

Question

Accepted Answer

**حد الخطأ** هو مكون يمسك أخطاء JavaScript التي يتم رفعها **أثناء العرض** في شجرة العناصر التابعة له، ويعرض واجهة احتياطية بدلاً من توقف التطبيق بالكامل، ويمكنه تسجيل الخطأ. ```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: ``` ## ما الذي يمسكه - وما لا يمسكه ✅ يمسك: الأخطاء في **render**، في **lifecycle methods**، وفي constructors للمكونات تحته. ❌ لا يمسك: - الأخطاء في **event handlers** (استخدم `try/catch` عادي هناك). - الكود **Async** (promises, `setTimeout`) - إنها خارج تدفق العرض. - الأخطاء في حد الخطأ نفسه، أو أثناء **SSR**. ## ملاحظات عملية - يجب أن تكون حدود الأخطاء حالياً **مكونات class** (أو استخدم مكتبة `react-error-boundary` للحصول على API صديقة للـ hooks). - ضع عدة حدود حول أقسام مستقلة (widgets، routes) بحيث لا يؤدي فشل widget واحد إلى إسقاط كل شيء - حد واحد على المستوى الأعلى يحول أي خطأ إلى صفحة فارغة تماماً.