التعامل مع الـ Error Boundaries في React

الدرس التاسع عشر: التعامل مع الـ Error Boundaries في React

في هذا الدرس، سنتعرف على مفهوم Error Boundaries في React وكيفية استخدامها لمعالجة الأخطاء في تطبيقات React بطريقة مرنة وآمنة. سنستعرض كيفية التعامل مع الأخطاء في React باستخدام componentDidCatch وكيفية بناء مكونات مخصصة للتعامل مع الأخطاء.

1. ما هي Error Boundaries؟

Error Boundaries هي ميزة في React تساعد في التقاط ومعالجة الأخطاء التي تحدث في المكونات أثناء عملية التفاعل مع واجهة المستخدم (UI). بدلاً من أن يتسبب الخطأ في كسر التطبيق بأكمله، يمكن للـ Error Boundaries أن تعزل الخطأ وتعرض رسالة خطأ مناسبة للمستخدم دون التأثير على باقي أجزاء التطبيق.

تتمثل أهمية Error Boundaries في أنها تساعد في تحسين استقرار التطبيق وتجربة المستخدم من خلال منع الانهيار التام للتطبيق عند حدوث خطأ.

2. كيفية استخدام componentDidCatch للتعامل مع الأخطاء

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

كيفية استخدام componentDidCatch:

1. إنشاء مكون Error Boundary: يجب إنشاء مكون يتم استخدامه كـ “حدود للخطأ” حول المكونات التي قد تواجه أخطاء.
2. استخدام componentDidCatch: في هذا المكون، يمكن استخدام componentDidCatch لالتقاط الأخطاء، وتحديد طريقة التعامل معها.

مثال بسيط لإنشاء Error Boundary:

import React, { Component } from 'react';

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

  // هذه الدالة سيتم استدعاؤها عند حدوث خطأ في أي مكون فرعي
  componentDidCatch(error, errorInfo) {
    // تحديث الحالة لتمكين عرض رسالة الخطأ
    this.setState({
      hasError: true,
      errorInfo: errorInfo
    });
    // يمكن إرسال الأخطاء إلى خدمة خارجية لتتبع الأخطاء
    console.log(error, errorInfo);
  }

  render() {
    // إذا كان هناك خطأ، عرض رسالة خطأ للمستخدم
    if (this.state.hasError) {
      return (
        <div>
          <h2>حدث خطأ في التطبيق!</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorInfo && this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    // إذا لم يكن هناك خطأ، يتم عرض المكونات الأبناء كالمعتاد
    return this.props.children;
  }
}

export default ErrorBoundary;

الشرح:

• constructor: يتم تعيين الحالة الأولية للمكون، حيث نبدأ بتحديد أن هناك hasError كـ false.
• componentDidCatch: عند حدوث خطأ في أحد المكونات الأبناء، يتم استدعاء هذه الدالة. يتم تحديث الحالة مع تفاصيل الخطأ.
• render: إذا كان هناك خطأ، يعرض المكون رسالة تفيد بوجود مشكلة. إذا لم يكن هناك خطأ، يتم عرض المكونات الأبناء كما هو الحال عادةً.

3. كيفية استخدام Error Boundaries في تطبيق React

بمجرد أن تنشئ Error Boundary باستخدام componentDidCatch، يمكنك استخدامها كحاوية (wrapper) حول المكونات التي قد يحدث فيها خطأ. يمكنك تطبيق Error Boundary على مكونات معينة أو على التطبيق بأكمله.

مثال: استخدام Error Boundary في التطبيق:

import React from 'react';
import ErrorBoundary from './ErrorBoundary'; // استيراد ErrorBoundary

function BuggyComponent() {
  // هذا المكون سيتسبب في خطأ عند تحميله
  throw new Error('Something went wrong!');
  return <h1>This will not render</h1>;
}

function App() {
  return (
    <div>
      <h1>Welcome to the React App!</h1>
      {/* إحاطة المكونات بـ Error Boundary */}
      <ErrorBoundary>
        <BuggyComponent />
      </ErrorBoundary>
    </div>
  );
}

export default App;

الشرح:

• BuggyComponent: هو مكون يُعرض فيه خطأ عمداً. عند تحميل هذا المكون، سيحدث خطأ.
• ErrorBoundary: يتم إحاطة BuggyComponent داخل ErrorBoundary لالتقاط الخطأ وعرض رسالة بدلاً من انهيار التطبيق.

4. بناء مكونات لمعالجة الأخطاء بشكل مرن

يمكنك استخدام Error Boundaries ليس فقط لعرض رسالة خطأ، ولكن أيضًا لتقديم خيارات أخرى مثل إعادة المحاولة أو إخفاء المكون المسبب للخطأ بشكل دائم.

مثال على بناء مكون Error Boundary مع خيارات مرنة:

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

  componentDidCatch(error, errorInfo) {
    this.setState({
      hasError: true,
      errorInfo: errorInfo
    });
  }

  handleRetry = () => {
    this.setState({ hasError: false, errorInfo: null });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>حدث خطأ في التطبيق!</h2>
          <button onClick={this.handleRetry}>إعادة المحاولة</button>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorInfo && this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

الشرح:

• إعادة المحاولة: في حال حدوث خطأ، يمكنك عرض زر يسمح للمستخدم بإعادة المحاولة. عندما يتم الضغط عليه، يعيد الحالة إلى قيمتها الأولية، مما يسمح للمكون بمحاولة تحميله مرة أخرى.

5. أفضل الممارسات لاستخدام Error Boundaries

• تحديد نطاق المكونات: لا يجب تغليف جميع المكونات في Error Boundary واحد. بدلاً من ذلك، استخدم Error Boundaries حول المكونات الأكثر عرضة للأخطاء، مثل مكونات التي تتعامل مع البيانات الخارجية أو التي تستخدم واجهات برمجة التطبيقات (APIs).
• التعامل مع الأخطاء بشكل صحيح: لا تستخدم Error Boundaries للتعامل مع الأخطاء المتوقع حدوثها بشكل طبيعي، مثل الأخطاء الناتجة عن المدخلات غير الصحيحة من المستخدم. بدلاً من ذلك، استخدم تقنيات مثل form validation.

6. الختام

Error Boundaries في React هي أداة قوية ومرنة لمعالجة الأخطاء داخل المكونات دون التأثير على باقي التطبيق. باستخدام componentDidCatch، يمكنك التقاط الأخطاء وعرض رسائل خطأ أو توفير خيارات للمستخدمين لتحسين تجربة التفاعل مع التطبيق.