Passer au contenu principal

Gestion des erreurs dans React avec ErrorBoundary

Les applications peuvent rencontrer diverses erreurs lors de leur fonctionnement. Dans de nombreux cas, ces erreurs se produisent dans des fonctions telles que les gestionnaires d'événements, où leur impact est généralement limité. Elles s'affichent alors dans la console, fournissant des indications sur ce qui s'est passé, et l'application continue de fonctionner.

Cependant, si une erreur survient dans des parties critiques du code, comme dans un useEffect ou directement dans le composant lui-même, cela peut entraîner des conséquences plus graves, pouvant aller jusqu'au plantage complet de l'application.

Lors du développement d'une application avec React, celle-ci est généralement composée de plusieurs composants interconnectés. Par conséquent, lorsqu'une erreur se produit dans un composant, elle peut potentiellement provoquer l'échec de l'ensemble de l'application. C'est là qu'intervient le concept d'ErrorBoundary.

Implémentation de ErrorBoundary

React ne fournit pas de composant ErrorBoundary natif. Il est nécessaire de créer un composant ErrorBoundary et d'y définir votre implémentation.

import React from 'react';

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

  // Met à jour l'état pour indiquer qu'une erreur a été rencontrée
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  // Se déclenche après une erreur. Cela peut être utilisé pour enregistrer l'erreur dans les logs
  componentDidCatch(error, info) {
    console.error(error, info.componentStack);
  }

  // Rend le composant défini dans la propriété fallback en cas d'erreur, sinon rend les enfants du composant ErrorBoundary
  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

Pour utiliser ce composant, il suffit d'enrober vos composants avec ErrorBoundary. Cela permettra d'attraper les erreurs et d'éviter qu'elles ne se propagent à l'ensemble de l'application.

<ErrorBoundary fallback={<p>Une erreur est survenue...</p>}>
  <MonComposant />
</ErrorBoundary>

Le prop fallback contient le composant à afficher en cas d'erreur.

Bien qu'il soit possible de créer votre propre ErrorBoundary, il est souvent recommandé d'utiliser la bibliothèque react-error-boundary. Cette bibliothèque fonctionne de la même manière que notre implémentation, mais offre des fonctionnalités supplémentaires très utiles, telles que la gestion des réinitialisations avec le prop onReset.

Où placer les ErrorBoundary ?

Vous pouvez envelopper les composants racines de votre routage avec ErrorBoundary pour afficher un message générique à l'utilisateur, par exemple : « Une erreur est survenue , veuillez réessayer ultérieurement » Cette approche permet de gérer les erreurs à un niveau global.

Une autre méthode consiste à envelopper des composants spécifiques avec des ErrorBoundary, ce qui permet de localiser les erreurs sans affecter le reste de l’application. Cette méthode est particulièrement intéressante dans des scénarios comme un tableau de bord, où plusieurs graphiques sont affichés. Si l'un des graphiques plante, vous souhaitez que les autres restent visibles et fonctionnels, assurant ainsi une meilleure expérience utilisateur.

Retour en haut