ErrorBoundary 处理自定义错误

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...