Question

我在组件树的顶部设置了错误边界，如下所示：

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

如果错误在树上找到了，错误边界会呈现一个简单的错误页面，将错误本身作为道具传递：

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

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

我已经开始定义自定义错误，以便在引发某些异常时抛出应用程序，只需扩展Error类：

class CustomError extends Error {}

然后在我的组件中，我抛出了这些自定义错误，我希望在错误页面中检测这些错误，并根据其类型构建消息。例如，如果我在组件树中进一步抛出此错误：

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

我希望能够在错误页面中嗅探该类型，并显示与该类型相关的消息。

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>;
  }
}

但是，在错误页面中，React只识别this.props.error是Error的实例，而不是CustomError的实例。如果我抛出TypeError而不是CustomError，则错误页面可以检测到错误类型。但是传递自定义错误类型导致错误页面不知道该类型，除了它是一个错误，这显然违背了定义自定义错误类型的目的。我在这里错过了什么？这是React中的错误吗？任何意见都将非常受欢迎。

我使用React 16.0.0发现了这个问题，已更新到16.2.0并且问题仍然存在。

Answer 1

问题不在于React，而在于Babel，我认为你正在使用它。编译类的方式不支持将instanceof与扩展本地类（如Error的类）一起使用。

您可以在此处查看该行为的示例：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=

有关详细信息，请参阅此Babel问题：https://github.com/babel/babel/issues/3083

Answer 2

我创建了一个Github repository，它显示了React如何处理错误边界。

似乎React能够检测到CustomError。请参阅此line of code here。

如果这个例子代表你拥有的东西，请告诉我。

如何在React错误边界中使用自定义错误类型？

2 个答案: