Qu'est-ce qu'une limite d'erreur ?

Lors de la création d'applications, les erreurs sont inévitables. Ils peuvent provenir des API, de l'interface utilisateur ou de plusieurs autres endroits.

Il est très important de gérer ces erreurs avec élégance et de maintenir une bonne UX malgré ces erreurs.

Error Boundary est l'un de ces moyens de gestion des erreurs dans React.

Comment la limite d’erreur est-elle utile ?

Pour comprendre cela, comprenons la situation avant l'introduction de la limite d'erreur.

Avant les limites d'erreur, les erreurs survenant à l'intérieur des composants finissaient par se propager et casser l'interface utilisateur ou rendre l'écran blanc.

Cela a provoqué une très mauvaise UX.

Error Boundary nous aide à gérer ces erreurs et à afficher une interface utilisateur de secours au lieu de casser l'interface utilisateur ou l'écran blanc affiché.

Comment utiliser la limite d'erreur ?

React v16 a officiellement introduit la limite d'erreur.

Il s'agit d'un composant basé sur une classe qui peut être utilisé pour envelopper votre application.

Il accepte qu'une interface utilisateur de secours soit affichée au cas où votre application aurait des erreurs ou autrement, il restitue simplement le composant enfant pour reprendre le flux normal de votre application.

Voici comment la documentation React recommande de l'utiliser,

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;
  }
}

Quel est le problème avec la limite d'erreur de React ?

Il ne peut pas détecter les erreurs se produisant dans,

• Gestionnaires d'événements (ces erreurs doivent être gérées avec des blocs try-catch)
• Code asynchrone (API, setTimeout, requestAnimationFrame etc.)
• Rendu côté serveur
• L'erreur qui se produit dans la limite d'erreur elle-même
• Cela ne fonctionne pas avec les composants fonctionnels. Bien que nous puissions le faire fonctionner avec quelques modifications de code.
• Les crochets ne peuvent pas être utilisés à l'intérieur.

Quelle est la solution ?

Il existe un package npm appelé react-error-boundary qui est un wrapper au-dessus du composant Error Boundary traditionnel.

Grâce à ce package, nous sommes en mesure de surmonter tous les problèmes rencontrés dans le composant traditionnel Error Boundary.

Comment l'utiliser?

Vous pouvez envelopper l'intégralité de votre application avec ou vous pouvez envelopper des composants individuels avec .

La granularité de la mise en œuvre dépend de vous.

Comprenons comment l'utiliser.

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

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

}

Il s'agit de l'exemple le plus simple d'utilisation de ErrorBoundary. Il y a bien plus dans cette bibliothèque.

Comprendre l'API de réaction-erreur-limite

Essayons de comprendre l'API avec différents scénarios.

1. Je souhaite afficher une interface utilisateur de secours générique pour les erreurs dans l'application

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

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

2. Je souhaite afficher des détails d'erreur spécifiques dans mon composant de secours

 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 */
 
 }

 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 */
 
 }

 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 */
 
 }

 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 
 }

"use client";