تخيل معايا السيناريو ده: قعدت ساعات طويلة تظبط في تطبيق ريياكت (React) وشغال زي الفل، وفجأة المداوم أو اليوزر يفتح الصفحة ويحصل خطأ بسيط (Error) في مكون فرعي صغير في آخر الصفحة.. والنتيجة؟ الشاشة كلها تطفي وتبقى بيضاء (White Screen of Death) والتطبيق ككل ينهار! وجع قلب صح؟ ده بالضبط اللي الـ Error Boundaries بتيجي تحله.

إيه هي الـ Error Boundaries وليه بنحتاجها؟

في العادة، لو حصل أي خطأ JavaScript في أي مكون (Component) جوه تطبيق ريياكت، التطبيق كله بيقع. هنا بيجي دور حدود الأخطاء (Error Boundaries). هي عبارة عن مكونات رياكت (React Components) وظيفتها الأساسية انها تمسك الأخطاء (Catch JavaScript Errors) في أي حتة جوه شجرة المكونات بتاعتها، وتسجل الخطأ ده، والأهم من كده: تعرض شاشة بديلة (Fallback UI) بدل ما التطبيق كله ينهار.

لكن خد بالك من نقطة مهمة جداً: الـ Error Boundaries مش بتشتغل مع كل حاجة. هي مش بتغطي الأخطاء اللي بت حصل في:

• التعليمات البرمجية غير المتزامنة زي (Async Code أو setTimeout)
• أحداث تفاعل المستخدم زي (Event Handlers)
• عمليات الخادم (Server-side Rendering)
• الأخطاء اللي بت تحصل جوه الـ Error Boundary نفسه مش المكونات التابعة ليه.

ازاي تعمل Error Boundary بايدك؟

عشان تعمل Error Boundary حقيقية، لازم تستخدم مكونات الفئة (Class Components)، لأن رياكت لسه مش داعم الطريقة دي بالـ Hooks لحد دلوقتي (زي componentDidCatch و static getDerivedStateFromError).

تعال نشوف كود عملي لمكون يقدر يحميك من الانهيار:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // تحديث الحالة عشان المرة الجاية نعرض شاشة البديل
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // هنا ممكن تسجل الخطأ في خدمة خارجية زي Sentry
    console.log("Error logged: ", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // دي الشاشة البديلة اللي هتشيل وجع القلب للمستخدم
      return <div><h2>عفواً، حصل خطأ غير متوقع في الجزء ده.</h2></div>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

ازاي تستخدم الـ Error Boundary في التطبيق؟

بعد ما عملنا الكود اللي فات، استخدامه أبسط ما يكون. كل اللي عليك تعمله إنك تحط المكونات الخطيرة أو الحساسة جوه الـ Boundary بتاعتك. ممكن تحطها حوالين الصفحة كلها، أو حوالين أجزاء معينة بس زي الـ Sidebar أو الـ Widget بتاع الدفع.

function App() {
  return (
    <div className="App">
      <header>
        <h1>متجري الإلكتروني</h1>
      <header>
      
      <ErrorBoundary>
        <ShoppingDashboard />
      </ErrorBoundary>
      
    </div>
  );
}

بالطريقة دي، لو ShoppingDashboard حصل فيها أي كراش، الباقي من التطبيق هيفضل شغال واليوزر مش هيحس بمشكلة كبيرة.

مكتبات جاهزة تسهل عليك الحياة (React Error Boundary)

لو مش حابب تكتب كود الـ Class Component بايدك كل مرة، فيه مكتبات جاهزة وممتازة زي مكتبة react-error-boundary. بتديك Hooks و Components جاهزة وتخليك تكتب الكود بطريقة عصرية وسهلة جداً.

خاتمة ونصيحة أخوية

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