ما هي الـ Error Boundaries وكيف تتعامل مع الأخطاء غير المتوقعة في شجرة المكونات؟

الإجابة المختصرة

هي مكونات خاصة تعترض أخطاء JavaScript في شجرة المكونات التابعة لها أثناء الـ Render و lifecycle methods، وتعرض واجهة بديلة (Fallback UI) دون انهيار التطبيق كاملاً.

الشرح

يتم إنشاء الـ Error Boundary باستخدام Class Component يطبق إحدى دالتي getDerivedStateFromError (لتحديث الـ state وعرض واجهة بديلة) أو componentDidCatch (لتسجيل تفاصيل الخطأ لخدمات المراقبة). لا تعترض الـ Error Boundaries أخطاء معالجات الأحداث (Event Handlers) أو العمليات غير المتزامنة كـ setTimeout.

مثال بالكود

import React, { Component, ReactNode } from 'react';

interface Props { children: ReactNode; fallback: ReactNode }
interface State { hasError: boolean }

class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false };

  static getDerivedStateFromError(): State {
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    console.error("خطأ تم التقاطه في الواجهة:", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) return this.props.fallback;
    return this.props.children;
  }
}

أخطاء شائعة

• محاولة استخدام try/catch داخل دالة الـ JSX المرتجعة للتعامل مع أخطاء تصيير المكونات الفرعية.

أسئلة متابعة

• ما هو مفهوم الـ Pure Components و Purity في دوال ريأكت (Pure Functions)؟

المصادر

• React docs — Component: Catching rendering errors with an error boundary