Next.js / المتوسط: السلطة والحداثة وتجربة المسار / الدرس 11
حدود الانتظار وSuspense والخطأ وعدم الوجود
ضع واجهة الانتظار والفشل حول اعتمادات البيانات الفعلية دون إخفاء التفويض أو عدم يقين المصدر.
في هذه الصفحة
أهداف الدرس
- ميز بديل الانتظار ونتيجة المجال المتوقعة وخطأ التصيير غير الملتقط.
- اشرح نطاق حد المقطع وقيود الفشل بعد بدء التدفق.
يصف البديل الانتظار لا اكتمال الصحة
تتيح Suspense بديلاً لعمل متداخل معلق وتقدم loading.tsx انتظار المقطع. ضع الحد حول مناطق مستقلة ذات معنى حتى لا تحجب توصية بطيئة عنواناً مفوضاً. يحسن التدفق الوصول لواجهة نافعة ولا يقيد تفرع المصدر أو يبيح تجاهل صلاحية مفقودة. لا يكشف البديل بنية خاصة قبل الأهلية. افحص السلطة وصحة المصدر أولاً ثم اختر الأجزاء الوصفية المستقلة. يجب أن يعكس الهيكل المعروض ما يسمح للمستخدم بمعرفته، لا أن يكون نسخة عامة من صفحة خاصة تظهر للحظات قبل رفض البيانات.
قدم إعادة محدودة لحد خطأ فعلي
يمثل الجزء error.tsx عميلاً بreset ولا يطبع الخطأ الخام أو digest للعامة. يفترض الموضع والمشغل. تحاول reset التعافي ولا تضمن عودة المصدر أو جواز إعادة كتابة فاشلة. لا يلتقط حد المقطع كل التطبيق، بما فيه نطاق تخطيطه أو عمل الحدث بالطريقة نفسها؛ اختر الأب أو العام أو معالجة الحدث حسب التوثيق. لم يعرض المثال أو يفشل مكون فعلي. ينبغي أن تمنح الواجهة المستخدم وصفاً آمناً وخطوة مفهومة، لا تفاصيل داخلية قد تكشف أسماء مصادر أو قيماً خاصة.
"use client";
export default function ErrorView({reset}:{error:Error & {digest?:string};reset:()=>void}) {
return <section><h2>Course unavailable</h2><button onClick={() => reset()}>Try again</button></section>;
}يعرض نصاً آمناً وإعادة للحد، ولم يصير أو يثبت التقاط الخطأ أو التعافي.
مثل الغياب والتحقق المتوقعين منفصلين
قد تعاد مشكلة حقل أو تعارض متوقع كحالة تطبيق بدل فشل تصيير غير متوقع. تستعمل notFound وredirect تحكماً خاصاً فلا تبتلعهما catch. اتبع إفصاح الغائب والممنوع. بعد الالتزام بالتدفق لا يعاد تشكيل الحالة والترويسات بحرية؛ راجع HTTP والبيانات الوصفية بجانب الواجهة خصوصاً للزاحف أو API. لا يعني ظهور نص «غير موجود» أن الرد كان 404 بالضرورة إذا كانت البايتات بدأت، ولذلك يحتاج ادعاء النتيجة اختبار النقل الفعلي لا لقطة الشاشة وحدها.
افصل حالات العرض في المنطق المحلي
يميز المصنف الانتظار وتعذر المصدر والبطاقة الجاهزة ولا يجعل تعذر المصدر بطاقة فارغة ناجحة. أولوية الخطأ على سجل محفوظ سياسة عينة صريحة. قد تسمح شاشة أخرى بوصف قديم مع تحذير موثق. ليس النموذج Suspense ولا يرمي وعوداً أو يختبر حدوداً؛ يفحص قرار عرض قبل دمج الدورة والإتاحة. ينبغي أن يستقبل هذا القرار حالة مصدر مصنفة بدقة، فلا يستطيع مصنف صحيح إصلاح خدمة حولت كل استثناء إلى null وأضاعت الفرق قبل أن يصل إليه.
function viewState({pending,error,card}) {
if (error) return "unavailable";
if (pending) return "loading";
return card ? "ready" : "not-found";
}
console.assert(viewState({pending:true,error:null,card:null}) === "loading");
console.assert(viewState({pending:false,error:"source",card:{id:"c1"}}) === "unavailable");
console.assert(viewState({pending:false,error:null,card:{id:"c1"}}) === "ready");تتبع العينات الثلاث الأولوية المعلنة دون تدفق أو Suspense أو توزيع خطأ React.
اختبر الحد الذي يقع فيه الفشل فعلياً
اختبر الانتظار والغياب والمنع وفشل الخادم والحدث وقطع التدفق مستقلة. أكد إخراجاً آمناً وحفظ المفيد وعدم أثر غير مفوض. لا تمسح الإعادة مدخلاً غير متعلق أو تكرر كتابة محفوظة بصمت. اربط السجل دون رسالة المصدر في HTML. ينفذ المقرر المصنف فقط لا اتفاق loading أو التداخل أو البؤرة أو الحالة المتدفقة أو التعافي. يحتاج الباقي بناء ومتصفحاً ونقلاً معزولين بإصدارات مختارة. يوضح ذلك لماذا لا يعد نجاح فرع «unavailable» دليلاً أن error.tsx يقع فعلاً فوق المكون الذي قد يرمي الخطأ.
الأخطاء الشائعة وإصلاحها
يكشف هيكل انتظار بنية خاصة
- لماذا يحدث؟
- سبق عرض البديل قرار الوصول المطلوب.
- كيف تصلحه؟
- أثبت الأهلية قبل عرض بنية واجهة محمية.
- كيف تتجنب تكراره؟
- اختبر البديل بهويات ممنوعة.
يفوت حد المقطع خطأ تخطيطه
- لماذا يحدث؟
- افترض نطاق أوسع من موضع الحد الموثق.
- كيف تصلحه؟
- استخدم حد الأب أو العام المناسب وعينات محفوظة.
- كيف تتجنب تكراره؟
- اختبر الخطأ في كل مستوى تداخل معني.
تكرر إعادة المحاولة فعلاً محفوظاً
- لماذا يحدث؟
- اختلط تعافي التصيير بأمان إعادة عملية العمل.
- كيف تصلحه؟
- سو العملية قبل إعادة أي كتابة.
- كيف تتجنب تكراره؟
- افصل عينات فشل التصيير والكتابة غير المؤكدة.
اختبر فهمك
1. هل تثبت reset أن المصدر الفاشل أصبح سليماً؟
اعرض الحل المشروح
لا. تطلب إعادة محاولة التصيير وقد يفشل المصدر مجدداً، وقد يكون أثر كتابة سابق موجوداً. اختبر التعافي مستقلاً واحفظ هوية الكتابة. اجعل الواجهة آمنة دون ادعاء نجاح شبكة أو معاملة.
2. لماذا قد تختلف صفحة not-found الظاهرة عن رد 404 قبل الإرسال؟
اعرض الحل المشروح
قد يلتزم التدفق بالترويسات قبل اكتشاف الغياب ولا يعيد البايتات المرسلة كأن الرد لم يبدأ. تحقق من الحالة والبيانات الوصفية بعينة نقل فعلية، ولا تستنتجهما من النص المعروض وحده.
أهم ما تعلمته
- تتبع حدود الانتظار والخطأ اعتمادات البيانات والتداخل الفعلية.
- لا تثبت واجهة التعافي تعافي المصدر أو الكتابة.