React错误边界
概述
【React错误边界】在日常业务开发过程中,我们对于业务本身的需求实现投入了大量的关注。对于程序的异常处理可能投入精力比较少。然而对于一个程序的健壮性来说,异常处理是非常非常重要的部分。
错误边界
这是React16版本以后,官网提供的一种错误降级处理方案。
解决了部分问题
看上面的文档,这个错误边界的解决方案只能解决下面几种情况的异常。
- 渲染期间 render
- 生命周期方法
- 整个组件树的构造函数
不过,这种错误是可以冒泡的,也就是说 如果在组件最顶层使用 ErrorBoundary组件,就能捕获整个组件树的 异常,当然也可以嵌套多处使用。
这没什么需要说明的,官方文档使用说明已经足够清晰。
解决不了的问题 错误边界无法捕获的错误:
- 事件处理
- 异步代码
- 它自身抛出来的错误(并非它的子组件)
- 服务端渲染
下面我们粗略分析一下可能的解决方案
try/catch
我们本能想到的或者经常使用的可能就是 try/catch语句了。
它确实能帮助我们捕获的很多异常,避免程序崩溃。
当然try/catch 是不是就一劳永逸了呢,当然不。它存在非常明显的两个缺点:
- 只能捕获到 同步程序中 产生的异常
- 导出书写trg/catch 真的是有点烦啊
现在promise 已经烂大街了,泛滥成灾。到处都是then却没有catch的案例随处可见。
这个时候,如果发生了异常,我们会在控制台看到Uncaught (in promise)等error。
这个时候可以监听unhandledrejection错误事件,专门用来处理promise的未捕获异常
window.addEventListener("unhandledrejection", event => {
console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
});
error
最大杀手锏,监听error事件,之前做错误日志收集系统,主要就是靠这个玩意。
window.addEventListener('error', this.onError, true);
有没有集成方案 上面粗略的分下了那么多,啊, 看着还是好烦,需要自己到处写,到处手动处理。
能不能抽象一下啊,有没有轮子可以用啊...赶紧去开源社区搜搜啊。
到npm.js官网 输入关键词,还真出来不少
- react-error-catch
- react-error-catcher
- ......
不过总体来讲,解决异常的也就是那些基础的东西,基础才是一切的基石。
剩余的就是如何抽象封装出一个比较好用的库,这就是造轮子的功夫了。
不过开源社区资源很庞大,可以借鉴参考使用。
推荐阅读
- 唱歌教学(导致嗓音损坏的几个常见的错误唱歌方法!)
- 调取接口时报404错误(ID:16)
- react|react 安装
- 接口|axios接口报错-参数类型错误解决
- React.js学习笔记(17)|React.js学习笔记(17) Mobx
- 碧珠生活智慧语录24-1(没有错误)
- 追女生的七种错误思维
- React.js的表单(六)
- 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱
- c#常用网址记录