import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Loading...

في هذا المثال:

• React.lazy يستخدم للتحميل الكسول لـ MyComponent.
• Suspense يغلف LazyComponent.
• توفر الخاصية fallback واجهة مستخدم احتياطية (مؤشر تحميل) يتم عرضها أثناء تحميل MyComponent.

تنفيذ Error Boundaries

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

كيف تعمل Error Boundaries

Error Boundaries هي مكونات فئة تحدد طرق دورة الحياة التالية:

• static getDerivedStateFromError(error): يتم استدعاء هذه الطريقة بعد أن يتم طرح خطأ بواسطة مكون فرعي. يتلقى الخطأ الذي تم طرحه كوسيطة ويجب أن يُرجع قيمة لتحديث الحالة.
• componentDidCatch(error, info): يتم استدعاء هذه الطريقة بعد أن يتم طرح خطأ بواسطة مكون فرعي. يتلقى الخطأ وكائن معلومات يحتوي على معلومات حول المكون الذي طرح الخطأ. هذا هو المكان المثالي لتسجيل الخطأ في خدمة مثل Sentry أو Bugsnag.

هام: Error Boundaries تلتقط فقط الأخطاء في المكونات الموجودة أسفلها في الشجرة. لا يمكن لـ Error Boundary التقاط خطأ داخل نفسها.

مثال: تنفيذ Error Boundary الأساسي

            
import React, { Component } from 'react';

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

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // You can also log the error to an error reporting service
 console.error('Caught error: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return 
Something went wrong.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

لاستخدام Error Boundary، قم بتغليف أي مكون قد يطرح خطأ:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

دمج Suspense و Error Boundaries

تأتي القوة الحقيقية من الجمع بين Suspense و Error Boundaries. يتيح لك ذلك التعامل مع كل من حالات التحميل والأخطاء بأمان داخل تطبيقك. الممارسة الموصى بها هي تغليف Suspense بـ Error Boundary. بهذه الطريقة، إذا فشل المكون الذي يتم تحميله ببطء في التحميل (على سبيل المثال، خطأ في الشبكة)، فيمكن لـ Error Boundary التقاط الخطأ وعرض رسالة مفيدة للمستخدم.

مثال: الجمع بين Suspense و Error Boundaries

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Loading...