مكون ErrorBoundary في React: دليل شامل لعزل الأخطاء

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

ما هو ErrorBoundary؟

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

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

لماذا نستخدم مكونات ErrorBoundary؟

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

إنشاء مكون ErrorBoundary

إنشاء مكون ErrorBoundary في React أمر بسيط نسبيًا. يتضمن تعريف مكون من نوع الكلاس (يجب أن تكون مكونات ErrorBoundary من نوع الكلاس) مع دالتي دورة الحياة static getDerivedStateFromError() و componentDidCatch().

مثال أساسي

إليك مثال أساسي لمكون ErrorBoundary:

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

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, errorInfo) {
 // You can also log the error to an error reporting service
 console.error(error, errorInfo);
 // logErrorToMyService(error, errorInfo);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return (
 
Something went wrong.
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

الشرح:

• constructor(props): تقوم بتهيئة حالة المكون الأولية مع ضبط hasError على false.
• static getDerivedStateFromError(error): يتم استدعاء هذه الدالة الثابتة (static) بعد حدوث خطأ من مكون فرعي. تتلقى الخطأ الذي تم إطلاقه كوسيط ويجب أن تعيد قيمة لتحديث الحالة. في هذه الحالة، تقوم بتعيين hasError إلى true، مما يؤدي إلى عرض واجهة المستخدم الاحتياطية.
• componentDidCatch(error, errorInfo): يتم استدعاء هذه الدالة بعد حدوث خطأ من مكون فرعي. تتلقى الخطأ وكائنًا يحتوي على معلومات حول المكون الذي أطلق الخطأ. هذا هو المكان المثالي لتسجيل الأخطاء في خدمة تقارير الأخطاء أو تنفيذ آثار جانبية أخرى. يحتوي الكائن errorInfo على مفتاح componentStack بمعلومات حول المكون الذي أطلق الخطأ.
• render(): تعرض هذه الدالة مخرجات المكون. إذا كانت hasError تساوي true، فإنها تعرض واجهة مستخدم احتياطية (في هذه الحالة، رسالة بسيطة "Something went wrong."). وإلا، فإنها تعرض مكوناتها الفرعية (this.props.children).

استخدام مكون ErrorBoundary

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

            import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
 return (
 
 
 
 );
}

export default MyComponent;

            

              
                Copy
              
            
          

إذا أطلق المكون MyPotentiallyErrorProneComponent خطأ، فسوف يلتقطه مكون ErrorBoundary، ويسجله، ويعرض واجهة المستخدم الاحتياطية.

أفضل الممارسات لتنفيذ ErrorBoundary

لتحقيق أقصى استفادة من مكونات ErrorBoundary، ضع في اعتبارك هذه الممارسات الفضلى:

• الموضع الاستراتيجي: ضع مكونات ErrorBoundary بشكل استراتيجي حول المكونات التي من المرجح أن تطلق أخطاءً أو التي تعتبر حاسمة لتجربة المستخدم. لا تغلف تطبيقك بالكامل في مكون ErrorBoundary واحد. بدلاً من ذلك، استخدم عدة مكونات ErrorBoundary لعزل الإخفاقات في مناطق محددة.
• معالجة الأخطاء الدقيقة: استهدف معالجة الأخطاء بشكل دقيق عن طريق وضع مكونات ErrorBoundary أقرب إلى المكونات التي قد تفشل. يتيح لك ذلك توفير واجهات مستخدم احتياطية أكثر تحديدًا ومنع الاضطرابات غير الضرورية في أجزاء أخرى من التطبيق.
• واجهة مستخدم احتياطية مفيدة: قدم واجهة مستخدم احتياطية واضحة ومفيدة تُعلم المستخدم بالخطأ وتقترح حلولاً ممكنة. تجنب رسائل الخطأ العامة. بدلاً من ذلك، قدم سياقًا وإرشادات. على سبيل المثال، إذا كان الخطأ ناتجًا عن مشكلة في الشبكة، اقترح التحقق من الاتصال بالإنترنت.
• تسجيل الأخطاء: سجل الأخطاء باستخدام componentDidCatch() في خدمة تقارير الأخطاء (مثل Sentry، Rollbar) أو في سجلات الخادم لديك. يتيح لك ذلك تتبع الأخطاء ومعالجتها بشكل استباقي. قم بتضمين السياق ذي الصلة في السجلات، مثل مكدس المكونات ومعلومات المستخدم.
• آليات إعادة المحاولة: فكر في تنفيذ آليات إعادة المحاولة ضمن واجهة المستخدم الاحتياطية. على سبيل المثال، وفر زرًا يسمح للمستخدم بإعادة محاولة العملية التي فشلت. يمكن أن يكون هذا مفيدًا بشكل خاص للتعامل مع الأخطاء العابرة، مثل مشاكل الشبكة المؤقتة.
• تجنب عرض مكونات ErrorBoundary مباشرة: تم تصميم مكونات ErrorBoundary لالتقاط الأخطاء في مكوناتها الفرعية. عرض مكون ErrorBoundary مباشرة داخل نفسه لن يلتقط الأخطاء التي يتم إطلاقها أثناء عملية العرض الخاصة به.
• لا تستخدم مكونات ErrorBoundary للأخطاء المتوقعة: تهدف مكونات ErrorBoundary إلى التعامل مع الأخطاء غير المتوقعة. بالنسبة للأخطاء المتوقعة، مثل أخطاء التحقق من الصحة أو أخطاء واجهة برمجة التطبيقات (API)، استخدم كتل try/catch أو آليات أخرى لمعالجة الأخطاء داخل المكون نفسه.

تقنيات متقدمة لمكونات ErrorBoundary

بالإضافة إلى التنفيذ الأساسي، هناك العديد من التقنيات المتقدمة التي يمكنك استخدامها لتحسين تنفيذ ErrorBoundary:

تقارير الأخطاء المخصصة

بدلاً من مجرد تسجيل الأخطاء في وحدة التحكم (console)، يمكنك دمج مكونات ErrorBoundary مع خدمة مخصصة لتقارير الأخطاء. توفر خدمات مثل Sentry و Rollbar و Bugsnag أدوات لتتبع وتحليل وحل الأخطاء في تطبيقك. للتكامل مع مثل هذه الخدمة، ستحتاج عادةً إلى تثبيت حزمة SDK الخاصة بالخدمة ثم استدعاء دالة الإبلاغ عن الأخطاء الخاصة بها ضمن دالة componentDidCatch():

            componentDidCatch(error, errorInfo) {
 // Log the error to Sentry
 Sentry.captureException(error, { extra: errorInfo });
}

            

              
                Copy
              
            
          

واجهة مستخدم احتياطية ديناميكية

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

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

 static getDerivedStateFromError(error) {
 let errorType = 'generic';
 if (error instanceof NetworkError) {
 errorType = 'network';
 } else if (error instanceof AuthenticationError) {
 errorType = 'authentication';
 }
 // Update state so the next render will show the fallback UI.
 return {
 hasError: true,
 errorType: errorType
 };
 }

 render() {
 if (this.state.hasError) {
 switch (this.state.errorType) {
 case 'network':
 return (
Network error. Please check your connection.
);
 case 'authentication':
 return (
Authentication error. Please log in again.
);
 default:
 return (
Something went wrong.
);
 }
 }

 return this.props.children;
 }
}

            

              
                Copy
              
            
          

استخدام مكونات ErrorBoundary مع العرض من جانب الخادم (SSR)

عند استخدام العرض من جانب الخادم (SSR)، يمكن أن تكون مكونات ErrorBoundary صعبة لأن الأخطاء التي تحدث أثناء العرض الأولي على الخادم يمكن أن تتسبب في فشل عملية العرض بأكملها. للتعامل مع هذا، يمكنك استخدام مزيج من كتل try/catch ومكونات ErrorBoundary. قم بتغليف عملية العرض في كتلة try/catch ثم اعرض واجهة المستخدم الاحتياطية لمكون ErrorBoundary إذا حدث خطأ. سيمنع هذا الخادم من الانهيار ويسمح لك بتقديم صفحة HTML أساسية مع رسالة خطأ.

مكونات ErrorBoundary والمكتبات الخارجية (Third-Party)

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

اختبار مكونات ErrorBoundary

يعد اختبار مكونات ErrorBoundary أمرًا بالغ الأهمية لضمان عملها كما هو متوقع. يمكنك استخدام مكتبات الاختبار مثل Jest و React Testing Library لمحاكاة الأخطاء والتحقق من أن ErrorBoundary يلتقط الأخطاء ويعرض واجهة المستخدم الاحتياطية. إليك مثال أساسي على كيفية اختبار ErrorBoundary:

            import { render, screen, fireEvent } from '@testing-library/react';
import ErrorBoundary from './ErrorBoundary';

function BrokenComponent() {
 throw new Error('This component is broken');
}

describe('ErrorBoundary', () => {
 it('should render the fallback UI when an error occurs', () => {
 render(
 
 
 
 );
 const fallbackText = screen.getByText('Something went wrong.');
 expect(fallbackText).toBeInTheDocument();
 });
});

            

              
                Copy
              
            
          

قيود مكونات ErrorBoundary

بينما تعد مكونات ErrorBoundary أداة قوية لمعالجة الأخطاء، من المهم فهم قيودها:

• تلتقط مكونات ErrorBoundary الأخطاء أثناء العرض، وفي دوال دورة الحياة، وفي منشئات الشجرة بأكملها أسفلها. لكنها لا تلتقط الأخطاء داخل معالجات الأحداث. لذلك، تحتاج إلى استخدام كتل try/catch داخل معالجات الأحداث.
• تلتقط مكونات ErrorBoundary الأخطاء في المكونات التي تقع تحتها في الشجرة فقط. لا يمكنها التقاط الأخطاء داخل مكون ErrorBoundary نفسه.
• مكونات ErrorBoundary هي مكونات من نوع الكلاس. لا يمكن أن تكون المكونات الوظيفية (Functional components) مكونات ErrorBoundary.
• لا تلتقط مكونات ErrorBoundary الأخطاء الناتجة عن:
  • معالجات الأحداث (تعرف على المزيد أدناه)
  • التعليمات البرمجية غير المتزامنة (مثل، استدعاءات setTimeout أو requestAnimationFrame)
  • العرض من جانب الخادم
  • الأخطاء التي يتم إطلاقها في مكون ErrorBoundary نفسه (بدلاً من مكوناته الفرعية)

معالجة الأخطاء في معالجات الأحداث

كما ذكرنا سابقًا، لا تلتقط مكونات ErrorBoundary الأخطاء التي تحدث داخل معالجات الأحداث. لمعالجة الأخطاء في معالجات الأحداث، تحتاج إلى استخدام كتل try/catch:

            function MyComponent() {
 const handleClick = () => {
 try {
 // Code that might throw an error
 throw new Error('Something went wrong!');
 } catch (error) {
 console.error('Error in handleClick:', error);
 // Handle the error (e.g., display an error message to the user)
 }
 };

 return (
 Click me
 );
}

            

              
                Copy
              
            
          

المعالجة العامة للأخطاء

بينما توفر مكونات ErrorBoundary آلية لمعالجة الأخطاء داخل مكونات React، فإنها لا تعالج الأخطاء التي تحدث خارج شجرة مكونات React، مثل رفض الوعود (promise) غير المعالجة أو الأخطاء في مستمعي الأحداث العامين. للتعامل مع هذه الأنواع من الأخطاء، يمكنك استخدام آليات معالجة الأخطاء العامة التي يوفرها المتصفح:

• window.onerror: يتم تشغيل معالج الأحداث هذا عند حدوث خطأ JavaScript في الصفحة. يمكنك استخدام هذا لتسجيل الأخطاء في خدمة تقارير الأخطاء أو عرض رسالة خطأ عامة للمستخدم.
• window.onunhandledrejection: يتم تشغيل معالج الأحداث هذا عند عدم معالجة رفض وعد (promise). يمكنك استخدام هذا لتسجيل رفض الوعود غير المعالجة ومنعها من التسبب في سلوك غير متوقع.

            window.onerror = function(message, source, lineno, colno, error) {
 console.error('Global error:', message, source, lineno, colno, error);
 // Log the error to an error reporting service
 return true; // Prevent the default error handling
};

window.onunhandledrejection = function(event) {
 console.error('Unhandled promise rejection:', event.reason);
 // Log the rejection to an error reporting service
};

            

              
                Copy
              
            
          

الخاتمة

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

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