React捕获异常

前端 专栏收录该内容
5 篇文章 0 订阅

React在组件渲染阶段,由于js错误引起的异常不应该造成整个应用的崩溃。为了解决此问题,React在16引入了一个新的概念-“error boundaries(错误边界) ”。


error boundaries 可以捕获哪些异常?

  • 子组件的渲染
  • 生命周期函数
  • 构造函数

class 组件中与之相关的生命周期方法有:static getDrivedStateFromError()、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>

 


 

在哪些场景使用?

这取决于你的应用的设计,你可以在路由组件的顶层组件外加入<ErrorBoundary/>,也可以细分报错的场景,在不同组件外部加入不同的<ErrorBoundary/>。

推荐一个库

react-error-boundary 不需要自己定义state和实现渲染逻辑,只需要关注发生错误的时候,渲染的UI。该库提供了基于 render-prop 、HOC和基础的使用方式。


总结

缺点:这种方式不能捕获这些错误:

  • 事件处理程序
  • 异步代码 (e.g. setTimeout or requestAnimationFrame callbacks)
  • 服务端的渲染代码
  • error boundaries自己抛出的错误
  • 0
    点赞
  • 2
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值