Le dilemme : Error Boundaries et composants fonctionnels

Comme nous l'avons établi, le mécanisme fondamental de capture d'erreur des Error Boundaries repose sur les méthodes de cycle de vie getDerivedStateFromError et componentDidCatch, qui ne sont disponibles que dans les composants classe. Cela pose un léger inconfort dans l'écosystème React moderne, où les composants fonctionnels et les Hooks sont devenus l'approche privilégiée pour la plupart des développements.

Devoir écrire un composant classe juste pour implémenter une Error Boundary peut sembler contre-intuitif ou rompre avec la cohérence d'une codebase entièrement basée sur les fonctions et les Hooks. Heureusement, des solutions existent pour contourner cette limitation apparente en abstrayant l'implémentation du composant classe.

Des bibliothèques tierces ont été créées pour fournir une API plus "Hooks-friendly" pour l'utilisation des Error Boundaries. La plus populaire et recommandée est react-error-boundary. Elle encapsule la logique du composant classe nécessaire en interne et expose une interface basée sur des composants et des props (et même un hook) qui s'intègre plus naturellement dans un workflow basé sur les Hooks.

Présentation de `react-error-boundary`

La bibliothèque react-error-boundary simplifie grandement l'utilisation des périmètres de gestion d'erreurs. Au lieu d'écrire votre propre composant classe Error Boundary, vous utilisez le composant fourni par la bibliothèque.

Les principales caractéristiques et props de ce composant sont :

• FallbackComponent (ou fallbackRender, fallback) : C'est la prop clé. Elle vous permet de fournir un composant fonctionnel (ou du JSX directement avec `fallback`) qui sera rendu lorsque l'ErrorBoundary intercepte une erreur. Ce composant de fallback reçoit généralement l'objet error et une fonction resetErrorBoundary comme props, vous permettant d'afficher des détails et d'offrir un moyen de réinitialiser l'état d'erreur.
• onError : Une fonction de rappel qui est exécutée lorsque l'ErrorBoundary intercepte une erreur. Elle reçoit error et errorInfo (avec la trace des composants), tout comme componentDidCatch. C'est l'endroit idéal pour logger les erreurs vers votre service de suivi.
• onReset : Une fonction de rappel appelée lorsque la fonction resetErrorBoundary (passée au FallbackComponent) est invoquée. Utile si vous devez effectuer une action pour tenter de réinitialiser l'état qui a causé l'erreur.
• resetKeys : Un tableau de valeurs. Si l'une de ces valeurs change, l'ErrorBoundary réinitialisera automatiquement son état d'erreur. Utile pour tenter automatiquement une récupération lorsque des données pertinentes (comme un ID d'utilisateur ou un paramètre de route) changent.

Cette approche vous permet de bénéficier de la puissance des Error Boundaries tout en écrivant votre logique de fallback et de gestion d'erreur dans des composants fonctionnels familiers.

Exemple d'utilisation de `react-error-boundary`

D'abord, installez la bibliothèque :

npm install react-error-boundary
# ou
yarn add react-error-boundary

Ensuite, utilisez le composant ErrorBoundary :

import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import MonComposantRisque from './MonComposantRisque'; // Un composant qui pourrait planter

// Composant fonctionnel pour afficher l'UI de fallback
function MonFallbackUI({ error, resetErrorBoundary }) {
  return (
    

      
Aïe ! Une erreur est survenue :
      
{error.message}
      Réessayer    
  );}function AppAvecBoundary() {  const handleLogError = (error, info) => {    // Envoyer l'erreur à un service de logging    console.log("Logging error:", error, info.componentStack);    // logErrorToService(error, info.componentStack);  };  return (    
      
Mon Application
      
Contenu stable ici.
       console.log('Tentative de reset')} // Optionnel        // resetKeys={['quelque_id']} // Optionnel      >                    
Autre contenu stable.
    
  );}export default AppAvecBoundary;

Comme vous pouvez le voir, vous n'avez pas eu besoin d'écrire de composant classe. Vous fournissez simplement un composant fonctionnel (`MonFallbackUI`) pour gérer l'affichage de l'erreur et un callback (`handleLogError`) pour le logging, ce qui s'intègre beaucoup plus naturellement dans une codebase basée sur les Hooks.

Le hook `useErrorHandler` pour les erreurs non interceptées

react-error-boundary fournit également un hook utile, useErrorHandler, pour gérer les erreurs qui ne sont normalement pas interceptées par les Error Boundaries, comme celles provenant des gestionnaires d'événements ou du code asynchrone.

Vous pouvez appeler `useErrorHandler(error)` à l'intérieur d'un bloc `catch` ou après avoir détecté une condition d'erreur. Ce hook va effectivement relancer l'erreur d'une manière qui sera interceptée par l' la plus proche fournie par la bibliothèque.

import React, { useState } from 'react';
import { useErrorHandler } from 'react-error-boundary';

function BoutonDangereux() {
  const [data, setData] = useState(null);
  const handleError = useErrorHandler(); // Obtenir le handler d'erreur

  const handleClick = async () => {
    try {
      const response = await fetch('/api/operation-riskmee');
      if (!response.ok) throw new Error('Echec de l\'opération');
      const result = await response.json();
      // Supposons que traiter result peut aussi lancer une erreur
      if (result.status === 'error') throw new Error(result.message);
      setData(result);
    } catch (error) {
      // Relancer l'erreur pour qu'elle soit attrapée par ErrorBoundary
      handleError(error); 
    }
  };

  return Lancer opération risquée;
}

Cela permet d'unifier la gestion des erreurs de rendu et des erreurs asynchrones/événementielles sous le même mécanisme d'UI de fallback défini par votre .

Conclusion : Simplifier la robustesse

L'utilisation de bibliothèques comme react-error-boundary est fortement recommandée pour implémenter les Error Boundaries dans les applications React modernes. Elles masquent la nécessité d'écrire des composants classe, offrent une API déclarative et conviviale pour les Hooks, et fournissent des fonctionnalités supplémentaires comme le hook useErrorHandler.

Cela rend la mise en place d'une gestion d'erreurs robuste plus simple et plus cohérente avec le reste de votre code React basé sur les fonctions et les Hooks, vous permettant de construire des applications plus résilientes sans sacrifier la maintenabilité ou les conventions de codage modernes.