Maîtriser les limites des erreurs dans React : un guide pour une gestion efficace des erreurs

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 cassaient l'interface utilisateur ou rendaient l'écran blanc.

Cela a provoqué une très mauvaise UX.

Error Boundary nous aide à gérer de telles 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 enfants pour reprendre le flux normal de votre application.

C'est ainsi que 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 <ErrorBoundary fallback={<div>Something went wrong</div>}>
/* rest of your component */
</ErrorBoundary>
}

C'est l'exemple le plus simple d'utilisation d'ErrorBoundary. Il y a 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 <ErrorBoundary fallback={<div>Something went wrong</div>}>
 /* rest of your component */
 </ErrorBoundary>
 }

2. Je souhaite afficher les 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 (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre style={{ color: "red" }}>{error.message}