reactjs try catch in render不捕获子级错误

Question

我正在尝试将错误捕获添加到组件的渲染函数中。当我在实际的渲染函数中抛出错误时，这可以正常工作，但是如果组件的子级中存在错误，则尝试不会捕获错误（或者它们被子组件错误处理程序拦截，我不确定？

是否存在将错误强制到父级的方法。

const SimpleComponent = React.createClass({
    render: function(){
        try{
            throw 'new error'
            return <div>{this.props.children}</div>
        }catch(e){
            console.log('error', e);        
        }
    }
})

上述工作

const SimpleComponent = React.createClass({
    render: function(){
        try{
            return <div>{this.props.children}</div>
        }catch(e){
            console.log('error', e);        
        }
    }
})

const ChildComponent = React.createClass({
    render: function(){
        throw 'child error'
    }
})

<SimpleComponent>
    <ChildComponent />
</SimpleComponent>

这上面不抓

Answer 1

我建议在父组件中使用（当前）不稳定的生命周期事件unstable_handleError。

public unstable_handleError(err: any) {

  this.setState({
    error: err
  });

}

在未来的版本中，错误挂钩可能会成为官方API。详情见本期

https://github.com/facebook/react/issues/2461

Answer 2

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

请注意，此解决方案并不总是防止React进入不良状态。但是，此解决方案至少允许您处理错误，例如显示错误横幅/模式，或将堆栈跟踪错误日志发送到您的服务。

以下是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 {
        // replace this with whatever error handling logic you like.
        // e.g. dispatch redux action notifying the app that an error occurred:
        // `store.dispatch({type: "EXCEPTION", payload: e});`
        console.error(e);
      } finally {
        isHandlingError = false;
      }
    }
  },
};

ReactUpdates.injection.injectBatchingStrategy(ReactTryCatchBatchingStrategy);

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

Answer 3

使用反应16中的组件DidCatch（）方法。

查看更多信息