تعرض لوحة التحكم بطاقة تقارير ومحرر ملاحظات. إذا تعطلت البطاقة أثناء العرض، هل ينبغي أن تختفي مساحة العمل كلها ويضيع النص الذي يكتبه الموظف؟ يساعد Error Boundary في تحديد نطاق واجهة بديلة، لكن جودة التجربة تعتمد على مكانه وما يحدث بعد ظهور الرسالة.
حدد ما يغطيه الحد فعلًا
توضح وثائق React أن Error Boundary يعرض واجهة بديلة بدل الجزء المتعطل أثناء العرض. ولا يلتقط أخطاء معالجات الأحداث أو العرض من جهة الخادم أو الخطأ داخل الحد نفسه. والأخطاء غير المتزامنة المعتادة خارج نطاقه، مع الاستثناء الموضح لأخطاء دالة transition المرتبطة بـuseTransition.
لذلك لا تجعل وجود الحد إجابة عامة عن كل فشل شبكة أو ضغط زر. وثق أين تُعالج كل فئة وكيف تظهر للمستخدم، وراجع سلوك إصدار React المستخدم في المشروع. هذه المقالة اختبار قبول، وليست وصفة لتغيير بنية تطبيق قائم دون مراجعة.
اختر نطاقًا يحفظ سياق العمل
في مثال افتراضي، توضع بطاقة التقرير داخل نطاق مستقل، بينما يبقى محرر الملاحظات خارج إعادة تركيب البطاقة. اختبر خطأ عرض متعمدًا في بيئة تطوير ببيانات مصطنعة. يجب أن يظهر بديل مفهوم وألا يوحي بأن البيانات حُفظت أو حُذفت إذا لم يحدث ذلك.
| العطل التجريبي | ما توثقه |
|---|---|
| خطأ عرض داخل البطاقة | ظهور البديل في النطاق المتوقع |
| فشل طلب بيانات | المعالج المسؤول ورسالة الحالة |
| خطأ داخل إجراء النقر | معالجة مستقلة دون افتراض التقاطه |
| إعادة المحاولة | بقاء النص غير المحفوظ في الجزء السليم |
اجعل الاستعادة إجراءً يمكن فهمه
زر «حاول مجددًا» يحتاج معنى محددًا: هل يعيد جلب البيانات أم يعيد تركيب جزء من الواجهة؟ إذا كانت البيانات نفسها تسبب الخطأ، قد تتكرر الحلقة. قدم مسارًا بديلًا مناسبًا، واختبر التركيز بعد تغير الواجهة لكي لا يصبح المستخدم داخل عنصر اختفى.
اجمع دليلًا بلا تفاصيل حساسة
سجل معرفًا تشخيصيًا غير سري وسياقًا محدودًا في نظام محمي، ولا تعرض تفاصيل التشغيل للمستخدم. ضمن تطوير الويب وفحص تجربة المستخدم اعتمد نتيجة تثبت أن العطل محصور والاستعادة واضحة والعمل السليم لا يضيع، مع معالجة منفصلة لكل ما لا يغطيه الحد.
