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/react-error-boundary

本博客(marsk6)所有文章除特別聲明外，均采用 BY-NC-SA 許可協議。轉載請注明出處！