حدود الأخطاء

في الماضي كانت أخطاء JavaScript بداخل المكوّنات تؤدّي إلى تخريب حالة React الداخلية وإظهار أخطاء في التصييرات التالية. كانت هذه الأخطاء مُسبَّبة دومًا بخطأ باكر في شيفرة التطبيق، ولكن لم تكن تعطينا React طريقة للتعامل معها في المكوّنات، ولم يكن بإمكانها استعادتها أيضًا.

مقدمة إلى حدود الأخطاء

لا يجب أن يؤدّي خطأ JavaScript الحاصل في جزء من واجهة المستخدم إلى تعطيل كامل التطبيق. ولحل هذه المشكلة لمستخدمي React، قدّمت React في الإصدار 16 مفهومًا جديدًا وهو حد الخطأ (error boundary).

حدود الأخطاء هي مكوّنات في React والتي تلتقط أخطاء JavaScript في أي مكان من شجرة المكوّنات الأبناء لها، وتُسجِّل هذه الأخطاء، وتعرض واجهة مستخدم بديلة وذلك بدلًا من عرض شجرة المكوّنات التي انهارت. تلتقط حدود الأخطاء هذه الأخطاء خلال التصيير، وفي توابع دورة حياة المكوّن، وفي الدوال البانية لكامل الشجرة الموجودة تحتها.

ملاحظة: لا تلتقط حدود الأخطاء أخطاءً من أجل:

• معالجات الأحداث (تعلّم المزيد).
• الشيفرة غير المتزامنة (مثل ردود نداء setTimeout أو requestAnimationFrame).
• التصيير من جانب الخادم.
• الأخطاء المرميّة من قبل حد الخطأ نفسه (بدلًا من أخطاء المكوّنات الأبناء له).

تُصبِح مكوّنات الأصناف حدودًا للأخطاء إن عرّفت تابعًا جديدًا لدورة الحياة يُدعى componentDidCatch(error, info)‎:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
	// عرض واجهة مستخدم بديلة
	
    this.setState({ hasError: true });
	// تستطيع تسجيل الخطأ إلى خدمة تبليغ عن الأخطاء
	
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
	  // تستطيع تصيير أي واجهة مستخدم بديلة مخصصة
      return <h1>حدث خطأ ما</h1>;
    }
    return this.props.children;
  }
}

بعدها تستطيع استخدامها كمكوّنات اعتياديّة:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

يعمل التابع componentDidCatch()‎ مثل الكتلة catch {}‎ في JavaScript، ولكن لأجل المكوّنات. تستطيع فقط مكوّنات الأصناف أن تُصبِح حدودًا للأخطاء. في الممارسة العمليّة سترغب في أغلب الأوقات في التصريح عن مكوّن لحدود الأخطاء مرّة واحدة ومن ثم استخدامه خلال تطبيقك.

لاحظ أنّ حدود الأخطاء تلتقط فقط الأخطاء في المكوّنات التي تقع تحتها في شجرة المكوّنات، فلا يستطيع التقاط خطأ موجود ضمنه. إن فشل حد الأخطاء في محاولة تصيير رسالة الخطأ فستنتشر رسالة الخطأ إلى أقرب حد خطأ موجود في المستويات الأعلى منه. وهذا يُشبِه كيفيّة عمل الكتلة catch {}‎ في JavaScript.

معاملات componentDidCatch

error وهو الخطأ المرمي.

info وهو كائن مع المفتاح componentStack. تمتلك هذه الخاصيّة معلومات حول مَكْدَس المكوّن خلال الخطأ المرمي: