关于react.js:React错误边界

39次阅读

共计 1147 个字符,预计需要花费 3 分钟才能阅读完成。

概述

在日常业务开发过程中,咱们对于业务自身的需要实现投入了大量的关注。对于程序的异样解决可能投入精力比拟少。然而对于一个程序的健壮性来说,异样解决是十分十分重要的局部。
谬误边界
这是 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
  • ……

总结

这个只是简略的思考和记录一下,目前没有精力钻研的十分深刻。
不过总体来讲,解决异样的也就是那些根底的货色,根底才是所有的基石。
残余的就是如何形象封装出一个比拟好用的库,这就是造轮子的功夫了。
不过开源社区资源很宏大,能够借鉴参考应用。

正文完
 0