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

Question

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

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

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

Answer 1

您可以利用React的BatchingStrategyAPI轻松地将＜code＞try/catch＜code＞包装在所有React代码周围。此窗口的好处在于＜code＞窗口。onerror是，在所有浏览器中都可以获得很好的堆栈跟踪。即使是像Microsoft Edge和Safari这样的现代浏览器也不提供对window.onerror的堆栈跟踪。

以下是 React 15.4 的样子：

import ReactUpdates from "react-dom/lib/ReactUpdates";
import ReactDefaultBatchingStrategy from "react-dom/lib/ReactDefaultBatchingStrategy";

let isHandlingError = false;
const ReactTryCatchBatchingStrategy = {
  // this is part of the BatchingStrategy API. simply pass along
  // what the default batching strategy would do.
  get isBatchingUpdates () { return ReactDefaultBatchingStrategy.isBatchingUpdates; },

  batchedUpdates (...args) {
    try {
      ReactDefaultBatchingStrategy.batchedUpdates(...args);
    } catch (e) {
      if (isHandlingError) {
        // our error handling code threw an error. just throw now
        throw e;
      }

      isHandlingError = true;
      try {
        // dispatch redux action notifying the app that an error occurred.
        // replace this with whatever error handling logic you like.
        store.dispatch(appTriggeredError(e));
      } finally {
        isHandlingError = false;
      }
    }
  },
};

ReactUpdates.injection.injectBatchingStrategy(ReactTryCatchBatchingStrategy);

这里有完整的文字：https://engineering.classdojo.com/blog/2016/12/10/catching-react-errors/

Answer 2

这是我最后用的

编辑：React 16介绍了正确的方法来做到这一点，请参阅@goldyluck的回答。

  componentWillMount() {
    this.startErrorLog();
  }

  startErrorLog() {
    window.onerror = (message, file, line, column, errorObject) => {
      column = column || (window.event && window.event.errorCharacter);
      var stack = errorObject ? errorObject.stack : null;

      //trying to get stack from IE
      if (!stack) {
        var stack = [];
        var f = arguments.callee.caller;
        while (f) {
          stack.push(f.name);
          f = f.caller;
        }
        errorObject['stack'] = stack;
      }

      var data = {
        message: message,
        file: file,
        line: line,
        column: column,
        errorStack: stack
      };

      //here I make a call to the server to log the error

      //the error can still be triggered as usual, we just wanted to know what's happening on the client side
      return false;
    };
  }

Answer 3

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-边界，并设置回退组件和行为。

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

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

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