عرض مصدر React/error boundaries

<noinclude>{{DISPLAYTITLE:حدود الأخطاء في React}}</noinclude>
في الماضي كانت أخطاء JavaScript بداخل المكوّنات تؤدّي إلى تخريب حالة React الداخلية و[https://github.com/facebook/react/issues/4026 إصدار] [https://github.com/facebook/react/issues/8579 أخطاء] [https://github.com/facebook/react/issues/6895 مخفية] في التصييرات التالية. كانت هذه الأخطاء مُسبَّبة دومًا بخطأ باكر في شيفرة التطبيق، ولكن لم تكن تعطينا React طريقة للتعامل معها في المكوّنات، ولم يكن بإمكانها استعادتها أيضًا.

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

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

'''ملاحظة:''' لا تلتقط حدود الأخطاء أخطاءً من أجل:
* معالجات الأحداث ([https://reactjs.org/docs/error-boundaries.html#how-about-event-handlers تعلّم المزيد]).
* الشيفرة غير المتزامنة (مثل ردود نداء <code>setTimeout</code> أو <code>requestAnimationFrame</code>).
* التصيير من جانب الخادم.
* الأخطاء المرميّة من قبل حد الخطأ نفسه (بدلًا من أخطاء المكوّنات الأبناء له).
تُصبِح مكوّنات الأصناف حدودًا للأخطاء إن عرّفت أحد تابعي دورة الحياة التاليين (أو كليهما) <code>componentDidCatch()‎</code> أو <code> static getDerivedStateFromError()‎</code>. استخدم <code>getDerivedStateFromError()‎</code> لتصيير واجهة رسومية احتياطية في حال حدوث خطأ. واستخدم <code>componentDidCatch()‎</code> لتسجيل معلومات الخطأ.<syntaxhighlight lang="javascript">
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
	// عرض واجهة مستخدم بديلة
	
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
	// تستطيع تسجيل الخطأ إلى خدمة تبليغ عن الأخطاء
	
    logErrorToMyService(error, errorInfo);
  }

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

    return this.props.children; 
  }
}

</syntaxhighlight>بعدها تستطيع استخدامها كمكوّنات اعتياديّة:<syntaxhighlight lang="html">
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>
</syntaxhighlight>تعمل حدود الأخطاء مثل الكتلة <code>catch {}</code>‎ في JavaScript، ولكن لأجل المكوّنات. تستطيع فقط مكوّنات الأصناف أن تُصبِح حدودًا للأخطاء. في الممارسة العمليّة سترغب في أغلب الأوقات في التصريح عن مكوّن لحدود الأخطاء مرّة واحدة ومن ثم استخدامه خلال تطبيقك.

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

=== معاملات <code>componentDidCatch</code> ===
<code>error</code> وهو الخطأ المرمي.

<code>info</code> وهو كائن مع المفتاح <code>componentStack</code>. تمتلك هذه الخاصيّة معلومات حول مَكْدَس المكوّن خلال الخطأ المرمي:<syntaxhighlight lang="javascript">
//...
componentDidCatch(error, info) {

  /* مثال عن معلومات المكدس
     in ComponentThatThrows (created by App)
     in ErrorBoundary (created by App)
     in div (created by App)
     in App
  */
  logComponentStackToMyService(info.componentStack);
}

//...
</syntaxhighlight>

== تجربة حية ==
تحقق من [https://codepen.io/gaearon/pen/wqvxGa?editors=0010 هذا المثال عن تصريح واستخدام حدود الأخطاء] في [https://reactjs.org/blog/2017/09/26/react-v16.0.html React 16].

== أين نضع حدود الأخطاء ==
تستطيع وضع حدود الأخطاء أينما شئت. فقد تضعها في المكوّنات ذات المستوى الأعلى لعرض رسالة "حدث خطأ ما" للمستخدمين، مثلما تتعامل أُطُر عمل من طرف الخادم مع الانهيار. بإمكانك أيضًا تغليف الأدوات الذكية (widgets) ضمن حدود أخطاء لكي لا تؤدي لانهيار كامل التطبيق معها.

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

ترددنا في هذا القرار، ولكن من خلال تجربتنا من الأسوأ ترك واجهة مستخدم معطوبة في مكانها بدلًا من إزالتها بشكل كامل. على سبيل المثال في مُنتَج مثل Messenger قد يؤدّي ترك واجهة المستخدم المعطوبة مرئيّة إلى إرسال رسالة للشخص الخطأ. وبشكلٍ مماثل من الأسوأ أيضًا بالنسبة لتطبيق للدفع أن يعرض مبلغًا خاطئًا بدلًا من عدم عرض شيء.

يعني هذا التغيير أنّك عندما تنتقل إلى إصدار React 16 فعلى الأغلب أنك ستقلل من الانهيارات الموجودة في تطبيقك والتي لم تكن تلاحظها من قبل. يُتيح لك إضافة حدود الأخطاء إعطاء تجربة مستخدم أفضل عند حدوث خطأ ما.

على سبيل المثال يُغلِّف تطبيق Facebook Messenger محتوى الشريط الجانبي، ونافذة المعلومات، وسجل المحادثات، وحقل إدخال الرسائل ضمن حدود أخطاء منفصلة. فإن انهار مكوّن ما في إحدى هذه المناطق من واجهة المستخدم، فستبقى الأخرى غير متفاعلة.

نشجعك أيضًا على استخدام خدمة التبليغ عن أخطاء JavaScript (أو بناء خدمة خاصة بك) بحيث تعرف عن الاستثناءات غير المُتعامل معها والتي تحصل أثناء مرحلة الإنتاج وتتمكن من إصلاحها.

== تتبع مكدس المكون ==
تطبع React 16 جميع الأخطاء الحاصلة خلال التصيير إلى نافذة الكونسول في وضعية التطوير، حتى ولو كان التطبيق يتجاهلها. وبالإضافة إلى رسائل الأخطاء ومكدس JavaScript فهي تُزوّدنا بتتبعات لمكدس المكوّن. بإمكانك الآن أن ترى بالضبط أين حصل الفشل في شجرة المكوّنات:
[[ملف:error-boundaries-stack-trace-f1276837b03821b43358d44c14072945-acf85.png|مركز|تصغير|520x520بك]]
تستطيع أيضًا أن ترى أسماء الملفات وأرقام الأسطر في تتبع مكدس المكوّن، يعمل هذا افتراضيًّا في المشاريع المبنية باستخدام <code>[https://github.com/facebookincubator/create-react-app create-react-app]</code>:
[[ملف:error-boundaries-stack-trace-line-numbers-45611d4fdbd152829b28ae2348d6dcba-acf85.png|مركز|تصغير|520x520بك]]
وإن لم تكن تستخدم <code>create-react-app</code>، فبإمكانك إضافة [https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source هذه الإضافة] يدويًّا إلى إعدادات Babel لديك. لاحظ أنّ الغرض منها هو وضعية التطوير فقط ويجب تعطيلها في وضعية الإنتاج.

'''ملاحظة:''' تعتمد أسماء المكوّنات المعروضة في تتبع لامكدس على الخاصيّة <code>[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name Function.name]</code>. إن كنت تريد دعم متصفحات وأجهزة أقدم والتي قد لا تزوّدنا بها بشكل ذاتي (مثل Internet Explorer 11) فضمّن الخاصيّة <code>Function.name</code> ضمن تطبيقك باستخدام <code>[https://github.com/JamesMGreene/Function.name function.name-polyfill]</code>. وبشكل بديل تستطيع تعيين الخاصيّة <code>[https://reactjs.org/docs/react-component.html#displayname displayName]</code> في جميع مكوناتك.

== ماذا عن <code>try/catch</code>؟ ==
هي طريقة رائعة ولكنّها تعمل مع الشيفرة من النمط الإلزامي فقط:<syntaxhighlight lang="javascript">
try {
  showButton();
} catch (error) {
  // ...
}
</syntaxhighlight>بينما مكوّنات React تصريحيّة وتُحدِّد ما ينبغي تصييره:<syntaxhighlight lang="html">
<Button />

</syntaxhighlight>تحافظ حدود الأخطاء على الطبيعة التصريحية في React وتعمل كما تتوقع. على سبيل المثال إن حدث خطأ في التابع <code>componentDidUpdate</code> ناتج عن التابع <code>setState</code> في مكان عميق من شجرة المكوّنات، فسيبقى هذا الخطأ ينتشر إلى أقرب حد للأخطاء.

== ماذا عن معالجات الأحداث (Event Handlers)؟ ==
لا تلتقط حدود الأخطاء الأخطاء الحاصلة بداخل مُعالِج الأحداث.

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

إن احتجت لالتقاط الأخطاء بداخل مُعالِج للأحداث، فاستخدم الجملة الاعتيادية في JavaScript وهي <code>try / catch</code>:<syntaxhighlight lang="javascript">
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    try {
	  // فعل أي شيء قد يرمي خطأ
    } catch (error) {
      this.setState({ error });
    }
  }

  render() {
    if (this.state.error) {
      return <h1>Caught an error.</h1>
    }
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

</syntaxhighlight>لاحظ أنّ المثال السابق يوضّح سلوك JavaScript الاعتيادي ولا يستخدم حدود الأخطاء.

== تغيير الأسماء في إصدار React 15 ==
تتضمّن React 15 دعمًا محدودًا جدًّا لحدود الأخطاء وذلك تحت اسم تابع مختلف هو <code>unstable_handleError</code>. لا تعمل هذه الطريقة حاليًّا وستحتاج لتغييره إلى <code>componentDidCatch</code> في شيفرتك بدءًا من أول إصدار 16 تجريبي.

أضفنا [https://github.com/reactjs/react-codemod#error-boundaries وضعًا جاهزًا] لنقل شيفرتك تلقائيًّا من أجل هذا التغيير.
== انظر أيضًا ==
* [[React/jsx in depth|شرح JSX بالتفصيل]]
* [[React/static type checking|التحقق من الأنواع الثابتة]]
* [[React/typechecking with proptypes|التحقق من الأنواع باستخدام PropTypes]]
* [[React/refs and the dom|استخدام المراجع مع DOM]]
* [[React/uncontrolled components|المكونات غير المضبوطة]]
* [[React/optimizing performance|تحسين الأداء]]
* [[React/react without es6|React بدون ES6]]
* [[React/react without jsx|React بدون JSX]]
* [[React/reconciliation|المطابقة (Reconciliation)]]
* [[React/context|استخدام السياق (Context) في React]]
* [[React/fragments|استخدام الأجزاء (Fragments) في React]]
* [[React/portals|المداخل (Portals) في React]]
* [[React/web components|مكونات الويب]]
* [[React/higher order components|المكونات ذات الترتيب الأعلى]]
* [[React/forwarding refs|تمرير المراجع]]
* [[React/render props|خاصيات التصيير]]
* [[React/integrating with other libraries|تكامل React مع المكتبات الأخرى]]
* [[React/accessibility|سهولة الوصول]]
* [[React/code splitting|تقسيم الشيفرة]]
* [[React/strict mode|الوضع الصارم (Strict Mode)]]

== مصادر==
*[https://reactjs.org/docs/error-boundaries.html صفحة حدود الأخطاء في توثيق React الرسمي].
[[تصنيف:React]]
[[تصنيف:React Advanced Guides]]