Comment gérer les erreurs dans React

Meilleures pratiques pour gérer les erreurs dans React à l'aide de limites d'erreur

Lorsque vous travaillez avec un composant, lorsqu'une erreur se produit à l'intérieur de ce code de composant, React démontera toute l'arborescence des composants de React, ce qui rendrarien. C'est la manière React de gérer les plantages.

Vous ne voulez pas que les erreurs se manifestent à vos utilisateurs. React décide d'afficher une page vierge.

Cependant, ce n'est que la valeur par défaut. Avoir une page vierge n'est que légèrement mieux que montrer des messages cryptés aux utilisateurs, mais vous devriez avoir un meilleur moyen.

Si vous êtes en mode développement, toute erreur déclenchera une trace de pile détaillée imprimée sur lenavigateur DevToolsconsole. Pas en production cependant, bien sûr, où vous ne voulez pas vraiment que les bogues soient imprimés à vos utilisateurs.

En production, vous devez intercepter les erreurs et montrer une sorte de message utile à la personne qui utilise l'application.

C'est ici quelimites d'erreurentrer en jeu.

Avec une limite d'erreur, vous isolez des parties de l'application et gérez les erreurs localement.

Une limite d'erreur est un composant React qui implémente lecomponentDidCatch()événement du cycle de vie et encapsule les autres composants:

class ErrorHandler extends React.Component {
  constructor(props) {
    super(props)
    this.state = { errorOccurred: false }
  }

componentDidCatch(error, info) { this.setState({ errorOccurred: true }) logErrorToMyService(error, info) }

render() { return this.state.errorOccurred ? <h1>Something went wrong!</h1> : this.props.children } }

et dans un composant JSX, vous l'utilisez comme ceci:

<ErrorHandler>
  <SomeOtherComponent />
</ErrorHandler>

Quand une erreur se produit à l'intérieurSomeOtherComponentou d'autres composants enfants, et dans l'ensemble du sous-arbre des composants qu'ils contiennent,ErrorHandlerva l'intercepter et vous pouvez gérer l'erreur avec élégance.

Dans le cas ci-dessus, inspiré de la documentation officielle de React, nous avons unerrorOccurredstate propriété qui, lorsqu'elle est définie sur true, permet à l'interface de rendre l'interface utilisateur de gestion des erreurs, sinon elle rend l'arborescence de l'interface utilisateur normale de l'application.

À l'intérieurcomponentDidCatch(), qui reçoit 2 arguments décrivant l'erreur, nous appelons égalementlogErrorToMyService()qui est juste un stub pour une fonction qui utilise un service comme Sentry, Roller, Airbrake ou d'autres qui peuvent enregistrer l'erreur d'une manière agréable pour que vous puissiez le voir, vous n'avez donc pas à vous fier aux utilisateurs qui vous disent qu'il y a une erreur à remarquez un problème.

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: