ReactでカスタムError Boundaryを活用して異なるエラータイプを柔軟に処理する方法

Reactアプリケーションでは、エラーの発生は避けられません。特に、大規模なアプリケーションでは、予期しないエラーがUIのクラッシュを引き起こすことがあります。このような問題を解決するために、ReactにはError Boundaryという仕組みがあります。Error Boundaryは、Reactツリー内でエラーが発生した場合にそれをキャッチし、アプリケーション全体がクラッシュするのを防ぎます。

しかし、標準のError Boundaryだけではすべてのユースケースをカバーできない場合があります。例えば、特定のエラータイプに応じて異なる処理を行いたい場合や、エラーの内容に応じてエラーメッセージやログをカスタマイズしたい場合があります。本記事では、ReactでカスタムError Boundaryを作成し、異なるエラータイプを柔軟に処理する方法について詳しく解説します。カスタムError Boundaryを活用することで、ユーザー体験を向上させ、アプリケーションの堅牢性を高める方法を学びましょう。

Error Boundaryとは何か

Error Boundaryは、Reactが提供するエラーキャッチ機能で、コンポーネントツリー内で発生したJavaScriptエラーをキャッチし、代わりにフォールバックUIを表示します。この仕組みにより、アプリケーション全体がクラッシュするのを防ぎ、ユーザー体験を損なわないようにできます。

Error Boundaryの基本的な動作

Error Boundaryは、Reactコンポーネントで以下の2つのライフサイクルメソッドを利用してエラーを検知します。

componentDidCatch(error, info)：キャッチされたエラーとその発生場所の情報を取得します。
static getDerivedStateFromError(error)：エラーが発生した際の状態を更新するために使用されます。

これらのメソッドを活用することで、エラーが発生しても安全にアプリケーションを動作させ続けることができます。

適用範囲と制約

Error Boundaryは以下のケースでエラーをキャッチできます：

レンダリング中のエラー
ライフサイクルメソッド内のエラー
コンストラクタ内のエラー

ただし、以下のケースではキャッチできません：

イベントハンドラ内のエラー
非同期コード（例: setTimeoutやasync/await）内のエラー
サーバーサイドレンダリング中のエラー
Error Boundary自体のエラー

Error Boundaryは、React 16以降で使用できる機能であり、ツリー内でエラーをキャッチするための基本的な仕組みを提供します。次節では、実際にError Boundaryをどのように実装するかを見ていきます。

Error Boundaryの基本的な使い方

ReactでError Boundaryを利用するには、クラスコンポーネントを作成し、エラーキャッチに必要なライフサイクルメソッドを実装します。以下に、基本的なError Boundaryの実装例を示します。

シンプルなError Boundaryの実装

import React from "react";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // エラーが発生した場合に状態を更新
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // エラーログを送信するなどの副作用処理
    console.error("Error caught in ErrorBoundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // エラー時に表示するフォールバックUI
      return <h1>Something went wrong.</h1>;
    }

    // 子コンポーネントをレンダリング
    return this.props.children;
  }
}

export default ErrorBoundary;

Error Boundaryの使用方法

作成したError BoundaryをReactコンポーネントツリーに組み込むことで、特定の範囲のエラーをキャッチできます。

import React from "react";
import ErrorBoundary from "./ErrorBoundary";
import SomeComponent from "./SomeComponent";

function App() {
  return (
    <ErrorBoundary>
      <SomeComponent />
    </ErrorBoundary>
  );
}

export default App;

ポイント

Error Boundaryは、通常アプリケーション全体や特定のセクションを囲む形で使用されます。
状況に応じてフォールバックUIをカスタマイズすることで、ユーザー体験を損なわないようにできます。
エラー情報を取得して外部サービス（例: SentryやRollbar）に送信すると、デバッグに役立ちます。

次節では、異なるエラータイプを処理する必要性とそのメリットについて考察します。

異なるエラータイプを処理する必要性

アプリケーションが複雑になるほど、発生する可能性のあるエラーの種類も多様化します。特定のエラーを適切に分類し、それぞれに応じた処理を行うことは、ユーザー体験を向上させ、アプリケーションの信頼性を高めるために重要です。

エラータイプの多様性

Reactアプリケーションで発生するエラーは主に以下のように分類できます：

UI関連のエラー

コンポーネントのレンダリングエラー
プロパティの型が一致しない場合のエラー

API通信エラー

ネットワークエラー
APIレスポンスのフォーマット不備

非同期処理エラー

async/awaitを利用した非同期処理中のエラー
タイムアウトや接続エラー

サードパーティライブラリエラー

外部ライブラリの使用中に発生するエラー

予期しないシステムエラー

メモリ不足やブラウザの制約によるエラー

異なるエラータイプを処理する利点

ユーザーへの適切なフィードバック
エラーの種類に応じて異なるメッセージを表示することで、ユーザーは問題を正確に理解できます。
例: ネットワークエラー時に「インターネット接続を確認してください」と案内する。
デバッグの容易さ
エラーを分類してログに記録することで、問題の原因を特定しやすくなります。
安定性の向上
重大なエラーと軽微なエラーを区別することで、影響範囲を最小限に抑えられます。
例: 特定のセクションでのみエラーが発生しても、他の部分は正常に動作する。

例: 適切なエラー処理の効果

特定のエラーに応じた処理を行う例として、API通信エラーの場合は再試行ボタンを提供し、UIエラーではスタティックな代替コンテンツを表示するなどのアプローチが考えられます。

次節では、このような異なるエラータイプを処理するためのカスタムError Boundaryの設計方法について説明します。

カスタムError Boundaryの基本設計

カスタムError Boundaryを設計することで、異なるエラータイプに応じた柔軟な処理が可能になります。基本設計では、エラーの分類、エラー情報の収集、フォールバックUIのカスタマイズを重視します。

基本設計のポイント

エラーの分類
Error Boundary内でエラータイプを識別する仕組みを組み込みます。エラーの種類に応じて異なる処理を適用します。

例: ネットワークエラー、レンダリングエラー、非同期エラー

フォールバックUIのカスタマイズ
発生したエラータイプに応じて、ユーザーに適切なUIを提供します。

ユーザー操作を求める場合: 再試行ボタン
情報提供を目的とする場合: 詳細なエラーメッセージ

エラー情報の記録と通知
エラー内容をログに保存し、外部のエラー追跡サービス（例: SentryやRollbar）に送信します。これにより、開発者が迅速に問題を特定できます。

カスタムError Boundaryの設計例

以下に、基本設計を反映したError Boundaryの構造を示します。

import React from "react";

class CustomErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorType: null };
  }

  static getDerivedStateFromError(error) {
    // エラー内容に基づいてエラータイプを識別
    if (error.message.includes("Network")) {
      return { hasError: true, errorType: "network" };
    } else if (error.message.includes("Render")) {
      return { hasError: true, errorType: "render" };
    }
    return { hasError: true, errorType: "unknown" };
  }

  componentDidCatch(error, errorInfo) {
    // エラーをログ出力
    console.error("Error:", error);
    console.error("Error Info:", errorInfo);
    // 外部サービスにエラーを送信（例: Sentry）
    if (this.props.logError) {
      this.props.logError(error, errorInfo);
    }
  }

  renderFallbackUI() {
    const { errorType } = this.state;
    switch (errorType) {
      case "network":
        return <h1>ネットワークエラーが発生しました。再試行してください。</h1>;
      case "render":
        return <h1>表示エラーが発生しました。サポートに連絡してください。</h1>;
      default:
        return <h1>予期しないエラーが発生しました。</h1>;
    }
  }

  render() {
    if (this.state.hasError) {
      // カスタマイズしたフォールバックUIを表示
      return this.renderFallbackUI();
    }
    // 子コンポーネントを通常通りレンダリング
    return this.props.children;
  }
}

export default CustomErrorBoundary;

設計上の注意点

エラータイプの識別ロジック
エラーの内容や発生状況に基づいて、エラータイプを適切に分類するロジックを設計します。
ユーザーへの影響を最小限に
ユーザーにとって分かりやすいメッセージを表示し、可能であれば復旧手段（例: 再試行ボタン）を提供します。
外部サービスの活用
発生したエラーの詳細を開発チームが迅速に把握できるよう、外部のエラー監視サービスと連携します。

次節では、React Contextを活用してエラーをさらに細かく分類・処理する方法を解説します。

コンテキストを活用したエラー分類

React Contextを活用することで、アプリケーション全体でエラー情報を共有し、特定のエラータイプに基づく処理を簡単に実現できます。この方法は、複数のコンポーネント間でエラーを管理する場合や、状況に応じたエラー処理を行う際に特に有効です。

React Contextとは

React Contextは、コンポーネントツリー全体にデータを供給するための仕組みです。React.createContext()を使用してコンテキストを作成し、Providerを通じてデータを供給、ConsumerまたはuseContextフックを利用してデータにアクセスします。

エラー分類のためのContext設計

以下のステップで、エラー分類のためのContextを実装します：

エラーコンテキストの作成
エラー情報を格納し、分類や状態を管理するためのContextを作成します。
エラーコンテキストプロバイダーの設計
Error Boundaryと連携し、エラー情報を供給します。
コンシューマーでエラー情報を利用
コンポーネントごとにエラー情報を利用し、特定の処理を実行します。

実装例: エラーコンテキスト

import React, { createContext, useContext, useState } from "react";

// エラーコンテキストの作成
const ErrorContext = createContext();

export const ErrorProvider = ({ children }) => {
  const [error, setError] = useState(null);

  const value = {
    error,
    setError,
  };

  return (
    <ErrorContext.Provider value={value}>
      {children}
    </ErrorContext.Provider>
  );
};

export const useError = () => useContext(ErrorContext);

エラーコンテキストとError Boundaryの連携

Error Boundaryからコンテキストにエラー情報を供給します。

import React from "react";
import { useError } from "./ErrorContext";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    const { setError } = this.props.errorContext;
    setError({ error, errorInfo }); // エラー情報をコンテキストに保存
    console.error("Error captured:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

export default function ErrorBoundaryWithContext(props) {
  const errorContext = useError();
  return <ErrorBoundary {...props} errorContext={errorContext} />;
}

エラー情報の活用例

コンシューマーコンポーネントでエラー情報を取得し、特定の処理を実行します。

import React from "react";
import { useError } from "./ErrorContext";

const ErrorDisplay = () => {
  const { error } = useError();

  if (!error) return null;

  return (
    <div>
      <h2>Error Occurred:</h2>
      <p>{error.error.toString()}</p>
    </div>
  );
};

export default ErrorDisplay;

利点

エラー情報の集中管理: コンテキストを使用することで、エラー情報を一元管理可能です。
柔軟なエラー処理: エラータイプに応じた処理を簡単に切り替えることができます。
再利用性の向上: エラー処理ロジックを異なるコンポーネント間で共有できます。

次節では、カスタムError Boundaryの具体的な実装例について詳しく説明します。

実装例: カスタムError Boundaryのコード

ここでは、異なるエラータイプを処理できるカスタムError Boundaryの具体的な実装例を紹介します。この例では、エラー情報を分類し、適切なフォールバックUIを表示します。また、エラー情報をReact Contextに格納して、アプリ全体で活用します。

カスタムError Boundaryの実装

以下は、エラーを分類し、エラー情報をコンテキストに保存するカスタムError Boundaryのコード例です。

import React from "react";
import { useError } from "./ErrorContext";

class CustomErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorType: null };
  }

  static getDerivedStateFromError(error) {
    // エラー内容に基づいてエラータイプを分類
    if (error.message.includes("Network")) {
      return { hasError: true, errorType: "network" };
    } else if (error.message.includes("Render")) {
      return { hasError: true, errorType: "render" };
    }
    return { hasError: true, errorType: "unknown" };
  }

  componentDidCatch(error, errorInfo) {
    const { setError } = this.props.errorContext;
    // コンテキストにエラー情報を保存
    setError({ error, errorInfo });
    console.error("Error caught:", error, errorInfo);
  }

  renderFallbackUI() {
    const { errorType } = this.state;
    switch (errorType) {
      case "network":
        return (
          <div>
            <h1>ネットワークエラーが発生しました。</h1>
            <p>インターネット接続を確認してください。</p>
          </div>
        );
      case "render":
        return (
          <div>
            <h1>レンダリングエラーが発生しました。</h1>
            <p>サポートにお問い合わせください。</p>
          </div>
        );
      default:
        return (
          <div>
            <h1>未知のエラーが発生しました。</h1>
            <p>再試行してください。</p>
          </div>
        );
    }
  }

  render() {
    if (this.state.hasError) {
      return this.renderFallbackUI();
    }
    return this.props.children;
  }
}

export default function ErrorBoundaryWithContext(props) {
  const errorContext = useError();
  return <CustomErrorBoundary {...props} errorContext={errorContext} />;
}

エラーコンテキストの利用例

作成したError Boundaryを使用し、エラー情報を表示する例です。

import React from "react";
import { ErrorProvider } from "./ErrorContext";
import ErrorBoundaryWithContext from "./CustomErrorBoundary";
import SomeComponent from "./SomeComponent";
import ErrorDisplay from "./ErrorDisplay";

function App() {
  return (
    <ErrorProvider>
      <ErrorBoundaryWithContext>
        <SomeComponent />
      </ErrorBoundaryWithContext>
      <ErrorDisplay />
    </ErrorProvider>
  );
}

export default App;

コードの仕組み

エラー分類
getDerivedStateFromErrorでエラータイプを分類し、stateで管理します。
フォールバックUIの表示
分類されたエラータイプに応じて異なるフォールバックUIをrenderFallbackUIで表示します。
エラー情報の保存
componentDidCatchでエラー情報をコンテキストに保存し、アプリ全体で利用可能にします。

利点

柔軟なフォールバックUI: エラータイプに応じたカスタムUIを表示できます。
集中管理: エラー情報をコンテキストに保存し、アプリ全体で参照可能。
再利用可能: 複数のコンポーネント間で同じError Boundaryロジックを共有できます。

次節では、このカスタムError Boundaryを実際のReactプロジェクトでどのように応用するかを解説します。

実際のプロジェクトでの応用例

カスタムError Boundaryは、実際のReactプロジェクトにおいて、複雑なエラー管理やユーザー体験の向上に活用されます。ここでは、実践的な応用例をいくつか紹介します。

応用例1: セクションごとのエラー処理

アプリケーション内の特定のセクションでのみエラーをキャッチし、他の部分への影響を最小限に抑える方法です。例えば、ダッシュボードの「統計情報セクション」でエラーが発生しても、他のセクションが正常に動作し続けるようにできます。

import React from "react";
import ErrorBoundaryWithContext from "./CustomErrorBoundary";
import DashboardStats from "./DashboardStats";
import DashboardCharts from "./DashboardCharts";

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <ErrorBoundaryWithContext>
        <DashboardStats />
      </ErrorBoundaryWithContext>
      <ErrorBoundaryWithContext>
        <DashboardCharts />
      </ErrorBoundaryWithContext>
    </div>
  );
}

export default Dashboard;

このようにセクションごとにError Boundaryを設定することで、特定のセクションで発生したエラーが他のセクションに影響を与えません。

応用例2: エラータイプに応じたログ送信

エラー情報を分類し、重要度の高いエラー（例: ネットワークエラー）だけを外部エラー監視サービスに送信する例です。

componentDidCatch(error, errorInfo) {
  const { setError } = this.props.errorContext;
  setError({ error, errorInfo });

  if (error.message.includes("Network")) {
    // ネットワークエラーを外部サービスに送信
    fetch("https://error-tracking-service.com/report", {
      method: "POST",
      body: JSON.stringify({ error, errorInfo }),
    });
  }

  console.error("Error caught:", error, errorInfo);
}

応用例3: 再試行ボタンの実装

エラー発生後に再試行可能なフォールバックUIを実装し、ユーザーがエラーから復帰しやすいようにします。

renderFallbackUI() {
  const { errorType } = this.state;
  const retry = () => this.setState({ hasError: false });

  switch (errorType) {
    case "network":
      return (
        <div>
          <h1>ネットワークエラーが発生しました。</h1>
          <button onClick={retry}>再試行</button>
        </div>
      );
    case "render":
      return (
        <div>
          <h1>レンダリングエラーが発生しました。</h1>
          <button onClick={retry}>再試行</button>
        </div>
      );
    default:
      return (
        <div>
          <h1>未知のエラーが発生しました。</h1>
          <button onClick={retry}>再試行</button>
        </div>
      );
  }
}

応用例4: ユーザーにとって親しみやすいエラーメッセージ

ブランドに合わせたデザインやフレンドリーな言葉遣いで、エラーメッセージをカスタマイズします。例えば、オンラインショップでは「現在、接続が不安定です。数秒後に再試行してください」のようなメッセージを表示することで、ユーザー体験を向上させます。

応用例5: コンポーネントライブラリとの統合

外部のUIコンポーネントライブラリと統合し、より洗練されたエラー表示を行う例です。例えば、Material-UIのAlertコンポーネントを使用して、エラーを視覚的に目立たせることができます。

import { Alert } from "@mui/material";

renderFallbackUI() {
  const { errorType } = this.state;

  switch (errorType) {
    case "network":
      return <Alert severity="error">ネットワークエラーが発生しました。</Alert>;
    case "render":
      return <Alert severity="error">レンダリングエラーが発生しました。</Alert>;
    default:
      return <Alert severity="error">未知のエラーが発生しました。</Alert>;
  }
}

応用例のまとめ

セクション単位のエラー処理により影響範囲を最小化
エラータイプごとのログ送信で問題の優先度を適切に管理
再試行機能や親しみやすいUIでユーザー体験を向上
外部コンポーネントとの統合でデザイン性を強化

これらの応用例を組み合わせることで、カスタムError Boundaryをより効果的に活用できます。次節では、実装したError Boundaryのテストとデバッグ方法について説明します。

テストとデバッグ方法

カスタムError Boundaryを実装した後は、その動作を確認するためのテストとデバッグが不可欠です。本節では、エラー処理が適切に行われているかを確認する具体的な方法を解説します。

ユニットテストでの確認

Error Boundaryのユニットテストを作成し、エラーが発生した場合にフォールバックUIが正しく表示されるかを確認します。以下は、JestとReact Testing Libraryを使用したテスト例です。

import React from "react";
import { render, screen } from "@testing-library/react";
import ErrorBoundaryWithContext from "./CustomErrorBoundary";
import { ErrorProvider } from "./ErrorContext";

const ProblematicComponent = () => {
  throw new Error("Test error");
};

test("フォールバックUIがエラー発生時に表示される", () => {
  render(
    <ErrorProvider>
      <ErrorBoundaryWithContext>
        <ProblematicComponent />
      </ErrorBoundaryWithContext>
    </ErrorProvider>
  );

  expect(screen.getByText("未知のエラーが発生しました。")).toBeInTheDocument();
});

このテストでは、エラーを発生させるコンポーネントをError Boundaryでラップし、フォールバックUIが正しく表示されることを確認しています。

コンテキストの動作確認

エラー情報がError Contextに正しく格納されているかを確認します。以下のテストコードで、エラー情報が正確に取得できることを検証します。

import { renderHook } from "@testing-library/react-hooks";
import { ErrorProvider, useError } from "./ErrorContext";

test("エラー情報が正しく保存される", () => {
  const { result } = renderHook(() => useError(), { wrapper: ErrorProvider });

  act(() => {
    result.current.setError({ error: new Error("Test error") });
  });

  expect(result.current.error.error.message).toBe("Test error");
});

エラー発生のシミュレーション

アプリケーションの実際の動作環境でエラーが正しくキャッチされるかをシミュレーションします。

function SimulateError({ triggerError }) {
  if (triggerError) {
    throw new Error("Simulated error");
  }
  return <div>正常に動作しています。</div>;
}

// 使用例
<ErrorBoundaryWithContext>
  <SimulateError triggerError={true} />
</ErrorBoundaryWithContext>;

上記のコードを開発環境で確認し、エラーが発生した場合にフォールバックUIが適切に表示されるかを目視で確認します。

ログの確認

componentDidCatchでログを出力し、エラー情報が正しく収集されているかを確認します。

componentDidCatch(error, errorInfo) {
  console.log("Error caught:", error.message);
  console.log("Error details:", errorInfo);
}

ブラウザのデベロッパーツールでログを確認し、エラー情報が適切に記録されているかをチェックします。

外部サービスへの通知テスト

外部エラー監視サービス（例: Sentry）と統合している場合は、テスト環境で通知が送信されているかを確認します。通知内容が正確であることを確認するには、サービスのダッシュボードを確認します。

デバッグ時の注意点

開発環境での動作確認
フォールバックUIやエラーログが開発環境で正しく動作することを確認します。
エラーの再現性
ユニットテストや手動テストで、再現性のあるエラーを発生させることに注力します。
テストケースの網羅性
ネットワークエラーやレンダリングエラーなど、複数のエラータイプについてテストを行い、それぞれのフォールバックUIが正しく動作するかを確認します。

まとめ

ユニットテストやコンテキストの動作確認を通じて、Error Boundaryが正しく機能していることを確認します。
実環境でのエラーシミュレーションや外部サービスとの統合テストを行い、実用性を検証します。
ログの確認やデバッグ時の注意点を意識しながら、予期しない問題にも対応できる設計を目指します。

次節では、記事全体の内容をまとめます。

まとめ

本記事では、ReactアプリケーションにおけるカスタムError Boundaryの作成方法を解説しました。Error Boundaryの基本的な仕組みから、異なるエラータイプを柔軟に処理するカスタム設計、React Contextを活用したエラー情報の集中管理、さらに実践的な応用例やテスト方法までを紹介しました。

適切なエラー処理を実装することで、ユーザー体験を向上させるだけでなく、開発者にとってもデバッグが容易な環境を構築できます。この記事を参考に、あなたのReactプロジェクトでも堅牢なエラー管理を実現してください。