Si vous avez travaillé avec React pendant un certain temps, vous avez peut-être rencontré un message indiquant "Envisagez d'ajouter une limite d'erreur à votre arborescence pour personnaliser le comportement de gestion des erreurs. » Vous avez peut-être vu cela dans la console de votre navigateur chaque fois que vos composants accident.
React recommande d'utiliser une limite d'erreur pour offrir une meilleure expérience utilisateur lorsqu'une erreur se produit.
Qu'est-ce que la classe de limite d'erreur dans React ?
Les limites d'erreur fonctionnent comme bloc try/catch en JavaScript vanille. La différence est qu'ils détectent les erreurs qui se produisent dans les composants React. Si une erreur se produit dans un composant de l'interface utilisateur, React démonte l'arborescence de ce composant et la remplace par l'interface utilisateur de secours que vous avez définie. Cela signifie qu'une erreur n'affecte que le composant dans lequel elle se produit et que le reste de l'application fonctionne comme prévu.
Selon le Réagir à la documentation, les classes de limites d'erreur n'interceptent pas les erreurs dans :
- Gestionnaires d'événements.
- Code asynchrone.
- Code côté serveur.
- Erreurs générées dans la limite d'erreur elle-même (plutôt que dans ses enfants).
Pour les erreurs ci-dessus, vous pouvez utiliser le bloc try/catch.
Par exemple, pour intercepter une erreur qui se produit dans le gestionnaire d'événements, utilisez le code suivant :
fonctionComposant d'événement() {
constante [erreur, setError] = useState(nul)constante poignéeClic = () => {
essayer {
// Faire quelque chose
} attraper (erreur) {
setError (erreur)
}
}
retour (
<>
<div>{erreur? erreur: ""}div>
<boutonsur clic={handleClick}>Boutonbouton>
)
}
Utilisez les limites d'erreur pour détecter les erreurs dans les composants React uniquement.
Création d'une classe de limite d'erreur
Vous pouvez créer une limite d'erreur en définissant une classe qui contient une ou les deux méthodes suivantes :
- statique getDerivedStateFromError()
- composantDidCatch()
La fonction getDerivedStateFromError() met à jour l'état du composant une fois l'erreur détectée, tandis que vous pouvez utiliser componentDidCatch() pour consigner les informations d'erreur dans la console. Vous pouvez également envoyer les erreurs à un service de rapport d'erreurs.
Vous trouverez ci-dessous un exemple montrant comment créer une classe de limite d'erreur simple.
classeLimite d'erreurs'étendRéagir.Composant{
constructeur(accessoires) {
super(accessoires);
ce.état = { erreur: FAUX };
}statiquegetDerivedStateFromError(erreur){
// Mettre à jour l'état pour que le prochain rendu affiche l'interface utilisateur de secours.
retour { erreur: erreur };
}componentDidCatch (error, errorInfo) {
// Consigne l'erreur à un service de rapport d'erreurs
}rendre() {
si (ce.État.erreur) {
// Créez une interface utilisateur de secours personnalisée ici
retour<h1>Il semble y avoir un problème.h1>;
}
retource.accessoires.enfants;
}
}
exporterdéfaut Limite d'erreur ;
Lorsqu'une erreur se produit, getDerivedStateFromError() mettra à jour l'état et déclenchera par conséquent un nouveau rendu qui affichera l'interface utilisateur de secours.
Si vous ne souhaitez pas créer la classe de limite d'erreur à partir de zéro, utilisez la package NPM react-error-boundary. Ce package fournit le composant ErrorBoundary qui encapsule les composants qui, selon vous, pourraient générer des erreurs.
Utilisation de la classe de limite d'erreur
Pour gérer les erreurs, encapsulez les composants avec le composant de classe limite d'erreur. Vous pouvez envelopper le composant de niveau supérieur ou des composants individuels.
Si vous encapsulez le composant de niveau supérieur, la classe de limite d'erreur gérera les erreurs générées par tous les composants de l'application React.
<Limite d'erreur>
<Application/>
Limite d'erreur>
Si vous encapsulez un composant individuel avec un ErrorBoundary, une erreur dans ce composant n'affectera pas le rendu d'un autre composant.
<Limite d'erreur>
<Profil/>
Limite d'erreur>
Par exemple, une erreur dans le composant de profil n'affectera pas le rendu d'un autre composant comme le composant Hero. Bien que le composant de profil puisse se bloquer, le reste de l'application fonctionnera correctement. C'est bien mieux que de rendre l'écran de secours blanc générique fourni par React.
Gestion des erreurs en JavaScript
Les erreurs de programmation peuvent être frustrantes pour les développeurs et les utilisateurs. Ne pas gérer les erreurs peut exposer vos utilisateurs à une interface utilisateur laide avec des messages d'erreur difficiles à comprendre.
Lors de la construction de votre composant React, créez une classe de limite d'erreur à partir de zéro ou en utilisant le package react-error-boundary pour afficher des messages d'erreur conviviaux.
