مكوّنات Error Boundary (غلاف قائم على الأصناف)
ابنِ ErrorBoundary قائمًا على صنف يلتقط أخطاء التصيير ودورة الحياة في المكوّنات التابعة، ويعرض واجهة بديلة ودودة.
مكوّنات Error Boundary (غلاف قائم على الأصناف) درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا نستخدم حدود الأخطاء
الهدف: منع أداة واحدة متعطّلة من تعطيل التطبيق بأكمله.
- غلّف المناطق المعرّضة للأخطاء باستخدام ErrorBoundary
- اعرض واجهة بديلة ودّية
- سجّل التفاصيل للمطوّرين
ما الذي تلتقطه وما لا تلتقطه
- تلتقط: أخطاء التصيير ودورة الحياة والمنشئ في العناصر الأبناء
- لا تلتقط: أخطاء معالجات الأحداث، والأخطاء غير المتزامنة (setTimeout)، وأخطاء الخادم افتراضيًا
- استخدم try/catch للأحداث، وتعامل مع العمليات غير المتزامنة في الوعود
حد أدنى من Boundary وعرض تعطل توضيحي
أنشئ Boundary قائمًا على class يعرض واجهة بديلة صغيرة عند طرح أحد العناصر الأبناء خطأً.
<div id="root"></div>إعادة الضبط عبر تغيير key
طريقة أخرى للتعافي: غيّر key كي يعيد React تركيب الشجرة الفرعية.
<div id="root"></div>ضع Boundaries على نطاق ضيق
غلّف الجزء المعرّض للأخطاء فقط كي تظل بقية الشاشة تفاعلية.
<div id="root"></div>نصائح ومطبات شائعة
- وفّر واجهة بديلة واضحة وطريقة لإعادة المحاولة
- سجّل الأخطاء (componentDidCatch)
- استخدم Boundaries حول المناطق المعرّضة للأخطاء، لا حول التطبيق بأكمله
اختبار نطاق Error Boundary
مراجعة سريعة
مراجعة سريعة: استخدم ErrorBoundary قائمًا على class لالتقاط أعطال التصيير ودورة الحياة في العناصر الواقعة تحته، واعرض واجهة بديلة ودّية، وسجّل التفاصيل، وأتح للمستخدمين إعادة المحاولة أو إعادة التركيب.
الأسئلة الشائعة
هل درس «مكوّنات Error Boundary (غلاف قائم على الأصناف)» مجاني؟
نعم — نص درس «مكوّنات Error Boundary (غلاف قائم على الأصناف)» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «مكوّنات Error Boundary (غلاف قائم على الأصناف)»؟
ابنِ ErrorBoundary قائمًا على صنف يلتقط أخطاء التصيير ودورة الحياة في المكوّنات التابعة، ويعرض واجهة بديلة ودودة. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.
كم من الوقت يستغرق درس «مكوّنات Error Boundary (غلاف قائم على الأصناف)»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مكوّنات Error Boundary (غلاف قائم على الأصناف)
- استراتيجيات استعادة الواجهة والإبلاغ
- حماية التأثيرات والتنظيف