【react-error-boundary】環境構築 + 利用方法

はじめに

この記事は【react-error-boundary】の導入方法と利用方法の備忘録である。

【react-error-boundary】とは

Reactアプリケーションにおいて、子コンポーネントツリーで発生したJavaScriptのエラーを検知し、それらをログに記録したり、ユーザーにエラーメッセージを表示するための仕組みである。
これにより、エラーが発生したコンポーネントツリーの部分だけをフォールバックUIに置き換えることができ、アプリケーション全体のクラッシュを防ぐことができる。

導入方法

1. インストール

以下コマンドを実行する。

npm install react-error-boundary

2. 利用方法

以下にサンプルプログラムを記述する。

react-error-boundaryのErrorBoundaryコンポーネントを使用し、Propsとしてさまざまなデータを渡す。

2-1. FallbackComponent

FallbackComponentプロパティでは、エラー発生時に表示されるコンポーネントを定義する。
このコンポーネントはエラー情報を受け取り、カスタマイズされたエラーメッセージを表示できる。

function MyFallbackComponent({error, resetErrorBoundary}) {
  return (
    <div role="alert">
      <p>An error occurred: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

<ErrorBoundary FallbackComponent={MyFallbackComponent}>
  <MyComponent />
</ErrorBoundary>

2-2. onError

onErrorプロパティは、エラーが発生したときに実行される関数を指定する。
この関数はエラー情報を受け取り、ログサービスへの送信などの処理を行う。

function handleError(error, errorInfo) {
  // エラー情報をログサービスに送信
  logErrorToMyService(error, errorInfo);
}

<ErrorBoundary onError={handleError}>
  <MyComponent />
</ErrorBoundary>

2-3. onReset

onResetプロパティは、エラー状態のリセットを行う関数を指定する。
この関数は、ユーザーがエラーUI上で何らかのアクションを行ったときに呼び出される。

<ErrorBoundary
  onReset={() => {
    // リセット処理
    resetMyComponentState();
  }}
  FallbackComponent={MyFallbackComponent}
  onError={handleError}
>
  <MyComponent />
</ErrorBoundary>

2-4. resetKeys

resetKeysプロパティは、特定のキーの値が変わると自動的にエラー状態をリセットするための依存配列を指定する。
以下の例では、userステートが変更された際に、ErrorBoundaryのエラー状態がリセットされる。

const [user, setUser] = useState(null);

<ErrorBoundary
  resetKeys={[user]}
  FallbackComponent={MyFallbackComponent}
  onError={handleError}
  onReset={() => setUser(null)}
>
  <MyComponent user={user} />
</ErrorBoundary>