ReactでError BoundaryとRouterを活用したエラー専用ページの作成方法を徹底解説

Reactアプリケーションでは、ユーザー体験を向上させるためにエラーハンドリングが不可欠です。特に、アプリが予期せぬエラーで停止することを防ぎ、ユーザーに適切な情報を提供する仕組みを整えることが重要です。本記事では、ReactのError Boundary機能とReact Routerを組み合わせ、エラー専用ページを作成する方法について解説します。この手法を活用することで、エラー発生時にもユーザーにスムーズな体験を提供できるようになります。

Error Boundaryの基本とその重要性

Error Boundaryとは何か

Error Boundaryは、Reactで提供されるエラーハンドリングの仕組みで、レンダリング中やライフサイクルメソッドで発生するエラーをキャッチして適切に処理します。これにより、アプリケーション全体がクラッシュするのを防ぎ、エラー発生時に特定のフォールバックUIを表示できます。

Error Boundaryの仕組み

Error Boundaryはクラスコンポーネントで実装され、componentDidCatchやgetDerivedStateFromErrorといった特定のライフサイクルメソッドを利用します。これにより、以下のような動作を実現します：

子コンポーネントで発生したエラーをキャッチ
エラーのログ出力やサードパーティのエラーログツールとの連携
フォールバックUIのレンダリング

なぜError Boundaryが重要なのか

エラーハンドリングを行わない場合、エラーが発生するとアプリケーション全体がクラッシュし、ユーザーは何が起きたのか分からないまま離脱してしまいます。Error Boundaryを使用することで、以下のようなメリットがあります：

アプリケーションの安定性向上：エラーがアプリ全体に波及するのを防止
ユーザー体験の向上：カスタマイズ可能なエラーページを表示し、利用継続を促進
デバッグの容易化：エラー内容を正確に記録し、開発者が迅速に問題を解決できる

制約と注意点

Error Boundaryは以下の制約を持つため、適切な設計が必要です：

イベントハンドラーでのエラーはキャッチできません。
非同期コード（setTimeoutやPromise）内のエラーも対象外です。
サーバーサイドレンダリング時には動作しません。

Error Boundaryの基本を理解し、アプリケーションのエラーハンドリングに活用することで、Reactアプリの信頼性を高めることができます。

React Routerの基本機能と活用法

React Routerとは

React Routerは、Reactアプリケーションで複数のページを管理し、ユーザーが異なるURLを訪れた際に適切なコンポーネントを表示するためのライブラリです。シングルページアプリケーション（SPA）のルーティングを簡単に実現でき、動的なナビゲーションをサポートします。

React Routerの基本的な構成要素

React Routerの主な構成要素は以下の通りです：

Router: アプリケーション全体のルート設定を行うコンポーネント。一般的にはBrowserRouterを使用します。
Route: 特定のパスに基づいて表示するコンポーネントを定義します。
Link: ナビゲーションを行うためのコンポーネントで、<a>タグの代替として利用します。
Switch: 最初に一致するルートのみをレンダリングするコンポーネントです。
useParamsやuseNavigate: React Router v6で追加された、動的ルートパラメータやプログラム的なナビゲーションをサポートするフック。

React Routerの基本的な使い方

React Routerを使ったルーティングは以下のように設定します。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>ホームページ</h2>;
}

function About() {
  return <h2>アバウトページ</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">ホーム</Link> | <Link to="/about">アバウト</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

React Routerの利点

動的なURL対応：パラメータ化されたルートを使用して、動的なデータ表示が可能です。
ユーザー体験の向上：ページリロードなしでスムーズなナビゲーションを提供します。
SEOフレンドリー：適切な設定でサーバーサイドレンダリングと併用可能です。

エラーハンドリングでの活用例

React Routerは、404ページやその他のエラーページを設定するのに便利です。特定のルートが存在しない場合に表示するページを簡単に定義できます。

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="*" element={<NotFound />} />
</Routes>

React Routerの基本機能を正しく理解し活用することで、柔軟で直感的なナビゲーションを構築できます。次に、Error Boundaryとの連携方法を解説します。

Error BoundaryとReact Routerの連携設計

連携設計の概要

Error BoundaryとReact Routerを連携させることで、Reactアプリケーションの特定のルートで発生するエラーを検出し、それに応じた専用のエラーページを表示する設計が可能です。この連携により、以下のような課題を解決できます：

ページ単位でのエラーハンドリング
ユーザーに分かりやすいエラーメッセージの提供
エラーの種類に応じたカスタマイズされたUIの表示

Error BoundaryとRouterの組み合わせ方

Error BoundaryをReact Routerのルートに適用するには、以下のような構成を採用します：

Error Boundaryをラップする：
Error Boundaryをルートコンポーネントや特定の子コンポーネントでラップし、エラー発生時にフォールバックUIを表示します。
React RouterでフォールバックUIをルーティングする：
React RouterのRoutes構成で、特定のルートがエラーを検出した際に専用のエラーページを表示します。

連携設計のコード例

以下は、Error BoundaryとReact Routerを連携する実装例です。

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// ErrorBoundary コンポーネント
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

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

  componentDidCatch(error, info) {
    console.error("Error captured:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h2>エラーが発生しました。ページをリロードしてください。</h2>;
    }
    return this.props.children;
  }
}

// 各ページコンポーネント
const Home = () => <h2>ホームページ</h2>;
const About = () => <h2>アバウトページ</h2>;
const ErrorPage = () => <h2>カスタムエラーページ</h2>;

// メインアプリ
function App() {
  return (
    <Router>
      <Routes>
        <Route
          path="/"
          element={
            <ErrorBoundary>
              <Home />
            </ErrorBoundary>
          }
        />
        <Route
          path="/about"
          element={
            <ErrorBoundary>
              <About />
            </ErrorBoundary>
          }
        />
        <Route path="*" element={<ErrorPage />} />
      </Routes>
    </Router>
  );
}

export default App;

設計時のポイント

グローバルとローカルのError Boundaryの使い分け：
アプリ全体を包むグローバルなError Boundaryは致命的なエラーの処理に使用。
ページやコンポーネント単位のローカルError Boundaryは特定機能のエラーハンドリングに最適。
フォールバックUIのカスタマイズ：
エラー内容に応じて適切なメッセージやアクションを含むUIを設計。

利点と応用

柔軟なエラー管理：ページ単位でのエラー処理が可能になり、ユーザーに見せたいエラーメッセージを細かく制御できます。
エラー状態の記録：componentDidCatch内でログを外部ツールに送信し、問題の特定と修正に役立てます。

このように、Error BoundaryとReact Routerの連携により、エラー発生時のUXを大幅に向上させる設計が実現します。次に、エラー専用ページのデザインについて解説します。

エラー専用ページのデザインガイドライン

エラー専用ページの役割

エラー専用ページは、ユーザーがアプリケーションの使用中に問題が発生した際に、混乱を最小限に抑え、次の行動を明確にするための重要な役割を果たします。単なるエラーメッセージではなく、ユーザー体験の一部としてデザインすることが求められます。

デザインの基本原則

エラー専用ページを効果的に設計するには、次の基本原則に従うことが重要です：

1. 明確で簡潔なメッセージ

エラーが何であるか、次に何をすべきかをユーザーがすぐに理解できるよう、簡潔で分かりやすいメッセージを表示します。
例：

「ページが見つかりません (404)」
「お探しのページは削除されたか、URLが間違っています。」

2. 視覚的な安心感

落ち着いた色合いやフレンドリーなアイコンを使用して、ユーザーに安心感を与えます。例えば、柔らかなトーンのイラストや、シンプルなデザインのエラーメッセージボックスを利用します。

3. アクションの提案

エラー発生時にユーザーがどのように問題を解決できるかを提案します。以下のようなボタンを含めると良いです：

ホームページへ戻るボタン
サポートセンターへのリンク
ページの再読み込みボタン

4. カスタマイズ性の確保

アプリケーションのブランドスタイルやトーンに合ったデザインを使用して、エラー専用ページも一貫したユーザー体験の一部とします。

エラー専用ページのコード例

以下は、404エラー専用ページのシンプルな実装例です：

import React from 'react';
import { useNavigate } from 'react-router-dom';

const ErrorPage = () => {
  const navigate = useNavigate();

  return (
    <div style={{ textAlign: 'center', padding: '50px' }}>
      <h1>404 - ページが見つかりません</h1>
      <p>申し訳ありませんが、お探しのページは見つかりませんでした。</p>
      <button
        style={{
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: '#fff',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer',
        }}
        onClick={() => navigate('/')}
      >
        ホームページに戻る
      </button>
    </div>
  );
};

export default ErrorPage;

デザインのベストプラクティス

一貫性のあるスタイル：
アプリケーション全体のデザインガイドラインに従ったフォント、色、スペーシングを使用します。
レスポンシブデザイン：
スマートフォンやタブレットでも見やすいよう、レスポンシブ対応を行います。
人間味のある要素：
ユーモアや親しみやすい言葉を使い、ユーザーの不安を和らげます。
例：「うーん、道に迷ったみたいですね！もう一度探してみませんか？」

カスタマイズと拡張性

エラー専用ページは、エラーの種類（404、500など）や発生した状況に応じて複数用意することも可能です。これにより、ユーザーに的確な情報を提供できます。

エラー専用ページを効果的にデザインすることで、問題発生時のユーザー体験を向上させ、アプリケーションへの信頼感を維持することができます。次に、具体的な実装例について解説します。

実装例: Error Boundaryを使ったエラーキャッチ

Error Boundaryの基本実装

Error Boundaryは、Reactクラスコンポーネントを使って実装され、エラー発生時に特定のフォールバックUIを表示するために使用されます。以下はシンプルなError Boundaryの実装例です。

import React from 'react';

// Error Boundaryクラス
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 by ErrorBoundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // フォールバックUIのレンダリング
      return (
        <div style={{ textAlign: 'center', padding: '20px' }}>
          <h1>エラーが発生しました</h1>
          <p>再読み込みするか、管理者にお問い合わせください。</p>
        </div>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

Error Boundaryを使用したエラーキャッチ

Error Boundaryは、アプリケーション全体または特定のコンポーネントを包む形で使用します。

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

const BuggyComponent = () => {
  // エラーを意図的に発生させる例
  throw new Error("意図的なエラーです！");
};

function App() {
  return (
    <ErrorBoundary>
      <h1>Reactアプリケーション</h1>
      <BuggyComponent />
    </ErrorBoundary>
  );
}

export default App;

動作確認

BuggyComponentでエラーが発生すると、Error Boundaryがエラーを検知し、状態をhasError: trueに更新してフォールバックUIを表示します。

カスタマイズのポイント

Error BoundaryのフォールバックUIをカスタマイズする際は、以下の点を考慮します：

ユーザー向けメッセージの明確化：
エラー内容や次のアクションを伝えるメッセージを工夫する。
エラーログの保存：
componentDidCatchメソッドでエラーデータを外部ログサービス（例：Sentry）に送信。
再試行機能の提供：
フォールバックUIにリトライボタンを実装することで、ユーザーが問題を解決できるよう支援します。

render() {
  if (this.state.hasError) {
    return (
      <div style={{ textAlign: 'center' }}>
        <h1>エラーが発生しました</h1>
        <button onClick={() => window.location.reload()}>再読み込み</button>
      </div>
    );
  }
  return this.props.children;
}

Error Boundaryの制限

Error Boundaryには以下の制限があるため、必要に応じて追加のエラーハンドリングを設計します：

非同期エラーやイベントハンドラー内のエラーはキャッチできません。
サーバーサイドレンダリングでは動作しません。

この実装例を活用すれば、Reactアプリケーションの安定性を大幅に向上させることが可能です。次に、React Routerでエラー専用ページを表示する方法を解説します。

実装例: React Routerでエラー専用ページを表示

React Routerによるエラーページのルーティング

React Routerを使用すると、特定のルートが見つからない場合やエラーが発生した場合にエラー専用ページを表示できます。以下にその基本的な実装方法を示します。

エラーページコンポーネントの作成

まず、404エラーページのコンポーネントを作成します。

import React from 'react';

const NotFoundPage = () => {
  return (
    <div style={{ textAlign: 'center', padding: '50px' }}>
      <h1>404 - ページが見つかりません</h1>
      <p>お探しのページは存在しないか、URLが間違っている可能性があります。</p>
      <a href="/" style={{ color: '#007bff', textDecoration: 'underline' }}>ホームに戻る</a>
    </div>
  );
};

export default NotFoundPage;

React Routerでのエラールーティング

404エラーページをReact Routerに組み込みます。React Router v6を使用した例を示します。

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFoundPage from './NotFoundPage';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </Router>
  );
};

export default App;

コードの動作

path="*" のルートは、他のどのルートにも一致しない場合にマッチします。
これにより、アプリケーションで未定義のURLにアクセスした際に、自動的に404エラーページが表示されます。

エラーページのカスタマイズ例

ユーザー体験を向上させるため、404エラーページに以下の要素を追加できます：

検索バー：
ユーザーが目的のページを検索できるようにする。
連絡先リンク：
問題が続く場合にサポートチームへ問い合わせるためのリンク。
関連ページのリスト：
ユーザーが戻りやすい主要なページへのリンクを提供。

const NotFoundPage = () => {
  return (
    <div style={{ textAlign: 'center', padding: '50px' }}>
      <h1>404 - ページが見つかりません</h1>
      <p>申し訳ありませんが、お探しのページが見つかりませんでした。</p>
      <input type="text" placeholder="検索する..." style={{ padding: '10px', margin: '20px' }} />
      <br />
      <a href="/" style={{ color: '#007bff', textDecoration: 'underline' }}>ホームに戻る</a>
    </div>
  );
};

特定エラー用の専用ページ

404以外のエラー（500など）の専用ページを作成し、ルーティングで条件に応じて切り替えることも可能です。

<Route path="/server-error" element={<ServerErrorPage />} />
<Route path="*" element={<NotFoundPage />} />

実装時の注意点

URL構成が適切であることを確認し、エラーとなる可能性のあるルートを特定します。
ユーザーにとって次のアクションが明確になるように設計します。

このようにReact Routerを活用することで、エラー専用ページのルーティングを簡単に実現できます。次に、Error BoundaryとRouterを統合した実装例を紹介します。

実装例: Error BoundaryとRouterの統合

概要

Error BoundaryとReact Routerを組み合わせることで、特定のルートやコンポーネントで発生したエラーをキャッチし、ユーザーに適切なエラーページを表示するシステムを構築できます。この統合により、エラーの影響を局所化し、ユーザー体験を向上させることが可能です。

統合の基本設計

Error Boundaryを個別のルートやコンポーネントでラップし、エラーが発生した場合にはReact Routerを利用して適切なエラーページへナビゲートします。以下の構成が基本的な設計です：

Error Boundaryをルートコンポーネントに適用。
React Routerでエラーページを定義。

コード例

以下は、Error BoundaryとReact Routerを統合したサンプル実装です。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';

// Error Boundary クラス
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 captured:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // フォールバックUIでエラーページへナビゲート
      return <NavigateToErrorPage />;
    }
    return this.props.children;
  }
}

// NavigateToErrorPage コンポーネント
const NavigateToErrorPage = () => {
  const navigate = useNavigate();
  React.useEffect(() => {
    navigate('/error', { replace: true });
  }, [navigate]);
  return null;
};

// 各ページコンポーネント
const Home = () => <h2>ホームページ</h2>;
const About = () => {
  throw new Error("Aboutページでエラー発生");
};
const ErrorPage = () => (
  <div style={{ textAlign: 'center', padding: '50px' }}>
    <h1>エラーが発生しました</h1>
    <p>お手数ですが、ホームページに戻って再試行してください。</p>
    <a href="/" style={{ color: '#007bff', textDecoration: 'underline' }}>ホームに戻る</a>
  </div>
);

// アプリのメインコンポーネント
const App = () => {
  return (
    <Router>
      <Routes>
        <Route
          path="/"
          element={
            <ErrorBoundary>
              <Home />
            </ErrorBoundary>
          }
        />
        <Route
          path="/about"
          element={
            <ErrorBoundary>
              <About />
            </ErrorBoundary>
          }
        />
        <Route path="/error" element={<ErrorPage />} />
      </Routes>
    </Router>
  );
};

export default App;

動作説明

Aboutコンポーネントでエラーが発生すると、Error Boundaryがエラーを検知します。
Error Boundary内でエラーが発生すると、NavigateToErrorPageコンポーネントがトリガーされ、React RouterのuseNavigateを用いて/errorルートにリダイレクトします。
/errorルートで定義されたErrorPageが表示されます。

利点

エラーの局所化：
特定のルートやコンポーネントのみをError Boundaryでラップすることで、エラーが他の部分に影響を及ぼしません。
再利用性の向上：
Error Boundaryとエラーページを分離して設計することで、アプリ全体で簡単に再利用可能です。
ユーザー体験の向上：
ユーザーにわかりやすいエラーメッセージを表示し、次の行動を促します。

注意点

非同期エラーやイベントハンドラー内のエラーはError Boundaryではキャッチされないため、適切な補完策を用意します。
ナビゲーション処理がユーザーにとって自然な動作となるよう、エラーページのUIを工夫します。

この統合により、Reactアプリケーションにおけるエラーハンドリングが強化され、安定したユーザー体験を提供できます。次に、デバッグとトラブルシューティングについて解説します。

デバッグとトラブルシューティング

開発中に起こり得る問題

Error BoundaryとReact Routerを組み合わせたエラー処理は強力ですが、実装時にいくつかの問題に直面する可能性があります。これらの問題を特定し、解決するための方法を解説します。

1. 非同期エラーがキャッチされない

Error Boundaryは非同期関数やイベントハンドラー内のエラーをキャッチできません。この場合は以下の方法を採用します：

解決策: try-catchとPromise.catchを併用

非同期コードでtry-catchブロックを使用し、Promiseのエラーを明示的に処理します。

const fetchData = async () => {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error('データの取得に失敗しました');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
    // エラーページへのリダイレクトやエラーメッセージの表示
  }
};

2. Error Boundary内で無限リダイレクトが発生

エラー検出後にリダイレクトが適切に処理されないと、無限ループに陥ることがあります。

解決策: 状態管理でリダイレクトを制御

Error Boundaryの状態を利用して、一度エラーが発生したらフォールバックUIのみをレンダリングするようにします。

if (this.state.hasError) {
  return <ErrorFallback />;
}

また、React RouterのuseNavigateを使用する際には、replace: trueオプションを使ってリダイレクト履歴を最適化します。

navigate('/error', { replace: true });

3. エラー情報の不足

Error Boundaryでエラーをキャッチしたものの、エラーの詳細情報が不明でデバッグが困難になる場合があります。

解決策: ログ出力と外部サービスの活用

Error BoundaryのcomponentDidCatchメソッドを利用してエラーログを出力するか、SentryやBugsnagなどのエラーログ収集サービスを統合します。

componentDidCatch(error, errorInfo) {
  console.error("Error captured:", error, errorInfo);
  // Sentryなどの外部サービスにエラーを送信
  Sentry.captureException(error);
}

4. エラーページのナビゲーションが機能しない

useNavigateやリンクが正しく動作せず、ユーザーがエラーページから他のページに移動できない場合があります。

解決策: ルーティング設定の確認

path="*"などのワイルドカードルートが適切に設定されているか確認します。
各ルートに明示的なパスを指定し、曖昧なルーティングを避けます。

5. ユーザー体験の欠如

エラーページが情報不足やデザイン不良で、ユーザーに不満を与える可能性があります。

解決策: フォールバックUIの改良

以下を実装することで、ユーザーがエラー状況をよりよく理解できるようになります：

詳細なエラーメッセージ
再試行ボタンやホームページリンク
サポート連絡先情報

const ErrorFallback = () => (
  <div style={{ textAlign: 'center' }}>
    <h1>エラーが発生しました</h1>
    <p>ページを再読み込みするか、サポートまでご連絡ください。</p>
    <button onClick={() => window.location.reload()}>再読み込み</button>
  </div>
);

トラブルシューティングのまとめ

Error BoundaryとReact Routerを統合したエラー処理では、エラーの発生原因を正確に特定し、適切な対策を講じることが重要です。以下を常に心掛けることで、スムーズな開発が可能になります：

エラーの種類（同期/非同期）に応じた適切なハンドリング
ログ出力や外部ツールによるエラーの可視化
ユーザーの行動を考慮したエラーページのデザイン

これらの方法を活用して、エラー処理のデバッグとトラブルシューティングを効果的に進めましょう。次に、複数エラー状態のハンドリングと応用について解説します。

応用: 複数エラー状態のハンドリング

複数のエラー状態に対応する必要性

アプリケーションの複雑化に伴い、異なる種類のエラー（ネットワークエラー、認証エラー、システムエラーなど）が発生する可能性があります。それぞれのエラーに適した処理を行うことで、ユーザー体験をさらに向上させることができます。

複数エラー状態の設計方法

複数のエラー状態を扱うには、エラータイプに応じて動作を切り替える柔軟な設計が求められます。以下のステップで実装を進めます：

エラーの種類を分類：エラーのタイプ（例：ネットワークエラー、認証エラー）を定義します。
エラー情報の管理：コンテキストや状態管理ライブラリ（Redux、React Context APIなど）を使用してエラー情報を集中管理します。
カスタムフォールバックUI：エラーの種類ごとに異なるフォールバックUIを提供します。

実装例: エラータイプごとの処理

以下は、エラータイプに応じて異なるフォールバックUIを表示する例です。

import React, { useState } from 'react';

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

  const resetError = () => setError(null);

  return (
    <ErrorBoundaryContext.Provider value={{ error, setError, resetError }}>
      {error ? <ErrorFallback error={error} resetError={resetError} /> : children}
    </ErrorBoundaryContext.Provider>
  );
};

const ErrorFallback = ({ error, resetError }) => {
  if (error.type === 'network') {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <h1>ネットワークエラー</h1>
        <p>インターネット接続を確認してください。</p>
        <button onClick={resetError}>再試行</button>
      </div>
    );
  }

  if (error.type === 'auth') {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <h1>認証エラー</h1>
        <p>ログイン情報が正しいか確認してください。</p>
        <a href="/login" style={{ color: '#007bff', textDecoration: 'underline' }}>ログインページに移動</a>
      </div>
    );
  }

  return (
    <div style={{ textAlign: 'center', padding: '50px' }}>
      <h1>エラーが発生しました</h1>
      <p>お手数ですが、管理者にお問い合わせください。</p>
    </div>
  );
};

// 各ページでエラーを発生させる例
const About = () => {
  const { setError } = React.useContext(ErrorBoundaryContext);

  React.useEffect(() => {
    setError({ type: 'network', message: '通信に失敗しました' });
  }, [setError]);

  return null;
};

const App = () => (
  <ErrorBoundary>
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  </ErrorBoundary>
);

export default App;

拡張例

ロギングと通知：

各エラータイプをログとして記録し、開発者や運用チームに通知。
SentryやLogRocketなどを統合してエラーを監視。

動的エラーコンポーネント：

エラータイプに応じた動的なコンポーネントを作成し、コードの再利用性を向上。

多言語対応：

エラーメッセージを多言語化し、国際的なユーザーにも対応。

まとめ

複数のエラー状態に対応する設計を導入することで、エラーが発生した際のユーザー体験を大幅に改善できます。エラーの種類に応じた適切な処理とフォールバックUIの提供は、Reactアプリケーションの信頼性を高める重要な手段となります。次はこれらの知識を応用して、より効果的なエラーハンドリングを実現してください。

まとめ

本記事では、ReactアプリケーションでError BoundaryとReact Routerを統合してエラー専用ページを作成する方法を解説しました。Error Boundaryを利用したエラーキャッチの仕組みから、React Routerでのエラーページ表示、さらに複数エラー状態への対応と応用例まで詳細に紹介しました。

適切なエラーハンドリングを導入することで、エラー発生時のユーザー体験を向上させ、アプリケーションの信頼性と安定性を確保できます。今回学んだ内容を基に、実際のプロジェクトに応用してみてください。