التعامل مع الأخطاء

عمليات التحميل قد تفشل. قاعدة البيانات معطلة، السجل مفقود، أو حدث خطأ ما. بدون خطة مناسبة، تعبير await واحد سيئ قد يتسبب في تعطيل الشاشة بأكملها.

تُعتبر error.jsx الصورة المنعكسة لـ loading.jsx: الفكرة نفسها، ولكن بنتيجة معاكسة. ضعه بجانب صفحة وسيلتقط أي شيء تطرحه تلك الصفحة أثناء العرض:

app/
    menu/
        page.jsx
        loading.jsx    while it works
        error.jsx      when it doesn't

على عكس loading.jsx، فإنه يمتلك متطلبًا إجباريًا واحدًا:

'use client';

export default function Error({ error, reset }) {
    return (
        <div>
            <h2>Couldn't load the menu</h2>
            <button onClick={reset}>Try again</button>
        </div>
    );
}

يجب أن يكون error.jsx مكون عميل (client component). السبب موجود بوضوح في JSX: onClick. زر إعادة المحاولة (retry) هو تفاعلية، والتفاعلية تتطلب مكونًا يُرسل إلى المتصفح. إذا أذلت 'use client' فستحصل على خطأ معالج الأحداث (event-handler error) المذكور في الفصل السابق، وفي الصفحة التي كانت مهمتها بالذات هي معالجة الأخطاء.

يتلقى اثنين من الخصائص (props):

• error: الـ Error الذي تم طرحه، حتى تتمكن من تسجيله
• reset: دالة تقوم بإعادة تقديم (re-render) الجزء الذي فشل. قم باستدعائها وسيحاول الـ page مرة أخرى (again)

إنّ reset هو ما يجعل هذه الشاشة أكثر من مجرد شاشة توقف مفاجئ أفضل. فالخلل المؤقت الذي فشل مرة واحدة غالبًا ما يعمل في المرة الثانية، دون أن يضطر المستخدم لإعادة تحميل أي شيء.

مثل الملفات الخاصة الأخرى، يُغطي error.jsx المجلد الخاص به وكل ما هو متداخل تحته، لذا فإن ملفًا واحدًا بالقرب من الجذر يُعد شبكة أمان لقطاع كامل من الموقع.