Morioh
Login
Zachary Palmer

Zachary Palmer

11 months ago

2 façons de créer une couche de gestion des erreurs dans React

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

  • Qu'est-ce qu'une couche de gestion des erreurs dans React ?
  • Pourquoi votre application React devrait-elle avoir une couche de gestion des erreurs ?
  • Couche de gestion des erreurs avec des limites d'erreur dans React
  • Couche de gestion des erreurs avec react-error-boundary
  • Couche de gestion des erreurs en action
  • Conclusion

Qu'est-ce qu'une couche de gestion des erreurs dans React ?

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 :

  • Détection d'erreurs : la couche intercepte les erreurs qui se produisent lors de l'exécution de l'application frontale.
  • Gestion des erreurs : après avoir détecté une erreur, la couche la gère avec élégance. En particulier, il empêche l'erreur de planter votre application et présente à la place une page d'erreur personnalisée aux utilisateurs. Dans les coulisses, la couche peut également consigner l'erreur ou la signaler à un service de surveillance des erreurs.

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.

Pourquoi votre application React devrait-elle avoir une couche de gestion des erreurs ?

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 :

  • Évitez les plantages : en cas d'erreur, la couche l'intercepte et vous permet de gérer l'erreur comme vous le souhaitez. Cela signifie empêcher votre application de planter en raison d'erreurs non gérées.
  • Améliorer l'expérience utilisateur : chaque fois que la couche détecte une erreur, elle affiche une belle page d'erreur à l'utilisateur final. Les utilisateurs ont tendance à préférer utiliser une application qui fournit des messages d'erreur utiles plutôt qu'une application qui plante.
  • Centraliser la logique de gestion des erreurs : la couche stocke toute la logique de gestion des erreurs de l'application au même endroit. Cela facilite le traitement cohérent des erreurs et intègre la journalisation ou la surveillance des erreurs dans votre application. Vous pouvez ensuite utiliser ces informations collectées pour identifier la cause première des erreurs, les déboguer et les corriger.

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.

Couche de gestion des erreurs avec des limites d'erreur dans 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 !

Création d'un composant de limite d'erreur

Pour créer une limite d'erreur dans React, vous devez définir un composant de classe qui implique :

  • Variable d'état hasError:utilisée pour déterminer si la limite d'erreur a intercepté une erreur.
  • Une staticméthode appeléegetDerivedStateFromError() : une méthode de cycle de vie React qui est invoquée après qu'un composant descendant ait renvoyé une erreur. La valeur renvoyée par la méthode met à jour l'état du composant de limite d'erreur.
  • Une componentDidCatch()méthode : une méthode spéciale de cycle de vie React qui est appelée lorsque la limite d'erreur détecte une erreur. Vous pouvez l'utiliser pour consigner l'erreur ou la signaler à un système de gestion des performances des applications .
  • Une render()méthode avec if-elseune logique : en cas d'erreur, elle renvoie le composant d'interface utilisateur de secours. Sinon, il affiche les composants enfants enveloppés par la limite d'erreur.

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.

Utilisation de votre limite d'erreur

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.

Limites de cette approche

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.

Couche de gestion des erreurs avecreact-error-boundary

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.

Premiers pas avec le composant ErrorBoundary

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.

Réinitialiser votre application après une erreur

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 :

  • error: stocke l'objet d'erreur intercepté par la limite d'erreur.
  • resetErrorBoundary: contient la fonction de rappel passée à la onResetprop, si elle est définie.

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 !

Gestion des erreurs dans le code asynchrone

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 !

Couche de gestion des erreurs en action

Vous pouvez jouer avec l' application de démonstration en direct React ci-dessous pour voir comment les deux approches se comportent différemment :

Ouvrir le bac à sable

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 !

Conclusion

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

1.50 GEEK