CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章React中巧妙实现Error Boundaries由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

大家好，我卡颂.

本文会讲解React中Error Boundaries的完整实现逻辑.

一张图概括:

这里简单讲解下React工作流程，后文有用。分为三步:

1. 触发更新
2. render阶段：计算更新会造成的副作用
3. commit阶段：在宿主环境执行副作用

副作用有很多，比如:

• 插入DOM节点
• 执行useEffect回调

好了，让我们进入主题.

什么是Error BoundariesReact

提供了两个与「错误处理」相关的API:

• getDerivedStateFromError：静态方法，当错误发生后提供一个机会渲染fallback UI
• componentDidCatch：组件实例方法，当错误发生后提供一个机会记录错误信息

使用了这两个API的ClassComponent通常被称为Error Boundaries(错误边界).

在Error Boundaries的「子孙组件」中发生的所有「React工作流程内」的错误都会被Error Boundaries捕获.

通过开篇的介绍可以知道，「React工作流程」指:

• render阶段
• commit阶段

考虑如下代码:

1. class ErrorBoundary extends Component { 
2.   componentDidCatch(e) { 
3.     console.warn(“发生错误”, e); 
4.   } 
5.   render() { 
6.     return <div>{this.props.children}</div>; 
7.   } 
8. } 
9.  
10. const App = () => ( 
11.  <ErrorBoundary> 
12.     <A><B/></A> 
13.     <C/> 
14.  <ErrorBoundary> 
15. ) 

A、B、C作为ErrorBoundary的子孙组件，当发生「React工作流程内」的错误，都会被ErrorBoundary中的componentDidCatch方法捕获.

步骤1:捕获错误

首先来看「工作流程中的错误都是何时被捕获的」.

render阶段的核心代码如下，发生的错误会被handleError处理:

1. do { 
2.   try { 
3.     // 对于并发更新则是workLoopConcurrent 
4. workLoopSync(); 
5.     break; 
6.   } catch (thrownValue) { 
7.     handleError(root, thrownValue); 
8.   } 
9. } while (true); 

commit阶段包含很多工作，比如:

• componentDidMount/Update执行
• 绑定/解绑ref
• useEffect/useLayoutEffect callback与destroy执行

这些工作会以如下形式执行，发生的错误被captureCommitPhaseError处理:

1. try { 
2. // …执行某项工作  
3. } catch (error) { 
4.   captureCommitPhaseError(fiber, fiber.return, error); 
5. } 

步骤2:构造callback

可以发现，即使没有Error Boundaries，「工作流程」中的错误已经被React捕获了。而正确的逻辑应该是:

• 如果存在Error Boundaries，执行对应API
• 抛出React的提示信息
• 如果不存在Error Boundaries，抛出「未捕获的错误」

所以，不管是handleError还是captureCommitPhaseError，都会从发生错误的节点的父节点开始，逐层向上遍历，寻找最近的Error Boundaries.

一旦找到，就会构造:

• 用于「执行Error Boundaries API」的callback
• 用于「抛出React提示信息」的callback

React错误提示信息，包括提示语和错误堆栈 。

1.   // ...为了可读性，逻辑有删减 
2. function createClassErrorUpdate() { 
3.   if (typeof getDerivedStateFromError === 'function') { 
4. // 用于执行getDerivedStateFromError的callback 
5.     update.payload = () => { 
6.       return getDerivedStateFromError(error); 
7. }; 
8. // 用于抛出React提示信息的callback 
9.     update.callback = () => { 
10.       logCapturedError(fiber, errorInfo); 
11.     }; 
12.   } 
13.   if (inst !== null && typeof inst.componentDidCatch === 'function') { 
14. // 用于执行componentDidCatch的callback 
15.     update.callback = function callback() { 
16.       this.componentDidCatch(error); 
17.     }; 
18.   } 
19.   return update; 
20. } 

如果没有找到Error Boundaries，继续向上遍历直到根节点.

此时会构造:

• 用于「抛出未捕获错误」的callback
• 用于「抛出React提示信息」的callback

1. // ...为了可读性，逻辑有删减 
2. funffction createRootErrorUpdate() { 
3.   // 用于抛出“未捕获的错误”及“React的提示信息”的callback 
4.   update.callback = () => { 
5.     onUncaughtError(error); 
6.     logCapturedError(fiber, errorInfo); 
7.   }; 
8.   return update; 
9. } 

执行callback

构造好的callback在什么时候执行呢？

在React中有两个「执行用户自定义callback」的API:

• 对于ClassComponent， this.setState(newState, callback)中newState和callback参数都能传递Function作为callback

所以，对于Error Boundaries，相当于主动触发了一次更新:

1. this.setState(() => { 
2.   // 用于执行getDerivedStateFromError的callback 
3. }, () => { 
4.   // 用于执行componentDidCatch的callback 
5.   //  以及 用于抛出React提示信息的callback 
6. }) 

• 对于根节点，执行ReactDOM.render(element, container, callback)中callback参数能传递Function作为callback

所以，对于「没有Error Boundaries」的情况，相当于主动执行了如下函数:

1. ReactDOM.render(element, container, () => { 
2. // 用于抛出“未捕获的错误”及“React的提示信息”的callback 
3. }) 

所以，Error Boundaries的实现可以看作是：React利用已有API实现的新功能.

总结

经常有人问：为什么Hooks没有Error Boundaries？

可以看到，Error Boundaries的实现借助了this.setState可以传递callback的特性，useState暂时无法完全对标.

最后，给你留个作业，在官方文档[1]介绍了4种情况的错误不会被Error Boundaries捕获.

利用本文知识，你能分析下他们为什么不会被捕获么？

参考资料

[1]官方文档

https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries 。

原文链接：https://mp.weixin.qq.com/s/pEBQdvZIP8I__CyloD9v6w 。

最后此篇关于React中巧妙实现Error Boundaries的文章就讲到这里了,如果你想了解更多关于React中巧妙实现Error Boundaries的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。