服务器之家

服务器之家 > 正文

React中巧妙实现Error Boundaries

时间:2021-12-03 22:46     来源/作者:魔术师卡颂

React中巧妙实现Error Boundaries

大家好,我卡颂。

本文会讲解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. const App = () => ( 
  10.  <ErrorBoundary> 
  11.     <A><B/></A> 
  12.     <C/> 
  13.  <ErrorBoundary> 

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); 

步骤2:构造callback

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

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

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

一旦找到,就会构造:

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

React中巧妙实现Error Boundaries

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

如果没有找到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

执行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

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部