القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

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

توصي React باستخدام حدود الخطأ لتوفير تجربة مستخدم أفضل عند حدوث خطأ.

ما هي فئة حد الخطأ في React؟

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

بحسب ال توثيق رد الفعل، فئات حدود الخطأ لا تلتقط الأخطاء في:

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

بالنسبة للأخطاء المذكورة أعلاه ، يمكنك استخدام كتلة try / catch.

instagram viewer

على سبيل المثال ، للقبض على خطأ يحدث في معالج الحدث، استخدم الكود التالي:

وظيفةEventComponent() {
مقدار ثابت [error، setError] = useState (باطل)
مقدار ثابت handleClick = () => {
يحاول {
// قم بعمل ما
 } يمسك (خطأ) {
 setError (خطأ)
 }
 }
يعود (
<>
<شعبة>{خطأ؟ خطأ: ""}شعبة>
<زرعند النقر={handleClick}>زرزر>

 )
}

استخدم حدود الخطأ للقبض على الأخطاء في مكونات React فقط.

تكوين فئة حد الخطأ

يمكنك إنشاء حد خطأ عن طريق تحديد فئة تحتوي على إحدى الطريقتين التاليتين أو كليهما:

  • getDerivedStateFromError ثابتة ()
  • componentDidCatch ()

تقوم الوظيفة getDerivedStateFromError () بتحديث حالة المكون بمجرد اكتشاف الخطأ بينما يمكنك استخدام componentDidCatch () لتسجيل معلومات الخطأ في وحدة التحكم. يمكنك أيضًا إرسال الأخطاء إلى خدمة الإبلاغ عن الأخطاء.

يوجد أدناه مثال يوضح كيفية إنشاء فئة حد خطأ بسيط.

فصلحدود الخطأيمتدتتفاعل.عنصر{
البناء(دعائم) {
ممتاز(الدعائم) ؛
هذا.state = { خطأ: خطأ شنيع };
 }
ثابتةgetDerivedStateFromError(خطأ){
// تحديث الحالة حتى يُظهر العرض التالي واجهة المستخدم الاحتياطية.
يعود { خطأ: خطأ }؛
 }


 componentDidCatch (error، errorInfo) {
// سجل الخطأ في خدمة الإبلاغ عن الخطأ
 }


 يجعل() {
لو (هذا.ولاية.خطأ) {
// إنشاء واجهة مستخدم احتياطية مخصصة هنا
يعود<h1>يظهر ان هناك مشكلة.h1>;
 }

يعودهذا.props.children؛ 
 }
}
يصدّرتقصير حدود الخطأ

عند حدوث خطأ ، ستقوم getDerivedStateFromError () بتحديث الحالة وبالتالي تشغيل إعادة تصيير تعرض واجهة المستخدم الاحتياطية.

إذا كنت لا تريد إنشاء فئة حد الخطأ من البداية ، فاستخدم حزمة NPM لحدود الخطأ. توفر هذه الحزمة المكون ErrorBoundary الذي يلتف حول المكونات التي تعتقد أنها قد تسبب أخطاء.

استخدام فئة حد الخطأ

لمعالجة الأخطاء ، قم بلف المكونات بمكوِّن فئة حدود الخطأ. يمكنك التفاف مكون المستوى الأعلى أو المكونات الفردية.

إذا قمت بلف مكون المستوى الأعلى ، فإن فئة حدود الخطأ ستتعامل مع الأخطاء التي تسببها جميع المكونات في تطبيق React.

<حدود الخطأ>
<برنامج/>
حدود الخطأ>

إذا قمت بلف مكون فردي باستخدام ErrorBoundary ، فلن يؤثر أي خطأ في هذا المكون على كيفية عرض مكون آخر.

<حدود الخطأ>
<حساب تعريفي/>
حدود الخطأ>

على سبيل المثال ، لن يؤثر خطأ في مكون ملف التعريف على كيفية عرض مكون آخر مثل مكون Hero. بينما قد يتعطل مكون ملف التعريف ، سيعمل باقي التطبيق بشكل جيد. هذا أفضل بكثير من عرض الشاشة الاحتياطية البيضاء العامة التي توفرها React.

معالجة الأخطاء في JavaScript

يمكن أن تكون أخطاء البرمجة محبطة للمطورين والمستخدمين. قد يؤدي الفشل في معالجة الأخطاء إلى تعريض المستخدمين لواجهة مستخدم قبيحة مع رسائل خطأ يصعب فهمها.

عند إنشاء مكون React الخاص بك ، قم بإنشاء فئة حدود الخطأ إما من البداية أو باستخدام حزمة حدود خطأ رد الفعل لعرض رسائل خطأ سهلة الاستخدام.