javascript - React 16错误边界组件(使用componentDidCatch)显示 Uncaught Error

Question

我使用 create-react-app 启动了一个应用程序，我有这个 Error Boundary组件:

import React from 'react'

export default class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    console.log('shouldnt I see this logged??')

    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

我在这个应用程序组件中使用它:

import React from 'react'
import ErrorBoundary from './ErrorBoundary'


class App extends React.Component {
  render() {
    return (
      <ErrorBoundary>
        <div>
          <button onClick={() => { throw new Error('lets throw an error') }}>
            Click to throw error
          </button>
        </div>
      </ErrorBoundary>
    );
  }
}

export default App;

我希望如果我单击 App 中的按钮，应该捕获抛出的错误，并且我应该看到从 ErrorBoundary 记录的内容:“我应该看到此记录吗？ ??”。但我没有看到该记录，它破坏了应用程序:

我是不是误解了什么？

Answer 1

没有任何反应的原因是这是事件处理程序中的错误，并且这些错误边界未捕获这些错误。 error-handling blog post澄清捕获了哪些错误:

Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

如果没有错误边界，这些错误将很难捕获(在 React 16 中，甚至生命周期方法错误也会使整个应用程序渲染消失。)

编辑:actual docs更加清楚哪些错误被捕获。另请注意，create-react-app 使用 react-error-overlay 包，该包在开发服务器上构建时会在片刻之后用错误屏幕替换整个渲染。为了更好地查看捕获的错误，您可以运行生产构建。