React错误边界

Posted 2021-09-06 donglegend

概述-健壮性

在日常业务开发过程中，我们对于业务本身的需求实现投入了大量的关注。对于程序的异常处理可能投入精力比较少。然而对于一个程序的健壮性来说，异常处理是非常非常重要的部分。
错误边界
这是React16版本以后，官网提供的一种错误降级处理方案。

解决了部分问题

看上面的文档，这个错误边界的解决方案只能解决下面几种情况的异常。

• 渲染期间 render
• 生命周期方法
• 整个组件树的构造函数

ok，只有这3中情况下发生异常，才可以捕获到。

不过，这种错误是可以冒泡的，也就是说 如果在组件最顶层使用 ErrorBoundary组件，就能捕获整个组件树的 异常，当然也可以嵌套多处使用。

这没什么需要说明的，官方文档使用说明已经足够清晰。

解决不了的问题

错误边界无法捕获的错误：

• 事件处理
• 异步代码
• 它自身抛出来的错误（并非它的子组件）
• 服务端渲染

那针对这些场景下的异常，该如何捕获呢？
下面我们粗略分析一下可能的解决方案

try/catch

我们本能想到的或者经常使用的可能就是 try/catch语句了。
它确实能帮助我们捕获的很多异常，避免程序崩溃。

当然try/catch 是不是就一劳永逸了呢，当然不。它存在非常明显的两个缺点：

1. 只能捕获到 同步程序中 产生的异常
2. 导出书写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
• ......

总结

这个只是简单的思考和记录一下，目前没有精力研究的非常深入。
不过总体来讲，解决异常的也就是那些基础的东西，基础才是一切的基石。
剩余的就是如何抽象封装出一个比较好用的库，这就是造轮子的功夫了。
不过开源社区资源很庞大，可以借鉴参考使用。