شرح صفوف ومحتوى الفقرة
من الضروري التمييز بدقة بين ما تصطاده حدود الأخطاء وما لا يدخل في نطاقها: تلتقط ErrorBoundary الأخطاء المرمية أثناء طور التصيير وبما يشمل فشل تحميل حزم React.lazy، لكنها لا تلتقط أخطاء دوال الأحداث مثل onClick ولا أخطاء fetch غير المتزامنة؛ فتلك تُعالج ببنية try / catch وحالة الخطأ الاعتيادية كما تعلمت في الوحدة الثامنة. يوضح الجدول التالي آلية التعامل مع كل نوع:
| مصدر الخطأ البرمجي | هل تلتقطه ErrorBoundary؟ | الأسلوب الهندسي الصحيح للمعالجة |
|---|---|---|
| قراءة خاصية فارغة أثناء تصيير JSX | نعم — تلتقطه وتعزله فوراً | تغليف الأقسام المستقلة بحد ErrorBoundary |
| فشل تحميل حزمة React.lazy الشبكية | نعم — يلتقطه الحد المحيط بـ Suspense | عرض بطاقة إعادة المحاولة داخل واجهة البديل |
| خطأ داخل معالج حدث مثل onClick | لا — يقع خارج طور التصيير | استخدام try/catch وتحديث حالة الخطأ في المكون |
| رفض طلب fetch أو مؤقت غير متزامن | لا — يعمل في نطاق غير متزامن | معالجة رفض الوعد وتخزين رسالة الخطأ بالحالة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس إخراج النوافذ الحوارية السليمة عبر createPortal لتجاوز قيود القص مع فهم صعود الأحداث في شجرة React، وعزل أعطال التصيير بحدود Error Boundaries لحماية استقرار التطبيق. الخطوة التالية: انتقل الآن إلى الدرس رقم 47 «مفهوم التوجيه في تطبيقات الصفحة الواحدة وإعداد React Router» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.