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

أفضل الممارسات للتعامل مع الأخطاء في React باستخدام حدود الخطأ

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

لا تريد ظهور الأخطاء للمستخدمين. تقرر React إظهار صفحة فارغة.

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

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

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

هذا هو المكانحدود الخطأتعال إلى اللعب.

باستخدام حد الخطأ ، يمكنك عزل أجزاء من التطبيق والتعامل مع الأخطاء محليًا.

حدود الخطأ هي مكون React الذي ينفذ الامتدادcomponentDidCatch()حدث دورة الحياة ، ويلتف بالمكونات الأخرى:

class ErrorHandler extends React.Component {
  constructor(props) {
    super(props)
    this.state = { errorOccurred: false }
  }

componentDidCatch(error, info) { this.setState({ errorOccurred: true }) logErrorToMyService(error, info) }

render() { return this.state.errorOccurred ? <h1>Something went wrong!</h1> : this.props.children } }

وفي مكون JSX ، يمكنك استخدامه على النحو التالي:

<ErrorHandler>
  <SomeOtherComponent />
</ErrorHandler>

عندما يحدث خطأ في الداخلSomeOtherComponentأو المكونات الفرعية الأخرى وفي جميع المكونات الفرعية التي تحتوي عليها ،ErrorHandlerسيعترضه ، ويمكنك التعامل مع الخطأ بأمان.

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

داخلcomponentDidCatch()، الذي يتلقى وسيطتين تصفان الخطأ ، نسميه أيضًاlogErrorToMyService()وهو مجرد كعب لبعض الوظائف التي تستخدم خدمة مثل Sentry أو Roller أو Airbrake أو غيرها التي يمكنها تسجيل الخطأ بطريقة لطيفة لتراها ، لذلك لا يتعين عليك الاعتماد على المستخدمين الذين يخبروك بوجود خطأ في لاحظ وجود مشكلة.

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: