锐客网

  1. 首页 > 睿知 > it技术 > >

ErrorBoundary 处理自定义错误

ErrorBoundary 处理自定义错误 背景
错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI。
问题
react 只能在以下 3 种实现下才会捕获错误

  • 渲染期间
  • 生命周期方法
  • 整个组件树的构造函数
无法自动捕获下面 4 种实现
  • 事件处理
  • 异步代码（例如 setTimeout 、Promise回调函数）
  • 服务端渲染
  • 它自身抛出来的错误（并非它的子组件）
通常希望业务代码能够复用 ErrorBoundary 的错误处理逻辑。
实现
【ErrorBoundary 处理自定义错误】如果要 ErrorBoundary 能处理业务代码的自定义错误，只要在渲染期间抛出错误即可。
Class Component
try { const res = await fetchMayError(); } catch (err) { this.setState(() => { throw err; }); }

Hooks
function useErrorHandler() { const [error, setError] = React.useState(null); if (error != null) throw error; return setError; }function Foo() { const handleError = useErrorHandler(); fetchMayError().catch(handleError); return ; }

Inspired
  1. https://github.com/bvaughn/re...

    推荐阅读


    上一篇：Springboot如何设置过滤器及重复读取request里的body

    下一篇：mysql 高性能分布设计