Error Boundaryの仕組み：レンダリングエラーをキャッチする

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  
  // render phase中のエラーをキャッチ → stateを返してフォールバックUI
  static getDerivedStateFromError(error) {
    // このメソッドはpure（副作用を持ってはいけない）
    return { hasError: true, error };
  }
  
  // commit phase後に呼ばれる → ログ送信などの副作用
  componentDidCatch(error, info) {
    // info.componentStack はコンポーネントスタック
    logErrorToService(error, info.componentStack);
  }
  
  render() {
    if (this.state.hasError) {
      return (
        <div class="error-ui">
          <h2>予期しないエラーが発生しました</h2>
          <button onClick={() => this.setState({ hasError: false })}>
            再試行
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

// ❌ Error Boundaryでキャッチできない
function BrokenButton() {
  const handleClick = () => {
    throw new Error('クリック中のエラー'); // ← イベントハンドラはキャッチ不可
  };
  return <button onClick={handleClick}>クリック</button>;
}

// ✅ イベントハンドラはtry-catchを自分で書く
function SafeButton() {
  const [error, setError] = useState(null);
  
  const handleClick = () => {
    try {
      throw new Error('クリック中のエラー');
    } catch (e) {
      setError(e);
    }
  };
  
  if (error) return <div>エラー: {error.message}</div>;
  return <button onClick={handleClick}>クリック</button>;
}

// ✅ useEffectのエラーを意図的にError Boundaryへ伝える方法
function ComponentWithEffect() {
  const [, setState] = useState(null);
  
  useEffect(() => {
    fetchData().catch(error => {
      // stateに「エラーをthrowする関数」をセットすることで
      // 次のrenderでError Boundaryに捕まえさせるハック
      setState(() => { throw error; });
    });
  }, []);
  
  return <div>コンテンツ</div>;
}

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

// フォールバックコンポーネント
function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>エラーが発生しました:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>再試行</button>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onError={(error, info) => {
        // Sentryなどへのログ送信
        logError(error, info.componentStack);
      }}
      onReset={() => {
        // リセット時の処理（データの再取得など）
      }}
    >
      <UserProfile userId={1} />
    </ErrorBoundary>
  );
}

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

function DataFetcher() {
  const { showBoundary } = useErrorBoundary();
  
  useEffect(() => {
    fetchData()
      .then(setData)
      .catch(error => {
        // 非同期エラーをError Boundaryに手動で渡す
        showBoundary(error);
      });
  }, []);
  
  return <div>データ</div>;
}

// useErrorBoundaryはreactの内部のthrowハックをカプセル化している
// 先ほどの setState(() => { throw error; }) 相当

// Suspense + Error Boundaryの典型的な組み合わせ
function AsyncDataSection() {
  return (
    // Error Boundaryが外側（レンダリングエラーをキャッチ）
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      {/* Suspenseが内側（データ待機状態を管理） */}
      <Suspense fallback={<LoadingSpinner />}>
        <DataComponent />
        {/* DataComponentは：
            - データ未準備 → Promiseをthrow → Suspenseがキャッチ
            - データ破損   → Errorをthrow  → Error Boundaryがキャッチ */}
      </Suspense>
    </ErrorBoundary>
  );
}

// throwの型による分岐（Reactの内部処理概略）
// throw new Promise(...)    → Suspenseバウンダリへ
// throw new Error(...)      → Error Boundaryへ
// throw 'string'            → Error Boundaryへ（何でも可）

function App() {
  return (
    // レベル1：アプリ全体のフォールバック
    <ErrorBoundary FallbackComponent={AppCrashFallback}>
      <Router>
        {/* レベル2：ページレベルのフォールバック */}
        <ErrorBoundary FallbackComponent={PageErrorFallback}>
          <Header />
          
          <main>
            {/* レベル3：ウィジェットレベルのフォールバック */}
            <ErrorBoundary FallbackComponent={WidgetErrorFallback}>
              <RecommendationWidget />
            </ErrorBoundary>
            
            <ErrorBoundary FallbackComponent={WidgetErrorFallback}>
              <UserActivityFeed />
            </ErrorBoundary>
          </main>
          
          <Footer />
        </ErrorBoundary>
      </Router>
    </ErrorBoundary>
  );
}

// ポイント：
// - ウィジェットが壊れてもページ全体は動き続ける
// - ページが壊れてもアプリ全体はクラッシュしない
// - 各レベルで異なるフォールバックUIを提供できる