ما هي حدود الخطأ؟

أثناء إنشاء التطبيقات، تكون الأخطاء أمرًا لا مفر منه. وقد تأتي من واجهات برمجة التطبيقات، أو واجهة المستخدم، أو من عدة أماكن أخرى.

من المهم جدًا التعامل مع هذه الأخطاء بأمان والحفاظ على تجربة مستخدم جيدة بالرغم من هذه الأخطاء.

حدود الخطأ هي إحدى طرق معالجة الأخطاء في React.

---

كيف تساعد حدود الخطأ؟

لفهم ذلك، دعونا نفهم الموقف قبل تقديم حدود الخطأ.

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

تسبب هذا في تجربة مستخدم سيئة حقًا.

يساعدنا حد الخطأ في التعامل مع مثل هذه الأخطاء وعرض واجهة مستخدم احتياطية بدلاً من كسر واجهة المستخدم أو الشاشة البيضاء المعروضة.

---

كيفية استخدام حدود الخطأ؟

قدم React v16 رسميًا حدود الخطأ.

إنه مكون قائم على الفئة ويمكن استخدامه لتغليف التطبيق الخاص بك.

يقبل عرض واجهة المستخدم الاحتياطية في حالة وجود أخطاء في تطبيقك أو غير ذلك، فهو ببساطة يعرض المكون الفرعي لاستئناف التدفق الطبيعي لتطبيقك.

هذه هي الطريقة التي توصي بها وثائق React باستخدامها،

class ErrorBoundary extends React.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) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

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

    return this.props.children;
  }
}

---

ما المشكلة في حدود الخطأ في React؟

لا يمكن اكتشاف الأخطاء التي تحدث في،

• معالجات الأحداث (يجب معالجة هذه الأخطاء باستخدام كتل محاولة الالتقاط)
• رمز غير متزامن (واجهات برمجة التطبيقات، setTimeout، requestAnimationFrame وما إلى ذلك)
• العرض من جانب الخادم
• الخطأ الذي يحدث في Error Boundary نفسه
• لا يعمل مع المكونات الوظيفية. على الرغم من أننا يمكن أن نجعلها تعمل مع بعض التغييرات في التعليمات البرمجية.
• لا يمكن استخدام الخطافات بداخله.

---

ما هو الحل؟

هناك حزمة npm تسمى حدود الخطأ التفاعلي وهي عبارة عن غلاف أعلى مكون حدود الخطأ التقليدي.

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

---

كيفية استخدامها؟

يمكنك تغليف التطبيق بالكامل أو يمكنك تغليف المكونات الفردية بامتداد .

دقة التنفيذ متروك لك.

دعونا نفهم كيفية استخدامه.

import React from 'react';
import { ErrorBoundary } from "react-error-boundary";

const App = () => {
return Something went wrong}>
/* rest of your component */

}

هذا هو أبسط مثال لاستخدام ErrorBoundary. هناك المزيد لهذه المكتبة.

---

فهم واجهة برمجة التطبيقات لحدود خطأ التفاعل

دعونا نحاول فهم واجهة برمجة التطبيقات (API) بسيناريوهات مختلفة.

1. أريد إظهار واجهة مستخدم احتياطية عامة للأخطاء في التطبيق

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const App = () => {
 return Something went wrong}>
 /* rest of your component */
 
 }

2. أرغب في عرض تفاصيل خطأ محددة في المكون الاحتياطي الخاص بي

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 function fallbackRender({ error, resetErrorBoundary }) {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

); } تطبيق ثابت = () => { العودة { // أعد ضبط حالة تطبيقك حتى لا يحدث الخطأ مرة أخرى }} > /* باقي المكون */ }

بدلاً من العرض الاحتياطي أو الاحتياطي، يمكنك أيضًا استخدام مكون React.

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

); } تطبيق ثابت = () => { العودة { // أعد ضبط حالة تطبيقك حتى لا يحدث الخطأ مرة أخرى }} > /* باقي المكون */ }

3. أريد تسجيل أخطائي

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const logError = (error: Error, info: { componentStack: string }) => {
   // Do something with the error, e.g. log to an external API
 };

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }
 // You can use fallback / fallbackRender / FallbackComponent anything
 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

); } // يمكنك استخدام أي شيء احتياطي / FallbackRender / FallbackComponent تطبيق ثابت = () => { العودة { // أعد ضبط حالة تطبيقك حتى لا يحدث الخطأ مرة أخرى }} > /* باقي المكون */ }

4. أريد اكتشاف الأخطاء في معالجات الأحداث والتعليمات البرمجية غير المتزامنة

 import { useErrorBoundary } from "react-error-boundary";

 function Example() {
   const { showBoundary } = useErrorBoundary();
   const getGreeting = async(name) => {
     try {
         const response = await fetchGreeting(name);
         // rest of your code
     } catch(error){
          // Show error boundary
         showBoundary(error);
     }
   }
   useEffect(() => {
    getGreeting()
   });

   return 
 }

---

عدد قليل من مسكتك

ErrorBoundary هو أحد مكونات العميل. يمكنك فقط تمرير الدعائم إليها القابلة للتسلسل أو استخدامها في الملفات التي تحتوي على "استخدام العميل"؛ التوجيه.

1. ما هي الدعامة القابلة للتسلسل؟

تعني الخاصية Serilzable أنه يمكن تحويلها إلى دفق بايت بطريقة يمكن من خلالها تحويل دفق البايت مرة أخرى إلى الدعامة الأصلية.

الطريقة الشائعة للقيام بذلك في Javascript هي JSON.stringify() & JSON.parse().

2. كيفية استخدام "استخدام العميل"؛ التوجيه؟

ما عليك سوى ذكر ذلك في أعلى الملف

"use client";

---

هناك عدد قليل من الاختلافات التي يمكنك استخدامها. لكن هذه المقالة جيدة بما يكفي لتبدأ بها.

راجع وثائقهم الكاملة هنا.

يرجى إبلاغي في التعليقات إذا وجدت ذلك مفيدًا.

تعليمات سعيدة!