MENU
  1. ホーム
  2. React
  3. ReactとTypeScriptでError Boundaryを実装する方法と実例

ReactとTypeScriptでError Boundaryを実装する方法と実例

React

Reactアプリケーションでエラーが発生した場合、その影響がアプリケーション全体に波及することがあります。特に予期せぬエラーがUI全体のクラッシュを引き起こすと、ユーザー体験が著しく低下します。この問題に対処するために、ReactではError Boundaryが導入されました。本記事では、TypeScriptを活用し、実際のプロジェクトで役立つError Boundaryの実装方法を解説します。エラーを適切に管理することで、Reactアプリケーションの信頼性と安定性を向上させる方法を学んでいきます。

目次

Error Boundaryの基本概念


Error Boundaryは、Reactコンポーネントツリー内で発生するJavaScriptエラーを検出し、それを安全に処理するための仕組みです。具体的には、Error Boundaryを使用することで、アプリケーション全体をクラッシュさせず、特定のUIコンポーネントを置き換えたりエラーメッセージを表示することが可能になります。

Error Boundaryが必要な理由


Reactは、通常の状態ではJavaScriptエラーをキャッチして処理する仕組みがありません。そのため、アプリケーション全体がクラッシュし、ユーザーが真っ白な画面を見る状況に陥ることがあります。Error Boundaryを導入することで、これを未然に防ぎ、より良いエラーハンドリング体験を提供できます。

どのように動作するのか


Error Boundaryはクラスコンポーネントとして作成され、以下のライフサイクルメソッドを実装します。

  • static getDerivedStateFromError(error: Error): エラーが発生した際に新しい状態を返します。
  • componentDidCatch(error: Error, info: ErrorInfo): エラーの詳細情報をログに記録したり、外部サービスに送信します。

Error Boundaryの制限

  • Error Boundaryは、子コンポーネントのレンダリングエラーのみをキャッチします。
  • 非同期処理（Promise内のエラー）は対象外です。そのため、非同期エラーには追加のエラーハンドリングが必要です。

Error Boundaryの基本概念を理解することで、次に実装に進む準備が整います。

Error BoundaryとTypeScriptのメリット

エラー管理の強化


TypeScriptを使用することで、Error Boundaryの型安全性が向上し、エラー処理の信頼性が高まります。具体的には、エラーやエラーメッセージの型を明確に定義することで、コードの予測可能性を高め、不具合の発生を抑えることができます。

開発者体験の向上

  • コード補完のサポート: TypeScriptの型定義により、Error Boundaryのメソッドやプロパティの候補が補完されるため、迅速かつ正確にコーディングが可能になります。
  • エラーの早期発見: コンパイル時に型エラーが検出されるため、実行時エラーのリスクを減らせます。

型定義による柔軟な拡張性


TypeScriptを利用することで、Error Boundaryの設計が柔軟になります。たとえば、以下のような型定義を導入できます。

  • エラー型: 特定のエラーオブジェクトに限定したハンドリング。
  • 子コンポーネントの型: Error Boundaryが正しいコンポーネント構造を持つことを保証します。

例: TypeScriptでの型定義


以下は、TypeScriptで型を使用してError Boundaryを定義する例です。

interface ErrorBoundaryProps {
  children: React.ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
}

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

  static getDerivedStateFromError(_: Error): ErrorBoundaryState {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    console.error("ErrorBoundary caught an error", error, errorInfo);
  }

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

エラーハンドリングの効率化


TypeScriptによって型の制約が明確化されるため、Error Boundaryを効率的に適用し、エラー発生時のリカバリー手段を一貫して実装できます。このような特性は、大規模プロジェクトや複数人での開発環境で特に有益です。

TypeScriptを組み合わせることで、ReactのError Boundaryが持つポテンシャルを最大限に引き出せます。

Error Boundaryを使用する際の制約と注意点

Error Boundaryの適用範囲


Error Boundaryは以下のエラーをキャッチしますが、すべてのエラーに対応するわけではありません。

  • キャッチ可能なエラー:
  • レンダリング中に発生するエラー
  • ライフサイクルメソッド内のエラー
  • コンストラクタ内のエラー
  • キャッチ不可能なエラー:
  • 非同期コード（例: setTimeoutやPromise内）のエラー
  • イベントハンドラ内のエラー
  • サーバーサイドレンダリング時のエラー

これらの場合、追加のエラーハンドリング手段（try-catchやwindow.onerror）が必要です。

UIの一貫性を考慮


Error Boundaryの導入により、アプリケーションのUIが一時的に変更される場合があります。たとえば、エラーが発生した際に「エラーメッセージ」や「エラー画面」が表示されます。これにより、ユーザー体験が損なわれる可能性があるため、以下のポイントに注意する必要があります。

  • ユーザーにとって有益なエラーメッセージを表示する。
  • 他の正常なコンポーネントには影響を与えないように設計する。

Error Boundaryの過剰使用を避ける


Error Boundaryをすべてのコンポーネントに適用すると、エラーの追跡が困難になる可能性があります。適切な場所で使用するために、以下を考慮してください。

  • 主要なレイアウトコンポーネント: 全体のUIを保護。
  • 特定のリスクが高いコンポーネント: 外部APIとの連携部分や動的なデータ取得部分に適用。

リカバリ処理の計画


Error Boundaryを使用した後にエラーからリカバリする方法を計画することが重要です。以下を考慮してください。

  • 再試行ボタンの提供: ユーザーが簡単に再試行できる仕組みを用意する。
  • 状態のリセット: 必要に応じて、状態を初期化して正常な動作に戻す。

ベストプラクティス

  • ログの記録: componentDidCatch内でエラーをログに記録することで、発生したエラーを追跡可能にする。
  • デバッグ環境での確認: 開発中にError Boundaryが適切に動作していることを確認する。

Error Boundaryは強力なツールですが、適切に設計しないとアプリケーション全体の複雑さが増す可能性があります。制約と注意点を理解することで、Error Boundaryを効果的に活用できます。

TypeScriptでのError Boundaryクラスの構築

TypeScriptを用いたError Boundaryの基本構造


TypeScriptを利用することで、Error Boundaryを型安全に実装できます。以下はError Boundaryクラスの基本構造です。

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

interface ErrorBoundaryProps {
  children: ReactNode; // 子コンポーネント
  fallback: ReactNode; // エラー発生時に表示するUI
}

interface ErrorBoundaryState {
  hasError: boolean; // エラーの有無を表す状態
}

class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false }; // 初期状態はエラーなし
  }

  static getDerivedStateFromError(_: Error): ErrorBoundaryState {
    // エラーが発生した場合、状態を更新する
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    // エラー情報をログに記録する
    console.error("Error captured in ErrorBoundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // エラーが発生した場合、fallbackを表示する
      return this.props.fallback;
    }
    // エラーが発生していない場合、子コンポーネントをレンダリングする
    return this.props.children;
  }
}

export default ErrorBoundary;

コードの詳細な解説

プロパティと状態の型定義

  • ErrorBoundaryProps: childrenとfallbackの型を定義しています。これにより、親コンポーネントが適切な型のプロパティを渡すことが保証されます。
  • ErrorBoundaryState: hasErrorの状態を持ち、エラーが発生したかどうかを追跡します。

主要メソッド

  • getDerivedStateFromError: エラー発生時に呼び出され、エラーフラグを立てます。この状態を基に、エラーメッセージを表示するか、通常のコンテンツを表示するかを制御します。
  • componentDidCatch: キャッチしたエラーをログに記録したり、外部のエラートラッキングサービス（例: Sentry, LogRocket）に送信する処理を記述できます。

レンダリング部分

  • エラー時: this.props.fallbackを表示し、ユーザーがエラーを認識できるようにします。
  • 通常時: 子コンポーネント（this.props.children）をそのままレンダリングします。

TypeScript導入の利点

  • 型安全性: プロパティや状態の型を保証することで、バグの発生を予防。
  • 開発支援: 型定義により、コード補完やエラーの早期発見が可能。

実用例: Fallback UIのカスタマイズ


以下は、Error BoundaryのfallbackプロパティにカスタムUIを渡す例です。

import ErrorBoundary from "./ErrorBoundary";

function App() {
  return (
    <ErrorBoundary fallback={<h1>Oops! Something went wrong.</h1>}>
      <MainComponent />
    </ErrorBoundary>
  );
}

export default App;

このように、TypeScriptを使用してError Boundaryを構築すると、安全性と拡張性を両立したエラーハンドリングが実現できます。

カスタムError Boundaryコンポーネントの作成

使いやすいカスタムError Boundaryの設計


汎用的に使用できるカスタムError Boundaryを設計することで、アプリケーションのエラーハンドリングを効率化できます。以下は、エラー発生時にユーザーにフィードバックを提供するカスタムError Boundaryの例です。

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

interface CustomErrorBoundaryProps {
  children: ReactNode; // 子コンポーネント
  fallbackUI?: ReactNode; // デフォルトのエラーメッセージをカスタマイズ可能
  onError?: (error: Error, errorInfo: ErrorInfo) => void; // エラー時のコールバック
}

interface CustomErrorBoundaryState {
  hasError: boolean; // エラー発生フラグ
}

class CustomErrorBoundary extends React.Component<CustomErrorBoundaryProps, CustomErrorBoundaryState> {
  constructor(props: CustomErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false }; // 初期状態を設定
  }

  static getDerivedStateFromError(_: Error): CustomErrorBoundaryState {
    // エラー発生時に状態を更新
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    // エラーをログに記録
    console.error("Error captured:", error, errorInfo);

    // onErrorコールバックが提供されていれば実行
    if (this.props.onError) {
      this.props.onError(error, errorInfo);
    }
  }

  render() {
    if (this.state.hasError) {
      // fallbackUIが提供されていれば表示、それ以外はデフォルトのメッセージを表示
      return this.props.fallbackUI || <h1>Something went wrong.</h1>;
    }

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

export default CustomErrorBoundary;

カスタムコンポーネントのポイント

1. オプションの`fallbackUI`プロパティ


デフォルトのエラーメッセージに加え、任意でUIをカスタマイズできるように設計しています。たとえば、エラー発生時に特定の画像や詳細なエラーメッセージを表示したい場合に便利です。

2. エラーイベントハンドリング


onErrorプロパティを使用して、エラー時の追加処理（ログ送信やユーザー通知など）を行えます。これにより、エラー追跡ツール（例: Sentry）との連携も容易になります。

3. 状態管理


エラー発生をhasError状態で追跡し、UIの切り替えを制御しています。これにより、簡単にエラー画面を表示できます。

使用例: アプリケーションでの実装


以下は、カスタムError Boundaryをアプリケーションに導入する例です。

import React from "react";
import CustomErrorBoundary from "./CustomErrorBoundary";

function ProblematicComponent() {
  throw new Error("This is a test error!");
}

function App() {
  return (
    <CustomErrorBoundary
      fallbackUI={<h2>Oops! An unexpected error occurred.</h2>}
      onError={(error, info) => {
        console.log("Logged Error:", error);
        console.log("Logged Info:", info);
      }}
    >
      <ProblematicComponent />
    </CustomErrorBoundary>
  );
}

export default App;

応用例: ダッシュボード内でのError Boundary


以下のように、特定のセクションごとにError Boundaryを適用することで、エラーの影響を局所化できます。

function Dashboard() {
  return (
    <div>
      <CustomErrorBoundary fallbackUI={<h3>Error loading statistics.</h3>}>
        <StatisticsWidget />
      </CustomErrorBoundary>
      <CustomErrorBoundary fallbackUI={<h3>Error loading messages.</h3>}>
        <MessagesWidget />
      </CustomErrorBoundary>
    </div>
  );
}

このようにカスタマイズされたError Boundaryを利用すれば、アプリケーション全体のエラー耐性が向上し、ユーザー体験を損なうリスクを最小化できます。

Error Boundaryのアプリケーション内での使用例

アプリケーションへのError Boundaryの統合


Error Boundaryを適切な場所に配置することで、エラー発生時の影響を最小限に抑え、アプリケーション全体の信頼性を高めることができます。以下では、具体的な適用例を見ていきます。

1. グローバルError Boundary


アプリケーション全体を保護するために、ルートコンポーネントにError Boundaryを適用します。

import React from "react";
import ReactDOM from "react-dom";
import CustomErrorBoundary from "./CustomErrorBoundary";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <CustomErrorBoundary fallbackUI={<h1>Something went wrong in the app!</h1>}>
      <App />
    </CustomErrorBoundary>
  </React.StrictMode>,
  document.getElementById("root")
);

この方法では、アプリケーション全体で発生したエラーを検出し、ユーザーにエラー状態を明示できます。

2. セクションごとのError Boundary


特定の機能やセクションごとにError Boundaryを配置することで、エラーの影響を局所化します。

function Dashboard() {
  return (
    <div>
      <CustomErrorBoundary fallbackUI={<h2>Failed to load statistics</h2>}>
        <Statistics />
      </CustomErrorBoundary>
      <CustomErrorBoundary fallbackUI={<h2>Failed to load messages</h2>}>
        <Messages />
      </CustomErrorBoundary>
    </div>
  );
}

この例では、StatisticsやMessagesのコンポーネント内でエラーが発生した場合、それぞれに定義されたエラーメッセージのみが表示されます。他のセクションは影響を受けません。

3. 外部APIを扱うコンポーネントの保護


外部APIとの通信に依存するコンポーネントでError Boundaryを使用し、ネットワークエラーや予期せぬデータフォーマットエラーに備えます。

function UserProfile({ userId }: { userId: string }) {
  if (!userId) {
    throw new Error("User ID is required!");
  }

  // 外部APIからユーザーデータを取得
  // エラーが発生する可能性がある箇所
  const userData = fetchUserData(userId);

  return <div>{userData.name}</div>;
}

function App() {
  return (
    <CustomErrorBoundary fallbackUI={<h2>Unable to load user profile.</h2>}>
      <UserProfile userId="12345" />
    </CustomErrorBoundary>
  );
}

エラーハンドリングの結果を活用する


Error Boundaryを導入することで、以下のような改善が可能です。

  • 特定のコンポーネントに影響を限定し、他の部分の動作を保証する。
  • エラー時にユーザーに対して適切なメッセージや操作案内を表示する。
  • エラーの詳細をログに記録し、後でデバッグや修正に役立てる。

実用例のポイント

  1. 重要度の高い部分に適用: ダッシュボードや主要機能など、エラーが発生しても他の機能に影響を与えないように設計する。
  2. カスタマイズ可能なfallbackUI: セクションに応じた適切なエラーメッセージを表示することで、ユーザー体験を向上させる。
  3. ログの活用: componentDidCatchでエラー詳細を記録することで、問題解決の速度を上げる。

このようにError Boundaryをアプリケーションに適切に統合することで、エラー発生時のリスクを大幅に軽減し、ユーザー体験を向上させることができます。

実用的なエラーメッセージ表示のデザイン

効果的なエラーメッセージの設計指針


Error Boundaryでエラー発生時に表示するメッセージは、ユーザー体験に大きな影響を与えます。適切に設計されたエラーメッセージは、ユーザーを混乱させず、次の行動を促す助けになります。

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


エラー内容を簡潔かつ正確に説明し、技術的な用語を避けることで、ユーザーにとって理解しやすい内容にします。
例:
「予期しないエラーが発生しました。ページをリロードしてください。」

2. ユーザーが行動を取れる情報を提供


ユーザーが次にすべき行動を明確に提示します。
例:

  • 「再試行するには、以下のボタンをクリックしてください。」
  • 「問題が解決しない場合は、サポートにお問い合わせください。」

3. デザインで安心感を与える


エラーメッセージのデザインは、シンプルかつ目に優しい配色を採用し、エラーの深刻さを感じさせないようにします。

  • 背景色: 優しい赤や淡い黄色で注意を喚起。
  • アイコン: シンプルなエラーマークや警告アイコンを使用。
  • フォント: 読みやすく、落ち着いたトーンのフォント。

カスタムUIでのエラーメッセージ表示


以下は、Error Boundary内でエラーメッセージをカスタマイズする例です。

import React from "react";

function FallbackUI() {
  return (
    <div style={{ textAlign: "center", padding: "20px" }}>
      <h2>Oops! Something went wrong.</h2>
      <p>
        We’re sorry for the inconvenience. Please try the following options:
      </p>
      <ul>
        <li>Refresh the page.</li>
        <li>Contact support if the issue persists.</li>
      </ul>
      <button
        onClick={() => window.location.reload()}
        style={{
          padding: "10px 20px",
          backgroundColor: "#007BFF",
          color: "#FFF",
          border: "none",
          borderRadius: "5px",
          cursor: "pointer",
        }}
      >
        Refresh
      </button>
    </div>
  );
}

export default FallbackUI;

リアルタイムなフィードバックを提供


エラーメッセージに、リアルタイムで再試行可能なボタンや、ログ情報を取得する機能を組み込むと、ユーザーの満足度が向上します。

例: エラートラッキングIDを表示して、問い合わせ時に役立てる。

<p>Error ID: {generateErrorId()}</p>

一般的なエラーメッセージの種類

ネットワークエラー


「サーバーへの接続に失敗しました。インターネット接続を確認してください。」

認証エラー


「ログインセッションが切れました。再ログインしてください。」

不明なエラー


「不明なエラーが発生しました。サポートチームにお問い合わせください。」

エラーデザインを改善するテクニック

  1. ログの記録: ユーザーには表示しない詳細情報をバックエンドやログツールに記録します。
  2. インタラクティブなUI: 再試行ボタンやフォームを使い、問題解決を促進します。
  3. コンテキストに応じたメッセージ: 状況に適したエラーメッセージを動的に生成します。

エラーメッセージのベストプラクティス

  • 透明性: 問題の発生理由を可能な範囲で明示する。
  • 簡潔性: 不要な情報を排除し、必要な情報だけを提示する。
  • 親切さ: ユーザーに寄り添う言葉を選ぶ。

これらを踏まえたエラーメッセージのデザインは、エラー発生時のユーザーのフラストレーションを軽減し、信頼性の高いアプリケーション体験を提供します。

Error Boundary実装後のテストとデバッグ方法

Error Boundaryの動作確認を行う理由


Error Boundaryは、予期しないエラーが発生した際にユーザー体験を保護する重要な機能です。実装後に動作確認を行うことで、以下の点を確認できます。

  • エラーが正しくキャッチされているか。
  • Fallback UIが期待どおりに表示されるか。
  • ログやエラー情報が適切に記録されているか。

テストの手順

1. 故意にエラーを発生させる


Error Boundaryの動作を確認するために、意図的にエラーを発生させます。たとえば、以下のようにエラーを投げます。

function ProblematicComponent() {
  throw new Error("Test error");
}

function App() {
  return (
    <CustomErrorBoundary fallbackUI={<h1>Something went wrong!</h1>}>
      <ProblematicComponent />
    </CustomErrorBoundary>
  );
}

このテストにより、Fallback UIが正しく表示されるかを確認できます。

2. `componentDidCatch`の動作確認


Error BoundaryのcomponentDidCatchメソッドがエラーをキャッチし、ログを記録しているか確認します。以下のコードで、コンソールにエラーログが出力されることをテストします。

componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
  console.error("Error captured:", error, errorInfo);
}

期待する出力例:

Error captured: Error: Test error

3. ユーザーフィードバックの確認


Fallback UIがユーザーにわかりやすいメッセージを表示しているか確認します。UIのデザインやテキスト内容が適切かを確認してください。

デバッグ方法

1. コンソールログを活用


Error BoundaryのcomponentDidCatchメソッドに適切なログを追加することで、エラーの発生場所や詳細を特定できます。

componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
  console.error("Caught an error:", error.message);
  console.error("Error details:", errorInfo.componentStack);
}

2. エラートラッキングツールを導入


SentryやBugsnagなどのエラートラッキングツールを導入し、エラー発生時に自動でエラー情報を収集・通知する仕組みを構築します。

import * as Sentry from "@sentry/react";

componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
  Sentry.captureException(error, { extra: errorInfo });
}

3. 単体テストと統合テスト


Error Boundaryの単体テストを行い、エラー時の動作を確認します。たとえば、JestやReact Testing Libraryを使用して以下をテストします。

  • エラーが発生した場合、Fallback UIがレンダリングされる。
  • 正常な場合、子コンポーネントがレンダリングされる。
import { render, screen } from "@testing-library/react";
import CustomErrorBoundary from "./CustomErrorBoundary";

test("renders fallback UI on error", () => {
  const ProblematicComponent = () => {
    throw new Error("Test error");
  };

  render(
    <CustomErrorBoundary fallbackUI={<h1>Fallback UI</h1>}>
      <ProblematicComponent />
    </CustomErrorBoundary>
  );

  expect(screen.getByText("Fallback UI")).toBeInTheDocument();
});

Error Boundaryテストの注意点

  • 非同期エラーは別途テストが必要です（Error Boundaryではキャッチされません）。
  • イベントハンドラ内でのエラーも対象外です。この場合はtry-catchを使用します。

トラブルシューティングのポイント

  1. エラーがキャッチされない場合: 非同期エラーかどうかを確認し、Promiseやasync/awaitでtry-catchを追加します。
  2. Fallback UIが表示されない場合: Error Boundaryの子コンポーネントツリーを確認し、構造が正しいか検証します。
  3. ログが出力されない場合: componentDidCatchの実装に問題がないか確認します。

これらのテストとデバッグを行うことで、Error Boundaryが確実に動作し、Reactアプリケーションの信頼性を高めることができます。

応用例：大規模ReactプロジェクトでのError Boundaryの活用

大規模プロジェクトにおけるError Boundaryの必要性


大規模なReactプロジェクトでは、複数のチームやコンポーネントが関与するため、エラーが発生するリスクが増大します。Error Boundaryを活用することで、以下のようなメリットが得られます。

  • エラーの局所化: 特定のコンポーネントやセクションだけを保護し、他の部分に影響を与えない。
  • メンテナンス性の向上: エラーが発生した場所を迅速に特定し、対応が容易になる。
  • ユーザー体験の維持: エラーが発生しても全体のUIがクラッシュしない設計が可能。

プロジェクトの構造に応じたError Boundaryの設置

1. ページ単位でのError Boundary


ページ全体を保護するError Boundaryを適用します。これにより、ページ内の任意の場所で発生したエラーが他のページに影響を与えません。

function App() {
  return (
    <div>
      <CustomErrorBoundary fallbackUI={<h1>Page error occurred!</h1>}>
        <HomePage />
      </CustomErrorBoundary>
      <CustomErrorBoundary fallbackUI={<h1>Page error occurred!</h1>}>
        <ProfilePage />
      </CustomErrorBoundary>
    </div>
  );
}

2. 特定の機能やウィジェットの保護


複雑な機能や外部APIと連携するウィジェットを保護するためにError Boundaryを導入します。

function Dashboard() {
  return (
    <div>
      <CustomErrorBoundary fallbackUI={<h3>Unable to load user statistics</h3>}>
        <UserStatistics />
      </CustomErrorBoundary>
      <CustomErrorBoundary fallbackUI={<h3>Unable to load recent activities</h3>}>
        <RecentActivities />
      </CustomErrorBoundary>
    </div>
  );
}

Error Boundaryの分離と再利用


複数のセクションで同じError Boundaryを使用する場合、再利用可能な設計にすることでメンテナンスを簡略化できます。

function WithErrorBoundary({ children, fallbackUI }: { children: React.ReactNode; fallbackUI: React.ReactNode }) {
  return <CustomErrorBoundary fallbackUI={fallbackUI}>{children}</CustomErrorBoundary>;
}

function App() {
  return (
    <WithErrorBoundary fallbackUI={<h1>Something went wrong!</h1>}>
      <MainComponent />
    </WithErrorBoundary>
  );
}

エラーハンドリングの自動化とロギング


大規模プロジェクトでは、エラーを手動で追跡するのは非効率です。エラーログを自動で記録し、分析ツールに送信する仕組みを導入します。

  • Sentryの導入例:
import * as Sentry from "@sentry/react";

function initializeSentry() {
  Sentry.init({
    dsn: "YOUR_SENTRY_DSN",
  });
}

function App() {
  initializeSentry();

  return (
    <CustomErrorBoundary
      fallbackUI={<h1>Application error occurred!</h1>}
      onError={(error, errorInfo) => {
        Sentry.captureException(error, { extra: errorInfo });
      }}
    >
      <MainApplication />
    </CustomErrorBoundary>
  );
}

複雑なUI要件への対応


Error Boundaryに条件付きレンダリングを導入して、エラー時に異なるメッセージやデザインを表示します。たとえば、管理者ユーザーには詳細なエラーメッセージを表示し、一般ユーザーには簡潔なメッセージを表示します。

function AdminFallback({ errorDetails }: { errorDetails: string }) {
  return <pre>Error Details: {errorDetails}</pre>;
}

function GeneralFallback() {
  return <h1>Something went wrong. Please try again later.</h1>;
}

function App({ isAdmin }: { isAdmin: boolean }) {
  return (
    <CustomErrorBoundary
      fallbackUI={isAdmin ? <AdminFallback errorDetails="Stack trace here..." /> : <GeneralFallback />}
    >
      <MainApplication />
    </CustomErrorBoundary>
  );
}

大規模プロジェクトでの成果

  • エラーの局所化と迅速な修正が可能になる。
  • ロギングやトラッキングを通じて問題の再現性を向上。
  • ユーザー体験を損なわず、信頼性の高いアプリケーションを提供可能。

Error Boundaryは、大規模プロジェクトの安定性と保守性を大きく向上させる重要なツールです。その適切な活用によって、スケールに応じたエラーハンドリングが実現します。

まとめ


本記事では、ReactアプリケーションにおけるError Boundaryの基本から、TypeScriptを活用した実装、実用例、そして大規模プロジェクトでの応用までを解説しました。Error Boundaryを導入することで、予期しないエラーによるアプリケーション全体のクラッシュを防ぎ、ユーザー体験を大きく向上させることができます。

特にTypeScriptを併用することで、型安全性を保ちながら柔軟かつ効率的なエラーハンドリングが可能となります。エラーログの自動化やセクションごとのError Boundaryの活用など、さまざまな実践方法を取り入れて、信頼性の高いReactアプリケーションを構築しましょう。適切なエラー管理は、ユーザーと開発者の双方にとって価値のある投資です。

React
エラーハンドリング React TypeScript

コメント

コメントする

目次