React V16 错误处理(componentDidCatch 示例)

12

文章来源:ReactV16 Error Handler (componentDidCatch example) - A look at componentDidCatch and componentStack,React 交流群::342685917


React 早就需要一个处理错误的解决方案。

在 React V15 中使用 handle_unstableError

从早期的 React 开发以来,一个小的组件抛出错误将会破坏整个应用程序,这种情况相当普遍。

最近在 github 上证实,React Core 决定实现一个内置的函数叫做 componentDidCatch!我(原作者)个人也在 2015 年 10 月 21 日做了一些投入,但是从 2014 年 11 月 3 日才开始正式跟踪这个错误/解决方案!

我们再耐心等待 996 天!(译者注:今天(2017-09-27) React 16 正式发布)

让我们来看看吧!

React 16 将提供一个内置函数 componentDidCatch,如果 render() 函数抛出错误,则会触发该函数。在下面的示例中,你可以点击 “button will throw” 来抛出一个错误。

在线示例:CodeSandbox

https://facebook.github.io/re...(中文:React 16 的异常/错误处理

重要提示:

错误在渲染阶段中被捕获,但在事件处理程序中不会被捕获。示例按钮 “button will not throw” 将不会使用错误边界,但错误信息仍将显示在 javascript 控制台中。

我强烈建议您点击此代码并查看示例组件。下面是一个基本的 PotentialError 组件

class PotentialError extends React.Component {   
  constructor(props) {     
    super(props);     
    this.state = { error: false };
  }
  componentDidCatch(error, info) {     
    this.setState({ error, info });
  }
  render() {
    if (this.state.error) {
      return <h1>Error: {this.state.error.toString()}</h1>;
    }
    return this.props.children;   
  } 
}

然后在顶部或任何地方,你可以这样使用它:

<PotentialError><AwesomeApp /></PotentialError>

另一个令人敬畏的特性 componentDidCatch 是包含错误堆栈的 info 对象!

{this.state.info && this.state.info.componentStack}

这将告诉你组件在哪里失效!

让我知道你正在使用错误边界!


欢迎关注我的公众号,关注前端文章:

justjavac微信公众号


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

14 条评论
鱼肚 · 2017年09月28日

厉害厉害,有这componentDidCatch就很好处理错误了.

+1 回复

h88829 · 2017年11月15日

我试了一下,好像并没有走componentDidCatch,发生错误要现实的ui界面也没有显示

回复

1
justjavac 作者 · 2017年11月15日
longzhaobi · 2017年12月11日

Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorig... for more information.

并没有捕获到真实错误信息,知道啥原因吗?? 真实错误应该是:Uncaught Error: I crashed!

回复

0

跨域问题

justjavac 作者 · 2017年12月12日
0

@justjavac 提示是这样,我用的dva-cli创建的项目,我后来用create-react-app创建就可以正常获取到,用dva就不行。

longzhaobi · 2017年12月12日
0

@longzhaobi 没用过dva。大概是dva使用了cdn了吧

justjavac 作者 · 2017年12月12日
一歩 · 2018年02月23日

大神,能介绍下使用场景吗? 对异步产生的数据没有效果
我能想到的应用场景就是处理后台脏数据null,undefined或数据格式不符合子组件的props需求。

回复

0

同步异步都可以处理,之前有了错误整个APP就crash了,有了 componentDidCatch 就可以很优雅的处理异常了

justjavac 作者 · 2018年02月26日
1

可以通过把componentDidCatch 把 client-side的错误发送到server,这样debug就轻松多了。经常用户报错了,但是前段工程师这边找不到问题。

justnow2019 · 2018年12月19日
载入中...