問題一覧に戻る
中級高度なパターン
問題62: エラーバウンダリ基礎

コンポーネントツリー内のエラーをキャッチしてフォールバックUIを表示するエラーバウンダリの実装を学びます。子コンポーネントで発生したエラーをキャッチし、アプリケーション全体のクラッシュを防ぎます。クラスコンポーネントでのみ利用可能で、getDerivedStateFromErrorでエラー状態を更新します。本番環境でのユーザー体験を向上させる重要な機能です。

import React, { Component } from 'react';

{/* エラーバウンダリクラス */}
class ErrorBoundary extends  {
  state = { hasError: false };

  {/* エラーをキャッチ */}
  static getDerivedStateFromError() {
    return { : true };
  }

  render() {
    if (this.state.hasError) return <h1>Error!</h1>;
    {/* 子コンポーネントをレンダー */}
    return this.props.;
  }
}

function App() {
  return (
    <ErrorBoundary>
      <div>{undefined.map()}</div>
    </ErrorBoundary>
  );
}

export default App;
···