MENU
  1. ホーム
  2. React
  3. React Error Boundaryでユーザーに分かりやすいエラーメッセージを表示する方法

React Error Boundaryでユーザーに分かりやすいエラーメッセージを表示する方法

React

Reactアプリケーションを開発する際、予期せぬエラーが発生した場合にどう対処するかは、ユーザー体験を左右する重要なポイントです。エラーがそのまま画面に表示されると、ユーザーは困惑し、信頼性を損なう可能性があります。そこで役立つのがReactのError Boundaryです。本記事では、Error Boundaryを活用して、エラー時にユーザーに分かりやすいメッセージを表示し、アプリの使いやすさと信頼性を向上させる方法を解説します。

目次

Error Boundaryとは？


Error Boundaryとは、Reactコンポーネントツリー内で発生したJavaScriptエラーをキャッチし、アプリケーションがクラッシュするのを防ぐための仕組みです。React 16で導入され、エラーが発生した際にフォールバックUIを表示する役割を果たします。

Error Boundaryの役割


Error Boundaryは、以下のような状況でエラーを検出し、アプリの信頼性を向上させます。

  • 描画中：レンダリング中に発生するエラーをキャッチします。
  • ライフサイクルメソッド中：componentDidMountやcomponentDidUpdate内のエラーを処理します。
  • イベントハンドラー外：特定のユーザー操作によってトリガーされるエラー以外を管理します（イベントハンドラー内のエラーは対象外）。

利用例


以下のような場合にError Boundaryが活用されます。

  • アプリ全体ではなく、特定のコンポーネントでエラー処理を局所化したいとき。
  • エラー情報をロギングして開発者が後で調査できるようにしたいとき。
  • ユーザーが混乱しないよう、わかりやすいフォールバックUIを提供したいとき。

Error Boundaryを使用することで、エラーが起きてもユーザー体験を損なわない、堅牢なReactアプリケーションを構築することが可能になります。

Error Boundaryの設定方法

基本的なError Boundaryの実装


Error Boundaryは、ReactクラスコンポーネントでcomponentDidCatchとgetDerivedStateFromErrorを利用して実装されます。以下は基本的なサンプルコードです。

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 captured:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // フォールバックUIを表示
      return <h1>何か問題が発生しました。</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

使用方法


Error Boundaryを使用するには、エラーを監視したいコンポーネントをその子コンポーネントとしてラップします。

import ErrorBoundary from "./ErrorBoundary";
import ProblematicComponent from "./ProblematicComponent";

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

export default App;

フォールバックUIのカスタマイズ


Error Boundary内のrenderメソッドでフォールバックUIをカスタマイズできます。例えば、エラーメッセージや再試行ボタンを表示することが可能です。

render() {
  if (this.state.hasError) {
    return (
      <div>
        <h1>エラーが発生しました。</h1>
        <p>ページを更新するか、しばらく時間をおいてお試しください。</p>
      </div>
    );
  }

  return this.props.children;
}

注意点

  • 関数コンポーネントでは直接使用できません。Error Boundaryはクラスコンポーネントでのみ実装できます。
  • イベントハンドラーのエラーはキャッチしません。その場合、通常のtry-catchを利用する必要があります。

Error Boundaryを適切に設定することで、予期せぬエラーが発生してもアプリケーションの動作を維持し、ユーザーに適切なメッセージを提供することが可能です。

カスタムエラーメッセージの表示方法

ユーザーに配慮したエラーメッセージの重要性


エラーが発生した場合、そのまま技術的な内容を表示するのではなく、ユーザーが理解しやすく、次の行動を示唆するメッセージを提供することが重要です。ReactのError Boundaryを活用して、カスタマイズされたエラーメッセージを表示する方法を紹介します。

フォールバックUIのカスタマイズ


以下は、Error BoundaryのフォールバックUIをカスタマイズして、わかりやすいエラーメッセージを表示する例です。

render() {
  if (this.state.hasError) {
    return (
      <div style={{ textAlign: "center", padding: "20px" }}>
        <h1>申し訳ありません！</h1>
        <p>
          予期しないエラーが発生しました。ページを更新するか、時間をおいて再試行してください。
        </p>
        <button onClick={() => window.location.reload()}>ページを再読み込み</button>
      </div>
    );
  }

  return this.props.children;
}

このコードでは、エラーメッセージの内容やスタイルをカスタマイズし、再試行ボタンを追加してユーザーが次の行動を取りやすいようにしています。

エラー詳細情報の表示


開発段階では、エラー内容をユーザーに表示することも役立ちます。以下は、エラー情報を表示する例です。

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

render() {
  if (this.state.hasError) {
    return (
      <div>
        <h1>エラーが発生しました</h1>
        <details style={{ whiteSpace: "pre-wrap" }}>
          <summary>詳細</summary>
          {this.state.error && this.state.error.toString()}
          <br />
          {this.state.errorInfo.componentStack}
        </details>
      </div>
    );
  }

  return this.props.children;
}

この例では、detailsタグを使ってエラーの詳細情報を開閉可能にし、必要な場合にのみ情報を確認できるようにしています。

デザインを強化したエラーメッセージ


フォールバックUIにCSSやアニメーションを取り入れて、より洗練されたエラーメッセージを提供することも可能です。以下は、スタイリングを加えた例です。

render() {
  if (this.state.hasError) {
    return (
      <div style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
        backgroundColor: "#f8d7da",
        color: "#721c24",
        textAlign: "center",
      }}>
        <h1>Oops! Something went wrong.</h1>
        <p>We're working to fix it. Please try again later.</p>
      </div>
    );
  }

  return this.props.children;
}

メッセージカスタマイズのポイント

  1. シンプルさ：技術的な用語を避け、簡潔でわかりやすい言葉を使用する。
  2. 次のアクションを示す：リロードボタンやサポートページへのリンクを提供する。
  3. 感情的な配慮：謝罪や安心感を与える文言を入れることで、ユーザーの信頼を維持する。

これにより、Error Boundaryを活用したフォールバックUIが、エラー発生時のユーザー体験を改善するための強力なツールとなります。

子コンポーネントとの連携

Error Boundaryの適用範囲を定義する


Error BoundaryはReactコンポーネントツリー内の特定の部分に適用することができます。これにより、アプリ全体をクラッシュから守るだけでなく、問題が発生したコンポーネントのみに影響を限定することが可能です。以下はError Boundaryの適用範囲をカスタマイズする方法を説明します。

特定の子コンポーネントに適用


Error Boundaryを特定の子コンポーネントに適用するには、必要な部分だけをError Boundaryでラップします。

import ErrorBoundary from "./ErrorBoundary";
import Header from "./Header";
import Content from "./Content";
import Footer from "./Footer";

function App() {
  return (
    <div>
      <Header />
      <ErrorBoundary>
        <Content />
      </ErrorBoundary>
      <Footer />
    </div>
  );
}

export default App;

この例では、Contentコンポーネントで発生したエラーのみError Boundaryがキャッチし、HeaderやFooterには影響を与えません。

複数のError Boundaryの活用


大規模なアプリケーションでは、複数のError Boundaryを使用してエラーをさらに細かく分割して管理することが有効です。

function App() {
  return (
    <div>
      <ErrorBoundary>
        <Header />
      </ErrorBoundary>
      <ErrorBoundary>
        <Content />
      </ErrorBoundary>
      <ErrorBoundary>
        <Footer />
      </ErrorBoundary>
    </div>
  );
}

export default App;

このようにすることで、各セクションが独立してエラーを処理でき、特定のエラーが他のセクションの動作に影響を与えません。

動的なError Boundaryの適用


動的に生成されるコンポーネントにError Boundaryを適用する場合もあります。たとえば、リスト内の各アイテムに適用する場合は以下のようにします。

import ErrorBoundary from "./ErrorBoundary";
import Item from "./Item";

function ItemList({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <ErrorBoundary key={index}>
          <Item data={item} />
        </ErrorBoundary>
      ))}
    </ul>
  );
}

この方法では、リスト内の1つのアイテムがエラーを起こしても、他のアイテムには影響を与えません。

エラーを限定するメリット

  1. ユーザー体験の向上：特定のセクションで問題が発生しても、アプリ全体が機能し続ける。
  2. デバッグの容易さ：エラーが発生したコンポーネントを迅速に特定できる。
  3. 信頼性の向上：エラーを局所化することで、アプリケーションの安定性を確保する。

まとめ


Error Boundaryを特定の子コンポーネントに適用し、その影響範囲を制御することで、アプリケーション全体の安定性を維持しながら、ユーザー体験を向上させることができます。この柔軟性を活かして、エラーがユーザーに与える影響を最小限に抑えましょう。

例外処理とログの活用方法

エラー情報の記録


エラーが発生した際に、その詳細情報を記録することで、問題を迅速に特定し、適切に修正できます。Error Boundaryでは、componentDidCatchメソッドを活用してエラー情報を記録することが可能です。以下はエラーを記録する基本的な方法です。

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

コンソールに出力されるエラー情報には、エラーのメッセージやスタックトレース、Reactのコンポーネントスタックが含まれます。

外部ログサービスとの連携


エラー情報をローカルで記録するだけでなく、外部のエラーログ収集サービス（例: Sentry、LogRocket）に送信することで、より詳細なエラー管理が可能になります。以下はSentryを使用した例です。

  1. Sentryのインストール
   npm install @sentry/react @sentry/tracing
  1. Sentryの初期設定
    アプリケーションのエントリポイントでSentryを初期化します。
   import * as Sentry from "@sentry/react";

   Sentry.init({
     dsn: "YOUR_SENTRY_DSN", // SentryのDSNをここに入力
     integrations: [new Sentry.BrowserTracing()],
     tracesSampleRate: 1.0, // トレースサンプリング率
   });
  1. Error BoundaryでSentryを使用
    componentDidCatchメソッド内でSentryにエラーを送信します。
   componentDidCatch(error, errorInfo) {
     Sentry.captureException(error, { extra: errorInfo });
   }

これにより、エラーが発生すると、詳細な情報がSentryに記録され、後で分析できます。

エラーのユーザー通知と追跡


重大なエラーが発生した場合は、ログを記録するだけでなく、ユーザーに通知を送ることも重要です。以下は、カスタム通知を表示する例です。

componentDidCatch(error, errorInfo) {
  // ログの記録
  console.error("Error captured:", error, errorInfo);

  // ユーザー通知（例: Toast通知）
  alert("問題が発生しました。サポートにお問い合わせください。");
}

リアルタイムモニタリングの重要性


エラーログをリアルタイムで監視することで、問題発生時に迅速な対応が可能となります。これにより、次のようなメリットがあります。

  • ユーザー体験を損なうエラーを素早く特定できる。
  • アプリの信頼性を向上させるためのデータを収集できる。
  • バグ修正の優先順位付けに役立つ。

ログと例外処理のベストプラクティス

  1. 適切なログレベルを設定: コンソール出力は開発中のみ使用し、プロダクションでは外部サービスを活用する。
  2. PII（個人識別情報）の保護: ログにユーザーの個人情報を含めない。
  3. アラート設定: 重大なエラーが発生した場合に、開発者チームが即座に通知を受けられるように設定する。

まとめ


エラー情報を適切に記録し、外部サービスを活用することで、エラーの原因を迅速に特定し、修正するプロセスを効率化できます。Error Boundaryを例外処理とログの起点として活用することで、アプリケーションの品質とユーザー体験を向上させましょう。

Error Boundaryを使ったUX向上のテクニック

エラー発生時のユーザー体験を最適化


エラーが発生した際に、ただ単に「エラーが発生しました」と表示するだけではユーザーの不満を招く可能性があります。Error Boundaryを応用して、エラー時のUX（ユーザー体験）を改善するための工夫を以下に紹介します。

再試行機能の追加


エラーが発生した場合に、ユーザーが簡単に再試行できるUIを提供することで、アプリの使いやすさを向上させます。

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

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

  handleRetry = () => {
    this.setState({ hasError: false });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>エラーが発生しました。</h1>
          <button onClick={this.handleRetry}>再試行する</button>
        </div>
      );
    }

    return this.props.children;
  }
}

再試行ボタンを設けることで、ユーザーが手間をかけずに問題を解決できる可能性が高まります。

エラーメッセージのパーソナライズ


エラーが発生した理由や解決策を具体的に示すことで、ユーザーの混乱を軽減します。たとえば、エラーの種類によってメッセージを切り替えることができます。

render() {
  if (this.state.hasError) {
    return (
      <div>
        <h1>おっと！何か問題が起きました。</h1>
        <p>現在サーバーに接続できません。しばらく時間をおいて再試行してください。</p>
      </div>
    );
  }

  return this.props.children;
}

エラー発生時の代替機能提供


エラーが発生しても、ユーザーが完全に行き止まりに直面しないように、代替機能を提供することを検討します。たとえば、検索機能が動作しない場合にFAQページへのリンクを表示するなどです。

render() {
  if (this.state.hasError) {
    return (
      <div>
        <h1>問題が発生しました。</h1>
        <p>ご迷惑をおかけして申し訳ありません。</p>
        <a href="/faq">FAQページはこちら</a>
      </div>
    );
  }

  return this.props.children;
}

エラー時のデザインの工夫


エラー画面がシンプルすぎると、ユーザーにとって冷たい印象を与えることがあります。デザインに工夫を凝らして、親しみやすさを加えることも重要です。

render() {
  if (this.state.hasError) {
    return (
      <div style={{ textAlign: "center", padding: "20px" }}>
        <img src="/error-illustration.png" alt="Error Illustration" />
        <h1>Oops! Something went wrong.</h1>
        <p>We’re sorry for the inconvenience. Please try again later.</p>
      </div>
    );
  }

  return this.props.children;
}

多言語対応


多言語対応を行うことで、グローバルユーザーに適切なエラーメッセージを提供できます。以下は簡単な例です。

const messages = {
  en: "An error occurred. Please try again later.",
  ja: "エラーが発生しました。後でもう一度お試しください。",
};

render() {
  if (this.state.hasError) {
    return (
      <div>
        <h1>{messages["ja"]}</h1>
      </div>
    );
  }

  return this.props.children;
}

UX向上のためのベストプラクティス

  1. フォールバックUIを使いやすく：再試行や代替手段を用意する。
  2. 安心感を提供：エラーメッセージに謝罪やサポート情報を含める。
  3. 一貫性を保つ：アプリ全体で統一されたエラーメッセージのスタイルを採用する。

これらの工夫により、エラーが発生した場合でも、ユーザー体験を損なわず、アプリケーションへの信頼を維持することが可能です。

実際のプロジェクトでのError Boundary活用例

事例1: SaaSアプリケーションにおけるモジュール分離


あるSaaSアプリケーションでは、ダッシュボードや設定ページ、レポート生成モジュールなどの主要なセクションがありました。これらのモジュールごとにError Boundaryを実装することで、ある特定のモジュールがエラーを起こしても他のモジュールに影響を与えない仕組みを構築しました。

実装例

function App() {
  return (
    <div>
      <ErrorBoundary>
        <Dashboard />
      </ErrorBoundary>
      <ErrorBoundary>
        <Settings />
      </ErrorBoundary>
      <ErrorBoundary>
        <Reports />
      </ErrorBoundary>
    </div>
  );
}

このアプローチにより、たとえばReportsモジュールでエラーが発生しても、ユーザーはDashboardやSettingsの機能を引き続き利用できるようになりました。これにより、全体的なUXの向上とアプリの安定性が確保されました。

事例2: ECサイトでの特定コンポーネントの保護


ECサイトでは、商品リスト、カート、レビューセクションなど、複数のコンポーネントが並列に動作します。Error Boundaryを各セクションに適用することで、レビューセクションがエラーを起こしても、商品リストやカートは問題なく機能し続けるようにしました。

実装例

function ProductPage() {
  return (
    <div>
      <ErrorBoundary>
        <ProductList />
      </ErrorBoundary>
      <ErrorBoundary>
        <Reviews />
      </ErrorBoundary>
      <ErrorBoundary>
        <ShoppingCart />
      </ErrorBoundary>
    </div>
  );
}

さらに、カート機能においてエラーが発生した際には「購入手続きを再試行する」ボタンを表示し、UXを改善しました。

事例3: 教育プラットフォームでのデバッグとログ収集


オンライン教育プラットフォームでは、エラーが発生した際に詳細なログを収集し、開発チームが後から分析できるようにしました。このプロジェクトではSentryを導入し、Error Boundaryと連携させることで、ユーザーに影響が出る前に問題を特定し、修正が可能となりました。

実装例

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

Sentry.init({
  dsn: "YOUR_SENTRY_DSN",
  integrations: [new Sentry.BrowserTracing()],
  tracesSampleRate: 1.0,
});

class ErrorBoundaryWithSentry extends React.Component {
  componentDidCatch(error, errorInfo) {
    Sentry.captureException(error, { extra: errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return <h1>エラーが発生しました。再試行してください。</h1>;
    }
    return this.props.children;
  }
}

このアプローチにより、教育プラットフォームでのエラー率が大幅に低下し、開発効率も向上しました。

事例4: マルチテナントアプリでのクライアント固有のエラーメッセージ


マルチテナント型のアプリケーションでは、各クライアントごとにエラーメッセージをカスタマイズする必要がありました。Error Boundaryをテンプレート化し、クライアントごとに異なるフォールバックUIを提供しました。

実装例

function ErrorBoundaryTemplate({ clientName }) {
  return class extends React.Component {
    render() {
      if (this.state.hasError) {
        return (
          <div>
            <h1>{clientName}向けのカスタムエラーメッセージ</h1>
          </div>
        );
      }
      return this.props.children;
    }
  };
}

const ClientErrorBoundary = ErrorBoundaryTemplate({ clientName: "Client A" });

この手法により、クライアントごとにエラー発生時の対応が柔軟に可能となりました。

プロジェクトでのError Boundary活用ポイント

  1. 分離と局所化: エラーが発生する影響範囲を限定する。
  2. ログと通知: Sentryや外部ログサービスを活用してエラー情報を収集・分析する。
  3. カスタマイズ性: クライアントやコンポーネントごとにフォールバックUIを調整する。

Error Boundaryの柔軟な活用により、エラーが発生してもアプリの安定性とユーザー体験を維持する仕組みを構築できます。

Error Boundaryの制限とその対策

Error Boundaryの限界


Error Boundaryは非常に有用なツールですが、いくつかの制限が存在します。それを理解し、適切な対策を講じることで、より堅牢なエラーハンドリングを実現できます。

1. イベントハンドラー内のエラーをキャッチできない


Error Boundaryは、Reactコンポーネントのレンダリングやライフサイクルメソッドで発生したエラーはキャッチできますが、イベントハンドラー内で発生したエラーは対象外です。

例:

function ProblematicButton() {
  const handleClick = () => {
    throw new Error("Button click error");
  };

  return <button onClick={handleClick}>Click Me</button>;
}

この例では、ボタンのクリックで発生したエラーはError Boundaryでキャッチされません。

対策:
イベントハンドラー内のエラーは、通常のtry-catchを使用して処理します。

function ProblematicButton() {
  const handleClick = () => {
    try {
      throw new Error("Button click error");
    } catch (error) {
      console.error("Error occurred:", error);
    }
  };

  return <button onClick={handleClick}>Click Me</button>;
}

2. サーバーサイドレンダリング（SSR）との非互換性


Error Boundaryはクライアントサイドで動作するため、サーバーサイドレンダリング中に発生したエラーはキャッチできません。

対策:
SSRでは、ExpressやNext.jsのエラーハンドリングミドルウェアを利用してエラーをキャッチし、適切なエラーページを表示します。

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send("Something went wrong!");
});

3. 非同期エラーに対応できない


Error Boundaryは、非同期関数内で発生するエラー（例えばPromiseの中のエラー）はキャッチできません。

対策:
非同期処理では、try-catchやcatchメソッドを使用します。

async function fetchData() {
  try {
    const response = await fetch("/api/data");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    const data = await response.json();
  } catch (error) {
    console.error("Fetch error:", error);
  }
}

4. 特定のエラータイプへの限定的な対応


Error Boundaryは、すべてのエラータイプを同じ方法で処理しますが、エラーの種類ごとに異なる対応が必要な場合があります。

対策:
エラーのタイプに応じてフォールバックUIやログ出力を切り替えるように実装します。

componentDidCatch(error, errorInfo) {
  if (error.message.includes("Critical")) {
    // 重大なエラー
    console.error("Critical error:", error);
  } else {
    // 軽微なエラー
    console.warn("Minor error:", error);
  }
}

Error Boundaryの拡張方法


Error Boundaryの機能を補完するために、以下のテクニックを活用します。

1. エラーリカバリ


エラー発生後に再試行やリセット機能を提供します。

resetError = () => {
  this.setState({ hasError: false });
};

2. 状態管理と統合


Error Boundaryと状態管理ライブラリ（ReduxやReact Context）を統合して、グローバルなエラー状態を管理します。

まとめ


Error Boundaryには、イベントハンドラーや非同期処理への非対応といった制限がありますが、try-catchやサーバーサイドのエラーハンドリングと組み合わせることで、これらの制約を克服できます。Error Boundaryの限界を理解し、適切な対策を講じることで、Reactアプリケーションの安定性をさらに向上させましょう。

まとめ


本記事では、ReactのError Boundaryを活用して、エラー発生時にユーザーに分かりやすいエラーメッセージを提供する方法を詳しく解説しました。Error Boundaryの基本的な仕組みから、カスタムメッセージの表示方法、子コンポーネントとの連携、例外処理とログ収集、さらには実際のプロジェクトでの活用例や制限への対策まで、多角的に紹介しました。

Error Boundaryを適切に活用することで、Reactアプリケーションの安定性を向上させ、予期しないエラー発生時でもユーザー体験を損なわない設計を実現できます。この記事を参考に、エラー管理の工夫を取り入れ、より堅牢で信頼性の高いアプリケーションを構築してください。

React
エラーメッセージ React Error Boundary

コメント

コメントする

目次