关于Error Boundaries

发表于 2020-10-04 更新于 2024-11-30 本文字数： 768 阅读时长 ≈ 1 分钟

本文介绍关于Error Boundaries，包括使用场景、实现细节等，以提高关于Error Boundaries的效率。

React文档中讲到一个概念-Error Boundaries（错误边界），今天正好在读一本书《Learning React》,借着刚读完的熟悉感 + 结合实际的项目，聊下个人的实践认知。

解决的问题范畴

A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.

如上为官网开篇的一段介绍，由此可以看出该技术的根本目标是希望UI层的异常不要导致整体的App的崩溃。

注意

仅限UI层
对于这种处理实际上，可以看作我们函数中经常写的try catch
React开发模式打包，出现了运行异常，在显示我们既定的错误边界render外，还是会展示堆栈错误信息

范畴之外

比如我当前的项目，技术栈为React+Redux+Redux-Saga+Axios等，假如是在Saga-effects中出现了未捕获的异常，实际上也会造成whole app的崩溃，Error Boundaries是无法解决这个问题的，因为不在UI层。那怎么办呢，就是针对性对saga要做try catch,比如做个高阶函数-safe-wrapper。