Apprenez à créer une couche de gestion des erreurs robuste dans React avec ces deux méthodes populaires. En savoir plus sur la couche de gestion des erreurs dans React. Apprenez ce qu'est une couche de gestion des erreurs, comprenez pourquoi votre application React devrait en avoir une
Comme pour toute autre technologie, les applications React peuvent impliquer des erreurs. Par défaut, React répond à une erreur fatale par une page blanche. Ce n'est pas idéal, car les utilisateurs n'ont aucun moyen de comprendre ce qui s'est passé et pourquoi. C'est un problème pour les développeurs car une mauvaise gestion des erreurs affecte l'expérience utilisateur et la réputation de votre application. Heureusement, vous pouvez résoudre ce problème en ajoutant une couche de gestion des erreurs à votre application React.
Une couche de gestion des erreurs vous permet de détecter les erreurs et d'afficher des messages d'erreur clairs et utiles à l'utilisateur. Cela vous aide à éviter les plantages indésirables et à améliorer l'expérience utilisateur globale en conséquence. La centralisation de toute la logique de gestion des erreurs en un seul endroit offre plusieurs avantages et atténue le problème mentionné précédemment. C'est ce qu'est une couche de gestion des erreurs React !
Apprenons ce qu'est une couche de gestion des erreurs, comprenons pourquoi votre application React devrait en avoir une et voyons deux approches pour créer une couche de gestion des erreurs dans React.
Contenu
Dans React, une couche de gestion des erreurs est la partie de votre architecture frontale qui est responsable de la détection et de la gestion des erreurs qui se produisent dans votre application. En d'autres termes, il encapsule et centralise la logique de gestion des erreurs en un seul endroit.
Une couche de gestion des erreurs React s'occupe généralement de :
En ajoutant une couche de gestion des erreurs à votre architecture React, vous pouvez vous assurer que les erreurs survenant dans votre application seront gérées de manière efficace et cohérente. Ce ne sont là que quelques-uns des avantages qu'une couche de gestion des erreurs peut apporter à votre application. Continuez à lire pour en savoir plus.
Comme mentionné précédemment, React n'a pas de mécanisme intégré pour récupérer des erreurs survenues lors du rendu. Lorsqu'une erreur se produit, la seule option dont dispose React est de démonter l'intégralité de l'application. En conséquence, les utilisateurs verront un écran vide. C'est ainsi que React gère les erreurs par défaut et, comme vous pouvez l'imaginer, c'est loin d'être une solution idéale.
Avec une couche de gestion des erreurs, vous pouvez remplacer le comportement par défaut et éviter cela. Dans le détail, une couche de gestion des erreurs vous permet de :
Ce sont toutes de bonnes raisons pour lesquelles votre application React devrait avoir une couche de gestion des erreurs. Continuez à lire et découvrez deux approches que vous pouvez suivre pour ajouter une couche de gestion des erreurs à votre architecture frontale React.
Les limites d'erreurs sont le moyen officiel de gérer les erreurs depuis React 16 , qui a été publié en 2017. Plus précisément, les limites d'erreurs sont des composants React qui peuvent détecter les erreurs JavaScript se produisant n'importe où dans leur arborescence de composants enfants. Ils vous permettent d'afficher un composant d'interface utilisateur de secours lorsqu'une erreur se produit, qui gère l'erreur avec élégance et évite un crash fatal.
Notez que les limites d'erreur standard détectent les erreurs uniquement lors du rendu, dans les méthodes de cycle de vie et dans les constructeurs de composants. Ainsi, si un composant à l'intérieur de ces limites génère une erreur, la limite d'erreur l'interceptera. Sinon, il ignorera l'erreur.
Découvrons maintenant comment construire et utiliser une limite d'erreur dans React pour implémenter une couche de gestion des erreurs !
Pour créer une limite d'erreur dans React, vous devez définir un composant de classe qui implique :
Notez que React prend en charge les méthodes de cycle de vie des clés getDerivedStateFromError()et componentDidCatch()uniquement sur les composants de classe. Cela signifie qu'une limite d'erreur ne peut pas être un composant fonctionnel.
Voici à quoi devrait ressembler un composant de classe de limite d'erreur :
import React from "react";
import ErrorPage from "./ErrorPage";
export default class StandardErrorBoundary extends React.Component {
constructor(props) {
super(props);
// to keep track of when an error occurs
// and the error itself
this.state = {
hasError: false,
error: undefined
};
}
// update the component state when an error occurs
static getDerivedStateFromError(error) {
// specify that the error boundary has caught an error
return {
hasError: true,
error: error
};
}
// defines what to do when an error gets caught
componentDidCatch(error, errorInfo) {
// log the error
console.log("Error caught!");
console.error(error);
console.error(errorInfo);
// record the error in an APM tool...
}
render() {
// if an error occurred
if (this.state.hasError) {
return <ErrorPage />;
} else {
// default behavior
return this.props.children;
}
}
}
Lorsqu'une erreur se produit dans l'un de ses composants enfants, StandardErrorBoundaryl'intercepte, la consigne, la définit hasErrorsur true et restitue le <ErrorPage />composant d'interface utilisateur de secours.
Voici à quoi ErrorPagepourrait ressembler :
export default function ErrorPage(props) {
return (
<div className={"error-page"}>
<div className={"oops"}>Oops!</div>
<div className={"message"}>Something went wrong...</div>
</div>
);
}
Vous pouvez personnaliser et styliser votre composant d'interface utilisateur de secours comme vous le souhaitez. Un ErrorPagecomposant efficace doit informer les utilisateurs de ce qui s'est passé, sans trop entrer dans les détails ni les inquiéter.
Vous savez maintenant comment définir un composant de limitation d'erreur dans React ! Il ne reste plus qu'à voir comment l'utiliser.
Pour implémenter une couche de gestion des erreurs dans React, enveloppez simplement votre composant d'application de niveau supérieur avecStandardErrorBoundary :
<StandardErrorBoundary>
<MyApp />
</StandardErrorBoundary>
À partir de maintenant, toute erreur liée à React survenant dans l'application sera interceptée et gérée par la limite d'erreur.
Gardez à l'esprit qu'une application React peut avoir plusieurs limites d'erreur. Chacun d'eux se chargera de gérer les erreurs dans les différents sous-arbres de composants. Cependant, pour centraliser la logique d'erreur en un seul endroit, vous devez utiliser une seule limite d'erreur de niveau supérieur.
Les limites d'erreur sont un outil puissant, mais comportent également plusieurs limitations dont vous devez tenir compte. Creusons-les.
Comme mentionné dans la documentation officielle , les limites d'erreur ne peuvent pas détecter les erreurs dans :
En d'autres termes, une limite d'erreur ne peut gérer que les erreurs générées pendant les cycles de vie de React.
De plus, les limites d'erreur doivent être des composants de classe et ne prennent pas en charge les hooks.
Ces limitations peuvent facilement poser un problème pour votre application React, d'autant plus que JavaScript s'appuie fortement sur les rappels d'événements et le code asynchrone. C'est pourquoi nous devons explorer une approche différente de la gestion des erreurs dans les applications React modernes.
react-error-boundary est une bibliothèque npm React qui fournit un moyen simple et fiable de gérer les erreurs avec des limites d'erreur. Il simplifie le processus de création de limites d'erreur et offre des solutions efficaces pour surmonter les limites d'une limite d'erreur standard.
En termes simples, react-error-boundarysimplifie grandement la gestion des erreurs dans React. Ajoutez-le aux dépendances de votre projet avec :
npm install react-error-boundary
Ensuite, continuez à suivre le didacticiel et apprenez à créer une couche de gestion des erreurs dans React avec react-error-boundary.
react-error-boundaryexpose un ErrorBoundarycomposant, qui prend en charge plusieurs accessoires pour vous aider à créer un composant de limite d'erreur sans effort.Voici à quoi react-error-boundarypeut ressembler une limite d'erreur créée :
import ErrorPage from "./ErrorPage";
import { ErrorBoundary } from "react-error-boundary";
export default function ReactErrorBoundary(props) {
return (
<ErrorBoundary
FallbackComponent={ErrorPage}
onError={(error, errorInfo) => {
// log the error
console.log("Error caught!");
console.error(error);
console.error(errorInfo);
// record the error in an APM tool...
}}
>
{props.children}
</ErrorBoundary>
);
}
Le FallbackComponentprop contient le composant d'interface utilisateur de secours à afficher en cas d'erreur. Lorsque cela se produit, ErrorBoundaryappelle la fonction de rappel transmise à onError. Sinon, si aucune erreur ne se produit, ErrorBoundaryrend les composants enfants qu'il encapsule. En d'autres termes, cet extrait fait exactement ce que fait la limite d'erreur définie précédemment, mais avec de moins en moins de code lisible.
Comme nous l'avons fait précédemment, enveloppez votre composant de niveau supérieur React avec ReactErrorBoundarypour centraliser la logique de gestion des erreurs :
<ReactErrorBoundary>
<MyApp />
</ReactErrorBoundary>
N'oubliez pas qu'un composant de limite d'erreur construit avec react-error-boundarypeut être soit un composant fonctionnel, soit un composant de classe. Vous n'êtes plus limité aux composants de classe, et c'est à vous de prendre la meilleure décision en fonction de vos objectifs et de vos préférences.
react-error-boundaryfournit également un moyen de récupérer des erreurs détectées par le composant de limite d'erreur. Plus précisément, le onResetprop accepte une fonction de rappel qui ErrorBoundarypasse automatiquement au FallbackComponent.
Mettez à jour votre ReactErrorBoundarycomposant comme indiqué ci-dessous :
import ErrorPage from "./ErrorPage";
import { ErrorBoundary } from "react-error-boundary";
export default function ReactErrorBoundary(props) {
return (
<ErrorBoundary
FallbackComponent={ErrorPage}
onError={(error, errorInfo) => {
// log the error
console.log("Error caught!");
console.error(error);
console.error(errorInfo);
}}
onReset={() => {
// reloading the page to restore the initial state
// of the current page
console.log("reloading the page...");
window.location.reload();
// other reset logic...
}}
>
{props.children}
</ErrorBoundary>
);
}
La onReset fonction de rappel consiste simplement à recharger la page actuelle via JavaScript. Il s'agit de la logique de réinitialisation d'erreur la plus basique possible. Dans les applications plus complexes, vous devrez peut-être restaurer l'état de l'application à un point précédent ou mettre à jour l'état Redux.
Par défaut, ErrorBoundarypasse aux FallbackComponentdeux accessoires suivants :
Ainsi, vous pouvez maintenant ajouter un bouton de nouvelle tentative au ErrorPagecomme indiqué ci-dessous :
import "./ErrorPage.css";
export default function ErrorPage(props) {
return (
<div className={"error-page"}>
<div className={"oops"}>Oops!</div>
<div className={"message"}>Something went wrong...</div>
{props.resetErrorBoundary && (
<div>
<button className={"retry-button"} onClick={props.resetErrorBoundary}>
🔄 Try Again!
</button>
</div>
)}
</div>
);
}
La page de secours affichée en cas d'erreur aura désormais un message "Réessayez !" bouton. Lorsque l'utilisateur cliquera dessus, la onResetfonction sera exécutée et la page en cours sera rechargée. Si l'erreur ne se trouve pas dans le rendu initial, mais résulte d'une interaction particulière, l'application recommencera à fonctionner comme prévu.
Super! Vous pouvez maintenant récupérer des erreurs !
Une autre grande fonctionnalité offerte par react-error-boundary est le useErrorHandler()hook. Cela vous permet de détecter des erreurs qui ne seraient autrement pas détectées par une limite d'erreur React traditionnelle. Cela signifie que vous pouvez tirer parti de useErrorHandler()pour intercepter les erreurs lors des requêtes API, des gestionnaires d'événements, etc.
Supposons qu'une des pages de votre application React repose sur un appel d'API crucial. Lorsque cette API échoue, vous souhaitez générer une erreur et la gérer dans la couche d'erreur. Étant donné que les appels d'API impliquent du code asynchrone, vous ne pouvez pas le faire avec une limite d'erreur standard. Grâce à useErrorhandler(), vous pouvez obtenir le résultat souhaité avec :
import { useEffect } from "react";
import { useErrorHandler } from "react-error-boundary";
export default function MyPageComponent(props) {
const handleError = useErrorHandler();
useEffect(() => {
// API call
fetchSomeData().then(() => {
// ...
}).catch((e) => {
// propagate the error to the error boundary
handleError(e);
})
}, [])
// return ...
}
De même, vous pouvez adopter useErrorhandler()dans d'autres situations où les limites d'erreur standard sont insuffisantes. Gardez également à l'esprit que useErrorhandler()propage l'erreur à n'importe quelle limite d'erreur, qu'elle soit implémentée avec react-error-boundaryou avec l'approche standard.
Et voilà! Votre couche de gestion des erreurs React est plus puissante que jamais !
Vous pouvez jouer avec l' application de démonstration en direct React ci-dessous pour voir comment les deux approches se comportent différemment :
Lorsque vous désactivez la couche de gestion des erreurs, le premier bouton entraînera une page vierge. N'oubliez pas que c'est ainsi que React gère nativement les erreurs. D'autre part, l'erreur asynchrone sera enregistrée mais rien de plus ne se produira.
Si vous utilisez la couche de gestion des erreurs avec une limite d'erreur standard, le premier bouton mènera à la page d'erreur. Pourtant, l'erreur asynchrone ne sera pas interceptée comme souhaité.
Avec la react-error-boundarycouche d'erreur activée, les erreurs de synchronisation et asynchrones seront interceptées et traitées comme souhaité. De plus, lorsque vous cliquez sur "Réessayer !" bouton, la page se rechargera et l'application récupérera de l'erreur.
Si vous souhaitez explorer le code de l'application de démonstration ou le tester localement, clonez le référentiel qui prend en charge cet article avec :
git clone "https://github.com/Tonel/error-handling-layer-react"
Ensuite, lancez l'application React sur votre machine avec :
cd "error-handling-layer-react"
npm install
npm run start
Super! Vous savez maintenant tout ce que vous devez savoir sur la gestion des erreurs dans React !
Dans ce didacticiel, vous avez appris ce qu'est une couche de gestion des erreurs, ses avantages essentiels dans le monde frontal et comment l'intégrer dans une application React. Une couche de gestion des erreurs n'est rien de plus qu'un composant de limite d'erreur qui intercepte et gère les erreurs avec élégance. Cela vous permet de consolider la logique de gestion des erreurs dans une seule couche de l'architecture de l'application React, ce qui facilite le débogage. Comme le montre un exemple complet, l'implémentation d'une couche de gestion des erreurs dans React est simple et ne prend que quelques minutes.
Source : https://semaphoreci.com
#react #reactjs