如果错误边界是错误 class 的实例，则错误边界不提供对错误的访问权限

Question

我遇到了一个奇怪的行为。看到这个 fiddle。在使用 React 16 错误处理机制，即 Error Boundary 时，我注意到 error 参数为空。经过进一步调查，我意识到只有像这样抛出错误对象时才会出现这种情况：

throw new Error('The world is very strange')

然而，当这样抛出错误时：

throw 'The world is very strange'

错误将在 componentDidCatch 中可用。

请哪位大侠赐教。我希望继续使用 new Error 因为建议使用它并且它应该允许访问文件和抛出的行号。

让我们看一下代码。

class Boundary extends React.Component {
    constructor() {
      super();
      this.state = {}
    }

    componentDidCatch(error, info) {
       this.setState({
        error,
        info,
      })
    }

  render() {
    if (this.state.error) {
       return (
       <div>
         {JSON.stringify(this.state)}
       </div>)
    }
    return this.props.children;
   }
}

class Component extends React.Component {
    render() {
  // Why and what should i do ?
    throw 'This will be available in the error parameter'
    throw new Error('This one will not')
  }
}

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
    <Boundary>
      <div>
        <Component />
      </div>
    </Boundary>
    )
  }
}

Answer 1

错误其实是可用的。问题是 JSON.stringify doesn't serialize Error objects，因为这是您用来显示错误的内容，所以看起来错误是空的。

Here's an updated version of your fiddle 显式输出 state.error.message，并且有效。

Answer 2

不鼓励抛出字符串，因为错误通常是一个对象，最好是 Error.

的实例

扔Error没有问题。处理方式有问题：

  if (this.state.error) {
     return (
     <div>
       {JSON.stringify(this.state)}
     </div>)
  }

由于error.message不可枚举，error被字符串化为{}。这是预期的行为。 JSON.stringify 不应依赖于对象的全面表示 - 这就是开发工具控制台的用途。

可以通过扩展 Error:

来修复当前表示

class HumanReadableError extends Error {
  toJSON() {
    return `Error: ${this.message}`;
  }
}

和

throw new HumanReadableError('This will not be available');

如果错误边界是错误 class 的实例，则错误边界不提供对错误的访问权限

Error Boundary does not give access to error if it is an instance of Error class

reactjs

react-16