likes
comments
collection
share

ErrorBoundary 处理自定义错误

作者站长头像
站长
· 阅读数 48

ErrorBoundary 处理自定义错误

背景

错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI。

问题

react 只能在以下 3 种实现下才会捕获错误

  • 渲染期间
  • 生命周期方法
  • 整个组件树的构造函数

无法自动捕获下面 4 种实现

  • 事件处理
  • 异步代码（例如 setTimeout 、Promise回调函数）
  • 服务端渲染
  • 它自身抛出来的错误（并非它的子组件）

通常希望业务代码能够复用 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 <div></div>;
}

Inspired

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