حدود أخطاء React: دليل شامل للتعامل القوي مع الأخطاء

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

ما هي حدود أخطاء React؟

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

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

لماذا نستخدم حدود الأخطاء؟

توفر حدود الأخطاء العديد من الفوائد الحاسمة:

• منع تعطل التطبيق: الفائدة الأهم هي منع خطأ مكون واحد من تعطيل التطبيق بأكمله. بدلاً من شاشة فارغة أو رسالة خطأ غير مفيدة، يرى المستخدمون واجهة مستخدم بديلة سلسة.
• تحسين تجربة المستخدم: من خلال عرض واجهة مستخدم بديلة، تسمح حدود الأخطاء للمستخدمين بمواصلة استخدام أجزاء التطبيق التي لا تزال تعمل بشكل صحيح. هذا يتجنب تجربة مزعجة ومحبطة.
• عزل الأخطاء: تساعد حدود الأخطاء في عزل الأخطاء في أجزاء معينة من التطبيق، مما يسهل تحديد وتصحيح السبب الجذري للمشكلة.
• تحسين التسجيل والمراقبة: توفر حدود الأخطاء مكانًا مركزيًا لتسجيل الأخطاء التي تحدث في تطبيقك. يمكن أن تكون هذه المعلومات لا تقدر بثمن لتحديد المشكلات وإصلاحها بشكل استباقي. يمكن ربط هذا بخدمة مراقبة مثل Sentry أو Rollbar أو Bugsnag، وكلها تتمتع بتغطية عالمية.
• الحفاظ على حالة التطبيق: بدلاً من فقدان كل حالة التطبيق بسبب عطل، تسمح حدود الأخطاء لبقية التطبيق بمواصلة العمل، مع الحفاظ على تقدم المستخدم وبياناته.

إنشاء مكون حدود الأخطاء

لإنشاء مكون حدود الأخطاء، تحتاج إلى تعريف مكون فئة (class component) يطبق إحدى دورتي الحياة التاليتين أو كلتيهما:

• static getDerivedStateFromError(error): يتم استدعاء هذه الدالة الثابتة بعد حدوث خطأ من مكون فرعي. تتلقى الخطأ الذي تم إلقاؤه كوسيط ويجب أن تعيد قيمة لتحديث الحالة لعرض واجهة مستخدم بديلة.
• componentDidCatch(error, info): يتم استدعاء هذه الدالة بعد حدوث خطأ من مكون فرعي. تتلقى الخطأ الذي تم إلقاؤه، بالإضافة إلى كائن info يحتوي على معلومات حول المكون الذي ألقى الخطأ. يمكنك استخدام هذه الدالة لتسجيل الخطأ أو أداء تأثيرات جانبية أخرى.

إليك مثال أساسي لمكون حدود الأخطاء:

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

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

  componentDidCatch(error, info) {
    // مثال على "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in App
    console.error("تم التقاط خطأ: ", error, info.componentStack);
    // يمكنك أيضًا تسجيل الخطأ في خدمة الإبلاغ عن الأخطاء
    // logErrorToMyService(error, info.componentStack);
  }

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

    return this.props.children; 
  }
}

شرح:

• مكون ErrorBoundary هو مكون فئة يرث من React.Component.
• يقوم المُنشئ (constructor) بتهيئة الحالة بـ hasError: false. سيتم استخدام هذا المؤشر لتحديد ما إذا كان سيتم عرض واجهة المستخدم البديلة.
• static getDerivedStateFromError(error) هي دالة ثابتة تتلقى الخطأ الذي تم إلقاؤه. تقوم بتحديث الحالة إلى hasError: true، مما سيؤدي إلى عرض واجهة المستخدم البديلة.
• componentDidCatch(error, info) هي دالة دورة حياة تتلقى الخطأ وكائن info يحتوي على معلومات حول مكدس المكونات (component stack). تستخدم لتسجيل الخطأ في وحدة التحكم. في تطبيق إنتاجي، ستقوم عادةً بتسجيل الخطأ في خدمة الإبلاغ عن الأخطاء.
• تتحقق دالة render() من حالة hasError. إذا كانت صحيحة، فإنها تعرض واجهة مستخدم بديلة (في هذه الحالة، وسم

  بسيط). وإلا، فإنها تعرض المكونات الأبناء.

استخدام حدود الأخطاء

لاستخدام حدود الأخطاء، ما عليك سوى تغليف المكون أو المكونات التي تريد حمايتها بمكون ErrorBoundary:

إذا ألقى ComponentThatMightThrow خطأً، فسوف يلتقط ErrorBoundary الخطأ، ويحدّث حالته، ويعرض واجهة المستخدم البديلة الخاصة به. سيستمر بقية التطبيق في العمل بشكل طبيعي.

تحديد مواضع حدود الأخطاء

يعد موضع حدود الأخطاء أمرًا حاسمًا للتعامل الفعال مع الأخطاء. ضع في اعتبارك هذه الاستراتيجيات:

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

مثال:

function App() {
  return (
    

      
        

      
      
        
      
      
        
          
        
      
      
        
  );
}

في هذا المثال، يتم تغليف كل قسم رئيسي من التطبيق (Header, Sidebar, ContentArea, Footer) بحدود أخطاء. هذا يسمح لكل قسم بالتعامل مع الأخطاء بشكل مستقل، مما يمنع خطأ واحدًا من التأثير على التطبيق بأكمله.

تخصيص واجهة المستخدم البديلة

يجب أن تكون واجهة المستخدم البديلة التي يعرضها حد الأخطاء غنية بالمعلومات وسهلة الاستخدام. ضع في اعتبارك هذه الإرشادات:

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

مثال:

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

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

  componentDidCatch(error, info) {
    // يمكنك أيضًا تسجيل الخطأ في خدمة الإبلاغ عن الأخطاء
    console.error("تم التقاط خطأ: ", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // يمكنك عرض أي واجهة مستخدم بديلة مخصصة
      return (
        

          
عفوًا! حدث خطأ ما.
          
نأسف، ولكن حدث خطأ أثناء محاولة عرض هذا المحتوى.
          
يرجى محاولة تحديث الصفحة أو الاتصال بالدعم إذا استمرت المشكلة.
           window.location.reload()}>تحديث الصفحة
          اتصل بالدعم
        
      );
    }

    return this.props.children; 
  }
}

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

التعامل مع أنواع مختلفة من الأخطاء

تلتقط حدود الأخطاء الأخطاء التي تحدث أثناء العرض، وفي دوال دورة الحياة، وفي مُنشئي الشجرة بأكملها تحتها. لكنها *لا* تلتقط الأخطاء في:

• معالجات الأحداث (Event handlers)
• الكود غير المتزامن (e.g., setTimeout, requestAnimationFrame)
• العرض من جانب الخادم (Server-side rendering)
• الأخطاء التي تحدث في حدود الأخطاء نفسها (بدلاً من مكوناتها الفرعية)

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

معالجات الأحداث

بالنسبة للأخطاء التي تحدث في معالجات الأحداث، استخدم كتلة try...catch قياسية:

function MyComponent() {
  const handleClick = () => {
    try {
      // كود قد يلقي خطأ
      throw new Error("حدث خطأ ما في معالج الحدث");
    } catch (error) {
      console.error("خطأ في معالج الحدث: ", error);
      // تعامل مع الخطأ (مثل عرض رسالة خطأ)
      alert("حدث خطأ. يرجى المحاولة مرة أخرى.");
    }
  };

  return انقر هنا;
}

الكود غير المتزامن

بالنسبة للأخطاء التي تحدث في الكود غير المتزامن، استخدم كتل try...catch داخل الدالة غير المتزامنة:

function MyComponent() {
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        // معالجة البيانات
        console.log(data);
      } catch (error) {
        console.error("خطأ في جلب البيانات: ", error);
        // تعامل مع الخطأ (مثل عرض رسالة خطأ)
        alert("فشل جلب البيانات. يرجى المحاولة مرة أخرى لاحقًا.");
      }
    }

    fetchData();
  }, []);

  return 
جاري تحميل البيانات...
;
}

بدلاً من ذلك، يمكنك استخدام آلية معالجة أخطاء عامة لرفض الوعود (promise rejections) غير المعالجة:

window.addEventListener('unhandledrejection', function(event) {
  console.error('رفض غير معالج (الوعد: ', event.promise, ', السبب: ', event.reason, ');');
  // اختياريًا، اعرض رسالة خطأ عامة أو سجل الخطأ في خدمة
  alert("حدث خطأ غير متوقع. يرجى المحاولة مرة أخرى لاحقًا.");
});

تقنيات متقدمة لحدود الأخطاء

إعادة تعيين حدود الأخطاء

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

لإعادة تعيين حدود الأخطاء، يمكنك استخدام مكتبة إدارة الحالة مثل Redux أو Context لإدارة حالة الخطأ وتوفير دالة إعادة تعيين. بدلاً من ذلك، يمكنك استخدام نهج أبسط عن طريق إجبار حدود الأخطاء على إعادة التحميل (remount).

مثال (إجبار إعادة التحميل):

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

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

  componentDidCatch(error, info) {
    // يمكنك أيضًا تسجيل الخطأ في خدمة الإبلاغ عن الأخطاء
    console.error("تم التقاط خطأ: ", error, info.componentStack);
    this.setState(prevState => ({ errorCount: prevState.errorCount + 1 }));
  }

  resetError = () => {
      this.setState({hasError: false, key: this.state.key + 1})
  }

  render() {
    if (this.state.hasError) {
      // يمكنك عرض أي واجهة مستخدم بديلة مخصصة
      return (
        

          
عفوًا! حدث خطأ ما.
          
نأسف، ولكن حدث خطأ أثناء محاولة عرض هذا المحتوى.
          حاول مرة أخرى
        
      );
    }

    return 
{this.props.children}
;
  }
}

في هذا المثال، يتم إضافة 'key' إلى الـ div الغلاف. يؤدي تغيير المفتاح إلى إجبار المكون على إعادة التحميل، مما يمسح حالة الخطأ بشكل فعال. تقوم دالة `resetError` بتحديث حالة `key` للمكون، مما يتسبب في إعادة تحميل المكون وإعادة عرض مكوناته الفرعية.

استخدام حدود الأخطاء مع Suspense

يسمح لك React Suspense بـ "تعليق" عرض مكون حتى يتم استيفاء شرط ما (على سبيل المثال، جلب البيانات). يمكنك الجمع بين حدود الأخطاء و Suspense لتوفير تجربة معالجة أخطاء أكثر قوة للعمليات غير المتزامنة.

import React, { Suspense } from 'react';

function MyComponent() {
  return (
    
      جاري التحميل...