【React】React Error Boundaryでコンポーネントのエラーハンドリングをする方法

こんにちは。Naotoです。
今回は、Reactアプリケーションでのエラーハンドリングの１種である、React Error Boundaryについて紹介したいと思います。

React Error Boundaryとは？

React Error Boundaryは、Reactアプリケーションにおいて、子コンポーネントで発生するエラーをキャッチし、フォールバックUIを表示するための機能です。

コンポーネント単位でフォールバックUIを表示できるため、以下のように、エラーが発生したコンポーネント以外の部分は通常通り表示することができます。

↓イメージ（通常時は、左下部分にはTask Listが表示される。）

上記のようにTask Listコンポーネント部分だけをフォールバックUIに書き換えることができます。）

実装方法

それでは、実装方法を説明します。

ErrorBoundaryクラスコンポーネントの作成

ErrorBoundaryは、クラスコンポーネントでしか作成できません。

import React, { Component, ReactNode, ErrorInfo } from "react";


interface ErrorBoundaryProps {
  children: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
}

class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    // エラーの状態をStateで管理
    this.state = { hasError: false };
  }

// 子孫コンポーネントでエラーが発生した際に呼び出される
  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    // エラーステートを更新してフォールバックUIを表示
    return { hasError: true };
  }

// 子孫コンポーネントでエラーが発生した際に呼び出される
// getDerivedStateFromErrorと違って、エラー情報の取得と副作用の実行ができる。
  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("ErrorBoundary caught an error", error, errorInfo);
    // ここで副作用の実行ができる
  }

  render() {
    if (this.state.hasError) {
    // フォールバックUI
      return (
        <h1 className="text-red-700 font-bold">
          An error has occurred. Please refresh the page.
        </h1>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

ErrorBoundaryクラスコンポーネントの使用

以下は、冒頭のイメージ画像の、TaskListとTaskDetail部分のJSXです。

<div className="xl:flex xl:gap-8">
    {/* Task List画面 */}
    <ErrorBoundary>
          <TaskList />
    </ErrorBoundary>
    {/* Task Detail画面 */}
    <ErrorBoundary>
          <TaskDetail />
    </ErrorBoundary>
</div>

上記のようにErrorBoundaryコンポーネントで囲うことで、ページ全体でのエラー表示でなく、エラーが発生したコンポーネント部分の画面のみにフォールバックUIを表示することができます。

つまり、アプリケーションの動きをストップさせずにユーザーへエラーを伝えることができます。

注意点

コンポーネント単位でエラーを表示できるReact Error Boundaryですが、以下のエラーについては検知することができません。

・イベントハンドラー
・非同期処理
・サーバーサイドレンダリング
など

上記エラーも検知したい場合は、react-error-boundaryというパッケージを使用する必要があります。
（react-error-boundaryを使っても、サーバーサイドレンダリングには確か対応できない。。。）

react-error-bounaryについては、後日記事にしたいと思います。

まとめ

React Error Boundaryを使用することで、Reactアプリケーションの特定の部分でエラーが発生した場合でも、他の部分は通常通り表示され続けるため、ユーザーにより良い体験を提供することができます。

アプリケーション全体の信頼性を向上させるために非常に有効です。

ぜひ皆さんも使ってみてください！！！

最後までお読みいただき、ありがとうございました！！！