try-catch - 你能用 try/catch block 捕获 React.js 应用程序的所有错误吗？

Question

我制作了一个未实时运行的 react 应用程序，使用它的人注意到偶尔会发生一些奇怪的错误。我不知道为什么或发生了什么，也无法重现它。

所以我想知道是否有一种方法可以将整个应用程序或其一部分包装在 try/catch block 中，以便我可以将错误发送到服务器上的错误日志？

到目前为止，我读到的只是您可以将整个渲染函数包装在 try/catch 中，但这不会捕获由于用户交互而导致的任何错误，对吗？

Answer 1

编辑

下面的解决方案仅捕获渲染错误，因为它们本质上是同步的。这就是 JS 的工作原理，它与 React 无关，这是 OP 询问的内容。

原帖

引入 React 16 Error Boundaries和 componentDidCatch lifecycle method :

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

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

然后你可以将它用作常规组件:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

或者您可以使用 npm 包 react-error-boundary 包装您的根组件，并设置后备组件和行为。

import {ErrorBoundary} from 'react-error-boundary';

const myErrorHandler = (error: Error, componentStack: string) => {
  // ...
};

<ErrorBoundary onError={myErrorHandler}>
  <ComponentThatMayError />
</ErrorBoundary>