概述
在日常业务开发过程中,咱们对于业务自身的需要实现投入了大量的关注。对于程序的异样解决可能投入精力比拟少。然而对于一个程序的健壮性来说,异样解决是十分十分重要的局部。
谬误边界
这是 React16 版本当前,官网提供的一种谬误降级解决计划。
解决了局部问题
看下面的文档,这个谬误边界的解决方案只能解决上面几种状况的异样。
- 渲染期间 render
- 生命周期办法
- 整个组件树的构造函数
ok,只有这 3 中状况下产生异样,才能够捕捉到。
不过,这种谬误是能够冒泡的,也就是说 如果在组件最顶层应用 ErrorBoundary 组件,就能捕捉整个组件树的 异样,当然也能够嵌套多处应用。
这没什么须要阐明的,官网文档应用阐明曾经足够清晰。
解决不了的问题
谬误边界无奈捕捉的谬误:
- 事件处理
- 异步代码
- 它本身抛出来的谬误(并非它的子组件)
- 服务端渲染
那针对这些场景下的异样,该如何捕捉呢?
上面咱们粗略剖析一下可能的解决方案
try/catch
咱们本能想到的或者常常应用的可能就是 try/catch 语句了。
它的确能帮忙咱们捕捉的很多异样,防止程序解体。
当然 try/catch 是不是就一劳永逸了呢,当然不。它存在非常明显的两个毛病:
- 只能捕捉到 同步程序中 产生的异样
- 导出书写 trg/catch 真的是有点烦啊
unhandledrejection
当初 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
- ……
总结
这个只是简略的思考和记录一下,目前没有精力钻研的十分深刻。
不过总体来讲,解决异样的也就是那些根底的货色,根底才是所有的基石。
残余的就是如何形象封装出一个比拟好用的库,这就是造轮子的功夫了。
不过开源社区资源很宏大,能够借鉴参考应用。