其他分享
首页 > 其他分享> > ErrorBoundary 处理自定义错误

ErrorBoundary 处理自定义错误

作者:互联网

ErrorBoundary 处理自定义错误

背景

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

错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

问题

react 强调了只有上面 3 种实现下才会捕获错误。

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

通常希望业务代码能够复用 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/react-error-boundary

本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!

标签:const,自定义,错误,ErrorBoundary,error,组件
来源: https://www.cnblogs.com/marsk6/p/15669449.html