ErrorBoundary حدود الخطأ (Error Boundary)

آخر تحديث: 2026-11-03

ErrorBoundary حدود الخطأ (Error Boundary)

حد الخطأ شبكة أمان على مستوى المكوّن: يصطاد الأخطاء في شجرة الابن ويرسم واجهة بديلة بدل شاشة بيضاء. إنه مكوّن class (getDerivedStateFromError / componentDidCatch) — بلا نظير Hook قبل React 19.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

class ErrorBoundary extends Component {
  state = { hasError: false }
  static getDerivedStateFromError() { return { hasError: true } }
  componentDidCatch(error, info) { /* report */ }
  render() { return this.state.hasError ? <Fallback/> : this.props.children }
}

⚙️ المعاملات

القيمة المرجعة：لا شيء (مكوّن class). يرسم الأبناء وهو بخير؛ وواجهة بديلة حين يرمي ابنٌ خطأً.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

لا شاشة بيضاء: يظهر البديل «حدث خطأ ما، لكن الصفحة حيّة» — صُطِيد خطأ رسم Bomb بواسطة الحد.

💡 النقاط الأساسية

🏷️ المزيد من البيانات والهندسة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

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

من نحن