Question

我尝试通过https://reactjs.org/docs/error-boundaries.html来实现错误边界，但它只能捕获呈现错误。

是否可以在react上实现全局try / catch之类的功能，并在异步进程和处理程序中捕获错误？

类似的东西：

try {
    ReactDOM.render(<App />, document.getElementById("root"));
} catch (error) {
    console.log("CAUGHT AN ERROR!!!!!!!")
    console.log(error);
    ReactDOM.render(<ErrorComponent />, document.getElementById("root"));

}

Answer 1

反应16具有一个称为错误边界的新功能。您可以搜索更多有关此内容。您的问题通过这样的错误边界解决了：例如：

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 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; 
  }
}

您可以像这样包装您的App组件。它将捕获所有错误：

<ErrorBoundary>
  <App />
</ErrorBoundary>

您可以在此处了解更多信息。 https://reactjs.org/docs/error-boundaries.html

Answer 2

一种方法是覆盖全局console.error方法。

 var console=(function(oldCons){
     return {
         log: function(text){
             oldCons.log(text);
         },
         info: function (text) {
             oldCons.info(text);
         },
         warn: function (text) {
             oldCons.warn(text);
         },
         error: function (text) {
             oldCons.error(text);
             ReactDOM.render(<div>ERROR</div>, document.getElementById('root'))
         }
     };
 }(window.console));

 // catch unhandled promises
 window.addEventListener("unhandledrejection", (event) => {
   console.error(event.reason);
 });

反应时可能会捕获全局错误

2 个答案: