أزاى تستخدم Error Boundaries فى React وتحافظ على الموقع

[x32x01]

إزاي تستخدم Error Boundaries في React وتحافظ على ثبات الموقع حتى لو فيه Errors ​

تخيل معايا كده يا صحبي إنك شغال على موقع ضخم مليان Components وفنكشن وفجأة حاجة بسيطة حصل فيها Error فـ بدل ما الصفحة كلها تقع تعرض رسالة بسيطة لليوزر زي حصل خطأ حاول مرة تانية بدل ما يخبط في صفحة فاضية. هنا بييجي دور الـ Error Boundaries.

هي إيه اصلا الـ Error Boundaries؟ ​

بكل بساطة يا صديقي هي Components في React بتتعامل مع الأخطاء اللي بتحصل في الـ UI وتمنع إنها توصل للـ Root Component يعني بدل ما الموقع كله يقع لا هوا بيخليك تتحكم في عرض حاجة بسيطة لليوزر توضح إن في خطأ حصل بدون أي تأثير على باقي الصفحة.

حلو... طيب إزاي بقا بنعمل Error Boundary؟​

هنشرح دا دلوقتي واحده واحده باذن الله..
خلينا نبدأ في كتابة Error Boundary Component بسيط الاول... هتعمل كلاس Component وتستخدم فيه متغير hasError مع componentDidCatch وgetDerivedStateFromError زي ما في المثال دا كدا :

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    console.error("Caught an error:", error, errorInfo);
  }
  render() {
    if (this.state.hasError) {
      return <h1>حصل خطأ، حاول مرة تانية.</h1>;
    }
    return this.props.children;
  }
}

​

طب وبعدين بقا أستخدمها إزاي؟ ​

بكل بساطه هتعمل Wrap لأي Component انت متوقع إنه ممكن يواجه مشاكل بالـ ErrorBoundary اللي عملناه فوق زي كدا :

<ErrorBoundary>
  <MyProblematicComponent />
</ErrorBoundary>

كدا لو MyProblematicComponent حصل فيه Error، ErrorBoundary هيعرض الرسالة اللي حددناها بدل ما يقفل الموقع كله.
اظن مفيش ابسط من كدا

طب اي فايدة Error Boundaries​

بتمنع أي مشاكل في جزء معين من الـ UI إنها تأثر على باقي الموقع وبتخلي الموقع يبان قدام اليوزر بشكل ثابت حتى لو فيه مشاكل خلف الكواليس.

طيب احنا قولنا فوق هنعمل Wrap لأي Component متوقعين إنه ممكن يحصل فيه ايرور.

هنعرف إزاي إمتى نستخدمها طيب ؟؟؟​

لو انتا عندك Components بتعتمد على بيانات خارجية زي APIs فممكن تحط حواليها Error Boundaries وكمان لو عندك Components معقدة.

وبكده نكون خلصنا شرحنا عن الـ Error Boundaries. لو عندك سؤال أو استفسار، اكتب في الكومنتات. ومتنساش تقول رأيك في الشرح!