Frontend Academy · レッスン

エラーバウンダリー

componentDidCatchとgetDerivedStateFromErrorを使ったクラスベースのエラーバウンダリーを実装し、捕捉されないレンダリングエラーによるアプリ全体のクラッシュを防ぎます。

「エラーバウンダリー」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Error Boundaryが必要な理由

描画中、ライフサイクルメソッド内、またはコンストラクター内でキャッチされなかったエラーが発生すると、デフォルトではReactツリー全体がクラッシュします。Error Boundaryはサブツリー内のこれらのエラーを捕捉し、代わりにフォールバックを描画できるようにします。

クラスコンポーネントのみ

Error Boundaryはクラスコンポーネントでなければなりません（2026年現在も同様で、フックに相当する機能はまだありません）。react-error-boundaryなどのライブラリにはuseErrorBoundaryフックがあります。

getDerivedStateFromError

子孫コンポーネントがエラーをスローしたときに呼び出される静的メソッドです。フォールバックの描画を開始する状態更新を返します。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

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

ログ記録のためのcomponentDidCatch

componentDidCatchを使って、エラーをサービス（Sentry、Datadog）に記録します。エラーとReactコンポーネントスタックの両方を取得できます。

componentDidCatch(error, errorInfo) {
  Sentry.captureException(error, {
    contexts: { react: { componentStack: errorInfo.componentStack } }
  });
}

アプリのルートをラップする

最上位のAppをError Boundaryでラップし、真っ白な画面になる事態を防ぎます。

<ErrorBoundary fallback={<GlobalErrorPage />}>
  <App />
</ErrorBoundary>

ルートまたはウィジェットごとの細かなBoundary

グローバルなBoundaryは最低限必要です。セクションの1つがクラッシュしてもアプリ全体が空白にならないよう、ルートごとのBoundaryを追加してください。

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={
    <ErrorBoundary fallback={<DashboardError />}>
      <Dashboard />
    </ErrorBoundary>
  } />
</Routes>

エラーバウンダリが捕捉しないエラー

エラーバウンダリは、イベントハンドラー内のエラー、非同期コード（setTimeout、promises）のエラー、SSR中にスローされたエラー、エラーバウンダリ自体のエラーを捕捉しません。これらの箇所ではtry/catchを使用してください。

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

イベントハンドラーをtry/catchで囲み、手動のreportError関数を呼び出してください。

function Button() {
  function onClick() {
    try {
      riskyOperation();
    } catch (err) {
      reportError(err);
      toast.error('Something went wrong');
    }
  }
  return <button onClick={onClick}>Click</button>;
}

react-error-boundaryライブラリ

コミュニティ製パッケージreact-error-boundaryは、関数コンポーネントに適したAPIとリセット機能を提供します。

import { ErrorBoundary } from 'react-error-boundary';

<ErrorBoundary
  fallbackRender={({ error, resetErrorBoundary }) => (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )}
  onReset={() => refetch()}
>
  <DataView />
</ErrorBoundary>

復旧時のリセット

再試行ボタンやルート変更など、復旧する方法を用意してください。フォールバックの表示を停止できるよう、エラーバウンダリは状態をリセットする必要があります。

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  reset = () => this.setState({ hasError: false });
  render() {
    if (this.state.hasError) {
      return <button onClick={this.reset}>Retry</button>;
    }
    return this.props.children;
  }
}

開発環境と本番環境

開発環境では、エラーバウンダリがあってもReactは赤いエラーオーバーレイを表示します。これは意図された動作です。本番環境では、エラーバウンダリのフォールバックだけが表示されます。

ベストプラクティス

1）アプリのルートにグローバルエラーバウンダリを配置する。2）ルートごとにエラーバウンダリを配置する。3）独立したウィジェットの周囲に粒度の細かいエラーバウンダリを配置する。4）必ずトラッキングサービスにログを記録する。5）再試行やホームへ戻るなどの復旧操作を表示する。6）エラーを黙って握りつぶさない。

確認問題

Reactのエラーバウンダリが捕捉しないエラーは、どの種類のエラーですか？

まとめ：エラーバウンダリ

static getDerivedStateFromErrorとcomponentDidCatchを持つクラスコンポーネントです。サブツリーを囲み、レンダー時のエラーを捕捉します。イベントハンドラー、非同期処理、SSRのエラーは捕捉しません。アプリのルートにグローバルエラーバウンダリを配置し、さらにルートごと、ウィジェットごとにも配置します。Sentryにログを記録し、復旧操作を提供してください。より扱いやすいAPIにはreact-error-boundaryライブラリを使用できます。

よくある質問

「エラーバウンダリー」レッスンは無料ですか？

はい。「エラーバウンダリー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「エラーバウンダリー」で何を学びますか？

componentDidCatchとgetDerivedStateFromErrorを使ったクラスベースのエラーバウンダリーを実装し、捕捉されないレンダリングエラーによるアプリ全体のクラッシュを防ぎます。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「エラーバウンダリー」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る