Question

我正在尝试将错误捕获添加到组件的render函数中。当我在实际的渲染函数中抛出一个错误时，这很好用，但是如果组件的子代中有错误，则try不会捕获错误（或者它们被子组件错误处理程序拦截，我不确定？）

无论如何都要将错误强制给父母。

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

您可以利用React的BatchingStrategy API轻松地将try/catch包装在所有React代码周围。超过window.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 2

使用react 16中的 componentDidCatch （）方法。

查看this了解详情

reactjs尝试在渲染中捕获不会捕获儿童错误

2 个答案: