تعلم Error Boundaries في React لحماية الموقع

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

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

ايه هي Error Boundaries؟ ​

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

إزاي نعمل 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;
}
}

إزاي نستخدم Error Boundary؟ ​

بكل بساطة، هنعمل Wrap لأي Component ممكن تواجه مشاكل بالـError Boundary اللي عملناه فوق:

<ErrorBoundary> <MyProblematicComponent /> </ErrorBoundary>

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

فايدة Error Boundaries ​

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

متى تستخدم Error Boundaries؟ ​

• حوالي أي Component معقد أو ممكن يحصل فيه Error.
• حول الـComponents اللي بتتعامل مع بيانات خارجية زي API Requests.
• في أي مشروع كبير عشان تحافظ على ثبات الـUI قدام المستخدمين.

Error Boundaries هتخليك تتحكم في الأخطاء في React بكل سهولة، تمنع سقوط الموقع كله، وتدي رسالة واضحة للمستخدمين بدل ما يلاقوا صفحة فاضية .