لماذا يهم هذا الدرس؟
فهم Error Boundaries واستخدامه بصورة صحيحة داخل مشروع App Router. ملفات Loading وError وNot-found عقود UX على مستوى Route؛ تشرح التأخير وتسمح بالتعافي من Render Failures وتفرق المورد المفقود عن Internal Error.
كيف تفكر فيه؟
- في درس Error Boundaries، النتيجة التي يجب أن تتحقق: اعرض مسار تعافٍ مفهومًا بدل إظهار تفاصيل الخطأ الداخلية.
- في سياق Error Boundaries، الخطر الذي يجب أن يبقى تحت السيطرة: Spinner عام أوStack Trace مكشوف لا يقدم Recovery Path مفيدًا وقد يكشف تفاصيل التنفيذ.
- تطبيق Error Boundaries: أضف Loading وRecoverable Error وNot-found إلى Dynamic Route واحدة ثم فعّل كل حالة عمدًا.
تطبيق عملي
في التطبيق الخاص بدرس Error Boundaries: اعرض مسار تعافٍ مفهومًا بدل إظهار تفاصيل الخطأ الداخلية.
app/dashboard/error.tsxtsx
'use client';
export default function ErrorView({ reset }: { reset: () => void }) {
return <button onClick={reset}>Try again</button>;
}جرّب بنفسك
تمرين Error Boundaries
أضف Loading وRecoverable Error وNot-found إلى Dynamic Route واحدة ثم فعّل كل حالة عمدًا.
- سجل النتيجة المتوقعة قبل التنفيذ
- اختبر حالة صحيحة وحالة فشل مرتبطة بالدرس
- اشرح في سطرين أين يوجد الحد المسؤول عن القرار