你可以用try / catch块捕获React.js应用程序的所有错误吗？

Question

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

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

到目前为止，我所读到的只是可以将整个render函数包装在try / catch中，但是由于用户交互的原因而不会捕获任何错误吗？

Answer 1

React 16引入了错误边界和componentDidCatch生命周期方法：

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>