React Error Boundaryを使ってエラーをSentryに送信する方法を徹底解説

Reactアプリケーションの開発において、エラーハンドリングはユーザー体験を損なわないために極めて重要な要素です。しかし、Reactが提供する標準的なエラーハンドリングでは、コンポーネントの内部で発生する予期しないエラーを簡単に管理することが難しい場合があります。このような状況に対処するため、ReactではError Boundaryという機能が導入されています。

Error Boundaryを使えば、アプリケーション全体がクラッシュすることを防ぎ、特定のコンポーネントでエラーを安全に処理できます。本記事では、Error Boundaryの基本的な概念や実装方法に加えて、Sentryのような外部エラーログサービスを利用してエラーを監視し、迅速に対応する方法を徹底解説します。

Error Boundaryとは？

Error Boundaryは、React 16で導入された機能で、子コンポーネントツリー内で発生したJavaScriptエラーをキャッチし、アプリケーション全体のクラッシュを防ぐための特別なReactコンポーネントです。

Error Boundaryの仕組み

Error Boundaryは、以下の2つのライフサイクルメソッドを使用してエラーを検出し、適切に処理します。

• static getDerivedStateFromError(error)
  エラーが発生した際に呼び出され、エラーメッセージをステートに保存できます。
• componentDidCatch(error, info)
  実際にエラーの詳細とその発生場所に関する情報をログに記録できます。

どのようなエラーをキャッチできるのか

Error Boundaryは、以下の状況で発生するエラーをキャッチします：

• 子コンポーネントのレンダリング中のエラー
• 子コンポーネントのライフサイクルメソッド内でのエラー
• 子コンポーネントのイベントハンドラー内のエラー（ただし、これには適用されません。手動でtry-catchが必要です）

Error Boundaryの特徴

• 再利用可能: アプリケーション内の複数の部分でError Boundaryを利用することが可能です。
• エラーを隔離: エラーが発生したコンポーネントのツリーに影響を限定し、他の部分への影響を防ぎます。

Error Boundaryは、エラー処理を強化するための強力なツールであり、ユーザー体験を維持する上で重要な役割を果たします。次のセクションでは、Error Boundaryの具体的な実装方法について説明します。

Error Boundaryの実装方法

Error Boundaryを実装するには、クラスコンポーネントを使用します。このセクションでは、基本的なコード例と実装時の注意点を解説します。

基本的な実装例

以下は、Error Boundaryの基本的な構造を示すサンプルコードです：

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // エラーが発生した際にステートを更新
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // エラーログを記録
    console.error("ErrorBoundary caught an error:", error, info);
  }

  render() {
    if (this.state.hasError) {
      // エラーが発生した場合に表示するUI
      return <h1>Something went wrong.</h1>;
    }

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

export default ErrorBoundary;

使用方法

作成したError Boundaryコンポーネントをアプリケーション内で利用します。以下のように、エラーが発生する可能性のある部分をError Boundaryでラップします：

import ErrorBoundary from './ErrorBoundary';
import SomeComponent from './SomeComponent';

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

注意点

1. Error Boundaryはクラスコンポーネントでのみ作成可能
   Error Boundaryは、現時点では関数コンポーネントで作成することはできません。
2. イベントハンドラー内のエラーはキャッチできない
   Error Boundaryでは、イベントハンドラー内のエラーは対象外です。この場合、try-catchを用いてエラーを処理する必要があります。
3. グローバルなエラーには無効
   グローバルスコープで発生するエラーや非同期処理のエラーも、Error Boundaryではキャッチできません。これには、window.onerrorやPromise.catchを利用します。

次のセクションでは、Error Boundaryでキャッチできるエラーの詳細や範囲について掘り下げます。

エラーの詳細な捕捉方法

Error BoundaryはReactアプリケーション内のエラーを効果的に捕捉できますが、どのようなエラーをキャッチでき、どこに制限があるのかを理解しておくことが重要です。

キャッチできるエラーの範囲

Error Boundaryが捕捉可能なエラーは以下の通りです：

1. コンポーネントのレンダリングエラー

子コンポーネントがレンダリング中にエラーを投げた場合、それをキャッチします。例えば、次のようなコードで発生するエラーを捕捉できます：

function BuggyComponent() {
  throw new Error("This is a render error!");
  return <div>Hello, world!</div>;
}

<ErrorBoundary>
  <BuggyComponent />
</ErrorBoundary>

2. ライフサイクルメソッド内のエラー

componentDidMountやcomponentDidUpdateといったライフサイクルメソッドでエラーが発生した場合も捕捉されます。

3. 子コンポーネントツリー全体のエラー

Error Boundaryでラップされたツリー内のすべての子コンポーネントに発生するエラーを捕捉します。これにより、特定のコンポーネントが原因でアプリケーション全体がクラッシュすることを防ぎます。

キャッチできないエラーの範囲

Error Boundaryが対応できないエラーも存在します：

1. イベントハンドラーのエラー

Reactではイベントハンドラーで発生するエラーはError Boundaryの範囲外です。これに対処するには、try-catchブロックを使用する必要があります：

function handleClick() {
  try {
    throw new Error("Event handler error");
  } catch (error) {
    console.error(error);
  }
}

2. 非同期処理内のエラー

非同期処理（例：setTimeoutやPromise内）のエラーもError Boundaryではキャッチされません。以下のような場合です：

setTimeout(() => {
  throw new Error("Async error");
}, 1000);

このようなエラーには、グローバルエラーハンドラ（window.onerrorやwindow.addEventListener('unhandledrejection', ...)）を使う方法があります。

3. サーバーサイドレンダリング中のエラー

Error Boundaryはクライアントサイドで動作します。サーバーサイドレンダリング中に発生したエラーは別途キャッチする必要があります。

エラーハンドリングのベストプラクティス

• 必要に応じて複数のError Boundaryを使用し、エラーをアプリケーションの異なる領域で適切に処理します。
• 非同期処理やイベントハンドラー用の専用エラーハンドリングを実装します。
• Error Boundaryを適切に設置し、エラー発生時にユーザーが意味のあるフィードバックを得られるようにします。

次のセクションでは、Error BoundaryでキャッチしたエラーをSentryのような外部サービスに送信する方法を説明します。

Sentryの概要とセットアップ方法

Sentryは、アプリケーションのエラーやパフォーマンス問題をモニタリングするための外部サービスです。エラー発生時に詳細な情報を記録し、ダッシュボードでの可視化や通知を通じて迅速な対応を支援します。Error BoundaryとSentryを組み合わせることで、エラーを自動的にログとして送信し、効率的なトラブルシューティングが可能になります。

Sentryの主な機能

• リアルタイムエラーログ: クライアントやサーバーで発生したエラーをリアルタイムでキャプチャします。
• コンテキスト情報の提供: エラー発生時のユーザーや環境情報を含めて詳細に記録します。
• 通知システム: エラー発生時にSlackやメールなどで通知を送ることができます。
• パフォーマンスモニタリング: APIの遅延や画面遷移のパフォーマンスデータを収集します。

Sentryのセットアップ手順

以下の手順でReactアプリケーションにSentryを導入します。

1. アカウントの作成とプロジェクトの設定

1. Sentry公式サイトでアカウントを作成します。
2. ダッシュボードにログイン後、新しいプロジェクトを作成します。プロジェクトタイプは「React」を選択します。
3. プロジェクトのセットアップガイドに表示されるDSN（データソースネーム）を控えておきます。これを後ほど使用します。

2. Sentry SDKのインストール

ReactプロジェクトにSentry SDKを追加します。以下のコマンドを使用します：

npm install @sentry/react @sentry/tracing

3. Sentryの初期化

アプリケーションのエントリポイント（通常はindex.jsやApp.js）でSentryを初期化します：

import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: "https://<YOUR_DSN_HERE>@sentry.io/<PROJECT_ID>",
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0, // トレース収集率。開発中は1.0、本番では0.1などに設定
});

4. Error Boundaryへの統合

Error BoundaryにSentryを組み込む準備をします。詳細は次のセクションで説明します。

セットアップ時の注意点

• 環境変数の使用: DSNは環境変数に保存し、コードベースに直接書き込まないようにしてください。
• デバッグ情報の確認: 開発中はエラーログの詳細を確認するため、tracesSampleRateを高めに設定しておくと良いです。
• パフォーマンスへの影響: 本番環境では、Sentryのパフォーマンスモニタリング機能がアプリケーションに与える影響を測定し、必要に応じて設定を調整してください。

次のセクションでは、Error BoundaryとSentryを統合し、エラーを自動的に送信する方法を詳しく解説します。

Error BoundaryとSentryの統合

Error BoundaryとSentryを統合することで、Reactアプリケーション内で発生するエラーを自動的にSentryに送信し、可視化することが可能です。このセクションでは、その具体的な手順を解説します。

統合の手順

1. Error Boundaryを拡張する

Error BoundaryのcomponentDidCatchメソッドで、エラーをSentryに送信します。以下のように既存のError Boundaryコンポーネントを拡張します：

import React, { Component } from "react";
import * as Sentry from "@sentry/react";

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

  static getDerivedStateFromError(error) {
    // エラー発生時にステートを更新
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // Sentryにエラーを送信
    Sentry.captureException(error, { extra: errorInfo });
    console.error("Error caught by ErrorBoundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // ユーザーに表示するカスタムエラーUI
      return <h1>Something went wrong. Please try again later.</h1>;
    }

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

export default ErrorBoundary;

2. アプリケーション内でError Boundaryを利用する

Error Boundaryを使用して、アプリケーション全体または一部のコンポーネントツリーをラップします：

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

ReactDOM.render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>,
  document.getElementById("root")
);

3. Sentryのトラッキング機能を有効化

Error Boundary内でSentryのcaptureExceptionメソッドを使用することで、エラー情報とともに以下のような追加データを送信できます：

• 発生したエラーの詳細情報
• エラーが発生したコンポーネントのスタックトレース
• カスタムコンテキスト（例：ユーザー情報や状態）

カスタムエラー情報の送信

Error BoundaryでSentryに送信する情報をカスタマイズできます。以下は、追加のコンテキスト情報を送信する例です：

componentDidCatch(error, errorInfo) {
  Sentry.captureException(error, {
    extra: {
      componentStack: errorInfo.componentStack,
      customData: "Additional error context information",
    },
  });
}

統合のメリット

• リアルタイムモニタリング: アプリケーション内で発生したエラーを即座に把握できます。
• エラーのコンテキスト情報: 発生場所やユーザー環境を含む詳細なエラー情報を取得可能です。
• ユーザー体験の向上: エラー発生時にカスタムUIを表示し、ユーザーへの影響を最小限に抑えます。

次のセクションでは、Error Boundaryをさらにカスタマイズしてエラーハンドリングを強化する方法を紹介します。

カスタマイズされたエラーハンドリング

Error Boundaryを活用することで、エラー発生時に単にエラーメッセージを表示するだけでなく、カスタムUIの提供や特定のエラーへの特別な処理を実現できます。このセクションでは、Error Boundaryのカスタマイズ方法を解説します。

エラー発生時にカスタムUIを表示する

エラーが発生した際、ユーザー体験を損なわないよう、わかりやすく親しみやすいカスタムUIを表示することが可能です。

以下は、エラー時にカスタムメッセージやボタンを表示する例です：

import React, { Component } from "react";
import * as Sentry from "@sentry/react";

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

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

  componentDidCatch(error, errorInfo) {
    Sentry.captureException(error, { extra: errorInfo });
  }

  handleRetry = () => {
    // ステートをリセットし再レンダリング
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Oops! Something went wrong.</h1>
          <p>
            We encountered an error. Please try again by clicking the button
            below.
          </p>
          <button onClick={this.handleRetry}>Retry</button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

特定のエラーに基づくハンドリング

発生するエラーの種類によって異なる動作を行うことも可能です。以下はエラーのメッセージを基に条件分岐する例です：

render() {
  if (this.state.hasError) {
    if (this.state.error.message.includes("Network Error")) {
      return <h1>Network issue detected. Please check your connection.</h1>;
    }
    return <h1>An unexpected error occurred. Please try again later.</h1>;
  }

  return this.props.children;
}

ユーザー情報をSentryに送信する

エラー発生時にユーザー情報を含めると、問題の再現性を高めることができます。Sentryでは以下のようにユーザー情報を設定可能です：

componentDidMount() {
  Sentry.setUser({
    id: "12345",
    username: "john_doe",
    email: "john@example.com",
  });
}

エラーログの状態を通知する

エラーが発生したことを管理者に通知する仕組みも構築可能です。例えば、APIを呼び出して通知を送る処理を追加します：

componentDidCatch(error, errorInfo) {
  Sentry.captureException(error, { extra: errorInfo });
  fetch("/api/send-notification", {
    method: "POST",
    body: JSON.stringify({ error: error.message }),
  });
}

カスタマイズのメリット

• ユーザー体験の改善: 親しみやすいUIや具体的なエラーメッセージを表示することで、ユーザーに安心感を与えます。
• 管理効率の向上: 特定のエラーへの対応や通知機能の実装により、管理が容易になります。
• 柔軟なエラー処理: エラーの種類に応じてカスタム処理を適用できます。

次のセクションでは、Sentryのダッシュボードを使用したエラーの分析と問題解決の手法について説明します。

Sentryでエラーを分析する方法

Sentryを活用すれば、エラーの詳細な情報をダッシュボード上で確認し、迅速に分析できます。このセクションでは、Sentryダッシュボードの主な機能とエラー分析の手順を解説します。

Sentryダッシュボードの主な機能

1. エラー一覧

プロジェクト内で発生したエラーが一覧表示されます。それぞれのエラーは、発生頻度や影響を受けたユーザー数によって優先順位を付けて表示されます。

2. エラーレポートの詳細

エラーをクリックすると、以下のような詳細情報が確認できます：

• エラーメッセージとスタックトレース
• 発生したファイルと行番号
• 環境情報（ブラウザ、OS、バージョンなど）
• エラー発生時のカスタムデータ（例：ユーザー情報や状態）

3. イシュー（Issue）管理

Sentryは同一エラーを「イシュー」としてグループ化します。これにより、同じ問題が発生した場合に簡単に追跡できます。

4. パフォーマンスモニタリング

Sentryのパフォーマンスタブでは、アプリケーションの応答時間やAPIの遅延を分析できます。エラーがパフォーマンスにどのように影響しているかを確認可能です。

エラー分析の手順

1. エラーの特定

ダッシュボードにログインし、エラー一覧から解決したいイシューを選択します。最も頻度の高いエラーや影響度の大きいエラーを優先的に選ぶと効果的です。

2. エラーの詳細確認

選択したイシューの詳細ページで以下を確認します：

• エラーのスタックトレースから問題の発生箇所を特定
• エラーが発生した際の環境情報や、影響を受けたユーザー数
• 前後のイベントデータを確認し、エラー発生のトリガーを把握

3. トリアージとアクション

イシューにタグを追加したり、ステータス（未解決、解決済み、無視など）を設定して整理します。また、チームメンバーにエラー対応を割り当てることも可能です。

4. エラー解決のテストと検証

コードを修正した後、Sentryで該当エラーが再発していないかモニタリングします。解決後、イシューを「Resolved」に設定します。

活用のベストプラクティス

1. アラート通知の設定

重要なエラーを見逃さないために、通知を設定します。Slackやメールでのリアルタイム通知が可能です。

2. カスタムフィルタリング

ダッシュボードで、エラーを発生環境や頻度、ユーザーグループでフィルタリングし、分析効率を向上させます。

3. イシューの統合管理

SentryをJiraやGitHubと統合することで、イシューをトラッキングツールに直接連携し、チームで効率的に対応できます。

Sentryを使った分析のメリット

• 迅速な問題特定: 発生頻度や影響度に基づいて優先度を決定できます。
• エラーの再現性向上: 環境情報や追加データにより、問題の再現が容易です。
• チームコラボレーション: イシューの割り当てやトリアージで効率的な問題解決が可能です。

次のセクションでは、Error BoundaryとSentryを使用したReactアプリケーションの具体的な実践例を解説します。

実践例：Error BoundaryとSentryを使ったReactアプリケーション

このセクションでは、Error BoundaryとSentryを統合したReactアプリケーションのサンプルコードを紹介します。この実践例を通じて、エラーの捕捉からSentryへの送信、そしてカスタマイズされたエラーハンドリングの流れを具体的に理解できます。

完全なサンプルコード

以下は、Error BoundaryとSentryを組み込んだReactアプリケーションの例です：

import React, { Component } from "react";
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

// Sentryの初期化
Sentry.init({
  dsn: "https://<YOUR_DSN_HERE>@sentry.io/<PROJECT_ID>",
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0,
});

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

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

  componentDidCatch(error, errorInfo) {
    // Sentryにエラーを送信
    Sentry.captureException(error, { extra: errorInfo });
  }

  handleRetry = () => {
    // ステートをリセットして再レンダリング
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Oops! Something went wrong.</h1>
          <p>
            We encountered an error. Please try refreshing the page or contact support if the issue persists.
          </p>
          <button onClick={this.handleRetry}>Retry</button>
        </div>
      );
    }
    return this.props.children;
  }
}

// エラーを発生させるテスト用コンポーネント
const BuggyComponent = () => {
  throw new Error("Test error for Sentry and Error Boundary!");
};

// アプリケーションのメインコンポーネント
function App() {
  return (
    <ErrorBoundary>
      <h1>React App with Error Boundary and Sentry</h1>
      <BuggyComponent />
    </ErrorBoundary>
  );
}

export default App;

実践例の重要なポイント

1. エラーのキャプチャ

Error BoundaryでcomponentDidCatchメソッドを利用してエラーをキャプチャし、Sentryに送信しています。これにより、エラーのスタックトレースや発生時の詳細情報を記録できます。

2. カスタムエラーメッセージ

エラーが発生した場合に表示するカスタムUIを提供することで、ユーザー体験を向上させています。Retryボタンでアプリケーションをリセットできるのもポイントです。

3. テスト用のエラー発生

BuggyComponentを使って意図的にエラーを発生させ、Error BoundaryとSentryの動作を確認しています。

コードの実行と検証

1. アプリケーションを起動します：

   npm start

2. アプリケーションを開き、意図的にエラーを発生させます（BuggyComponent内で発生）。
3. エラーがSentryに記録されていることをダッシュボードで確認します。

応用例

• 複数のError Boundaryを利用: アプリケーションの異なる部分に独立したError Boundaryを設置し、局所的なエラー処理を実現。
• ユーザー情報の送信: Sentry.setUserを使用して、エラーが発生したユーザーの情報を追加。
• エラー発生箇所ごとの通知: 特定のエラーに基づいて、管理者や開発チームにアラートを送信。

このサンプルコードを活用すれば、Error BoundaryとSentryの統合を実践的に導入でき、アプリケーションのエラーハンドリングを強化できます。次のセクションでは、本記事のまとめを行います。

まとめ

本記事では、ReactのError Boundaryを活用してエラーを捕捉し、Sentryを使って効率的にエラーログを管理する方法を解説しました。Error Boundaryの基本的な仕組みや実装方法から、Sentryとの統合による高度なエラーハンドリング、そして実践例までを網羅しました。

Error BoundaryとSentryを組み合わせることで、エラー発生時の迅速な対応が可能になり、ユーザー体験の向上やアプリケーションの信頼性向上につながります。特に、Sentryを利用した詳細なエラー分析とトラッキング機能は、開発者にとって強力なツールとなるでしょう。

この記事を参考に、ぜひ自分のReactプロジェクトにError BoundaryとSentryを導入し、エラーハンドリングを最適化してみてください。