Comment travailler avec des types d'erreur personnalisés dans les limites d'erreur de React ?

Question

J'ai une limite d'erreur définie en haut de mon arbre de composants, comme ceci :

renderApp() {
  return (
    <ErrorBoundary>
      { this.props.children }
    </ErrorBoundary>
  );
}

Si une erreur se retrouve dans l'arbre, la frontière d'erreur rend une page d'erreur simple, en passant l'erreur elle-même comme une propriété :

componentDidCatch(error, info) {
  this.setState({
    hasError: true,
    error
  });
}

render() {
  if (this.state.hasError) {
    return (
      <ErrorPage error={this.state.error}/>
    );
  }
  return this.props.children;
}

J'ai commencé à définir des erreurs personnalisées à lancer dans l'application lorsque certaines exceptions sont levées, en étendant simplement la classe Error :

class CustomError extends Error {}

Ensuite, dans mes composants, je lance ces erreurs personnalisées, que j'aimerais détecter dans ma page d'erreur et construire une messagerie basée sur leur type. Par exemple, si je lance cette erreur plus bas dans l'arbre des composants :

throw new CustomError('This is the custom error message');

J'aimerais pouvoir détecter le type d'erreur dans ma page d'erreur et afficher des messages pertinents pour ce type.

import CustomError from '../../errors/custom-error';

// This code has obviously been edited for brevity's sake

class ErrorPage extends React.Component {
  render() {
    if (this.props.error instanceof CustomError) {
      errorMessage = "A custom error occurred.";
    }
    return <div>{errorMessage}</div>;
  }
}

Cependant, dans la page d'erreur, React reconnaît seulement que this.props.error est une instanceof Error et non de CustomError . Si je lance, disons, un TypeError au lieu d'un CustomError alors la page d'erreur peut détecter le type d'erreur. Mais en passant le type d'erreur personnalisé, la page d'erreur ne sait rien du type d'erreur, si ce n'est qu'il s'agit d'une erreur, ce qui va évidemment à l'encontre de l'objectif de la définition de types d'erreur personnalisés. Qu'est-ce que j'ai manqué ici ? S'agit-il d'un bug dans React ? Toute contribution serait la bienvenue.

J'ai découvert ce problème en utilisant React 16.0.0, j'ai mis à jour vers 16.2.0 et le problème persiste.

Answer 1

Le problème ne vient pas de React, mais de Babel, que vous utilisez, je suppose. La façon dont les classes sont compilées ne supporte pas l'utilisation de instanceof avec des classes qui étendent les classes natives comme Error .

Vous pouvez voir un exemple de ce comportement ici : https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEDCCuEAuB7AtgUQE5ZV6ApgB5IEB2AJjNrvgN4C-A3AFDApnLRjQC80ZAgHc4iVJhx4AFAEpW7TihAEAdCBQBzKTwCWnJGDLACKAGajk6GnjlA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=6.26.0&envVersion=

Voir ce numéro de Babel pour plus d'informations : https://github.com/babel/babel/issues/3083

Answer 2

J'ai créé un Dépôt Github qui montre comment React gère les limites d'erreurs.

Il semble que React soit capable de détecter CustomError . Voir cette ligne de code ici .

Faites-moi savoir si cet exemple est représentatif de ce que vous avez.