Formation Apprendre React : Capturer les erreurs avec ErrorBoundary

Dans le cadre d'une application, il arrive parfois que certains composants aient des erreurs de rendu. Le comportement par défaut de React est de faire remonter l'erreur de fonction en fonction, ce qui a pour conséquence de faire planter l'entièreté de l'application en cas de problème. Il est cependant possible d'utiliser le système d'ErrorBoundary pour capturer les erreurs provenant de composants enfants.

Malheureusement, ce composant n'est pas compatible avec la syntaxe fonctionnelle des composants et on préfèrera utiliser la librairie react-error-boundary qui dispose d'une syntaxe plus simple.

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

function App () {

    return <ErrorBoundary 
        fallback={<div>Une erreur est survenue</div>}>
      <SomeOtherComponents />
    </ErrorBoundary>
}

Il est aussi possible d'utiliser un composant pour gérer l'affichage de l'erreur.

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

function Fallback({ error, resetErrorBoundary }) {
  // On peut appeler resetErrorBoundary() pour réinitialiser l'erreur et tenter un nouveau rendu.

  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
    </div>
  );
}

function App () {
    return <ErrorBoundary 
        FallbackComponent={PageError}>
      <SomeOtherComponents />
    </ErrorBoundary>
}