حدود الأخطاء (Error Boundaries) في Next.js App Router

تعمل معظم تطبيقات Next.js بشكل جيد عندما تسير الأمور على ما يرام، لكنها تفشل عندما تسوء الأمور. تستخدم التطبيقات عالية الجودة حدود الأخطاء (error boundaries) للتعامل مع هذه الإخفاقات بسلاسة.

يستخدم App Router نموذجاً مختلفاً عن Pages Router، حيث يعتمد على React Error Boundaries. يمكنك استخدام ملفات error.js لالتقاط المشكلات في أي مستوى من مستويات المسار (route) الخاص بك.

كيف يعمل الأمر:

• تبقى الأخطاء ضمن أقرب حدود error.js. • لا تنتقل الأخطاء إلى معالج عام (global handler) إلا إذا أردت ذلك. • يمكنك عرض شاشات خطأ مختلفة لأجزاء مختلفة من تطبيقك.

قواعد ملف error.js:

  • يجب أن يكون Client Component. استخدم 'use client' في الأعلى.
  • يقوم بالتقاط الأخطاء في ذلك الجزء (segment) وجميع الأجزاء التابعة له (children).
  • ستحصل على وظيفة إعادة ضبط (reset function) لإعادة محاولة عملية العرض (render) الفاشلة.

استخدم وظيفة reset للمشكلات المؤقتة مثل انقطاع الشبكة، ولا تستخدمها للأخطاء الدائمة.

استخدم global-error.js للتخطيط الجذري (root layout). ملف error.js القياسي لا يلتقط الأخطاء في layout.js الجذري. يُعد global-error.js ملاذك الأخير؛ فهو يستبدل التخطيط الجذري، لذا يحتاج إلى وسوم <html> و <body> الخاصة به.

إدارة أنواع الأخطاء المختلفة:

  • استخدم notFound() للبيانات المفقودة، وهذا سيؤدي إلى تشغيل not-found.js.
  • استخدم throw Error() للإخفاقات غير المتوقعة، وهذا سيؤدي إلى تشغيل error.js.

يحافظ هذا الفصل على نظافة تطبيقك؛ فالمستخدم الذي يبحث عن تدوينة مفقودة سيرى صفحة 404، بينما سيرى المستخدم الذي يواجه عطلاً في قاعدة البيانات رسالة خطأ.

أستخدم هذا النمط في مولد صور يعمل بالذكاء الاصطناعي. تتضمن العملية خطوات عديدة مثل استدعاءات API ورفع الملفات. إذا فشلت خطوة واحدة، تظهر حدود الأخطاء رسالة محددة. ويتيح زر إعادة الضبط (reset) للمستخدم المحاولة مرة أخرى دون فقدان الـ prompt الخاص به.

الهيكل الجيد يبدو كالتالي:

• global-error.js: شبكة الأمان النهائية. • error.js: يعالج الأخطاء على مستوى الجذر. • dashboard/error.js: يعالج الأخطاء داخل لوحة التحكم (dashboard). • auth/error.js: يعالج أخطاء تسجيل الدخول أو الجلسة (session).

يمنع هذا النهج خطأً صغيراً واحداً من تعطيل موقعك الإلكتروني بالكامل.

المصدر: https://dev.to/aon_infotech_3a1b6ff525fc/error-boundaries-in-nextjs-app-router-handling-failures-gracefully-3mif