ReactのError Boundaryでエラーを受け止める方法

export function Header() {
  return <h1>マイページ</h1>;
}

export function Profile() {
  if (flags.profileBroken) {
    throw new Error('プロフィールを表示できません');
  }
  return <p>プロフィール: ねこ</p>;
}

export function NoBoundary() {
  return (
    <>
      <Header />
      <Profile />
    </>
  );
}

--- 1. Error Boundary なし ---
  [onUncaughtError] プロフィールを表示できません
  画面: (空)

import { Component, type ErrorInfo, type ReactNode } from 'react';

type FallbackProps = { error: unknown; reset: () => void };

type Props = {
  children: ReactNode;
  fallback: (props: FallbackProps) => ReactNode;
  onError?: (error: unknown, info: ErrorInfo) => void;
};

// error には null や文字列が入ることもあるので、エラーの有無は別に持つ
type State = { hasError: boolean; error: unknown };

export class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false, error: null };

  // 子のどこかで描画中にエラーが投げられたら、次の描画で fallback を出す
  static getDerivedStateFromError(error: unknown): State {
    return { hasError: true, error };
  }

  // エラーの記録など、副作用はこちらで行う
  componentDidCatch(error: unknown, info: ErrorInfo) {
    this.props.onError?.(error, info);
  }

  reset = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      return this.props.fallback({ error: this.state.error, reset: this.reset });
    }
    return this.props.children;
  }
}

function Fallback({ error, reset }: { error: unknown; reset: () => void }) {
  return (
    <div role="alert">
      <p>表示できませんでした（{error instanceof Error ? error.message : String(error)}）</p>
      <button id="retry" onClick={reset}>もう一度試す</button>
    </div>
  );
}

export function WithBoundary({ log }: { log: (s: string) => void }) {
  return (
    <>
      <Header />
      <ErrorBoundary
        fallback={(p) => <Fallback {...p} />}
        onError={(error, info) => {
          log(`componentDidCatch: ${(error as Error).message}`);
          log(`componentStack:${info.componentStack}`);
        }}
      >
        <Profile />
      </ErrorBoundary>
    </>
  );
}

--- 2. Error Boundary あり ---
  [onCaughtError] プロフィールを表示できません
  [componentDidCatch] プロフィールを表示できません
  [componentStack]
    at Profile
    at ErrorBoundary
    at WithBoundary
  画面: <h1>マイページ</h1><div role="alert"><p>表示できませんでした（プロフィールを表示できません）</p><button id="retry">もう一度試す</button></div>

--- 3. イベントハンドラーで投げる ---
  画面: <h1>マイページ</h1><button id="btn">送る</button>
  > #btn をクリック
  [window error] クリックで失敗
  画面: <h1>マイページ</h1><button id="btn">送る</button>

function RethrowInSetState() {
  const [, setState] = useState(0);
  return (
    <button
      id="btn"
      onClick={() => {
        try {
          throw new Error('クリックで失敗');
        } catch (e) {
          setState(() => { throw e; });
        }
      }}
    >
      送る
    </button>
  );
}

--- 6. ハンドラーで捕まえて、state の更新関数の中で投げ直す ---
  画面: <h1>マイページ</h1><button id="btn">送る</button>
  > #btn をクリック
  [onCaughtError] クリックで失敗
  画面: <h1>マイページ</h1><div role="alert"><p>表示できませんでした（クリックで失敗）</p><button id="retry">もう一度試す</button></div>

function ThrowInTransition() {
  const [isPending, startTransition] = useTransition();
  return (
    <button
      id="btn"
      disabled={isPending}
      onClick={() => {
        startTransition(async () => {
          await new Promise((r) => setTimeout(r, 10));
          throw new Error('送信に失敗');
        });
      }}
    >
      送る
    </button>
  );
}

--- 7. startTransition（async）の中で投げる ---
  画面: <h1>マイページ</h1><button id="btn">送る</button>
  > #btn をクリック
  [onCaughtError] 送信に失敗
  画面: <h1>マイページ</h1><div role="alert"><p>表示できませんでした（送信に失敗）</p><button id="retry">もう一度試す</button></div>

import { ErrorBoundary as LibBoundary, useErrorBoundary } from 'react-error-boundary';

function ShowBoundaryButton() {
  const { showBoundary } = useErrorBoundary();
  return (
    <button
      id="btn"
      onClick={() => {
        fetchLike().catch((e) => showBoundary(e));
      }}
    >
      送る
    </button>
  );
}

export function LibShowBoundary() {
  return (
    <>
      <Header />
      <LibBoundary
        fallbackRender={({ error, resetErrorBoundary }) => (
          <Fallback error={error} reset={resetErrorBoundary} />
        )}
      >
        <ShowBoundaryButton />
      </LibBoundary>
    </>
  );
}

--- 8. react-error-boundary の showBoundary ---
  画面: <h1>マイページ</h1><button id="btn">送る</button>
  > #btn をクリック
  [onCaughtError] 通信に失敗
  画面: <h1>マイページ</h1><div role="alert"><p>表示できませんでした（通信に失敗）</p><button id="retry">もう一度試す</button></div>

export function BrokenFallback() {
  return (
    <ErrorBoundary fallback={() => <p>外側: 何かがうまくいきませんでした</p>}>
      <Header />
      <ErrorBoundary
        fallback={() => {
          throw new Error('fallback も失敗');
        }}
      >
        <Profile />
      </ErrorBoundary>
    </ErrorBoundary>
  );
}

--- 9. fallback の中で投げる ---
  [onCaughtError] fallback も失敗
  画面: <p>外側: 何かがうまくいきませんでした</p>

  （原因を直さずに「もう一度試す」）
  > #retry をクリック
  [onCaughtError] プロフィールを表示できません
  [componentDidCatch] プロフィールを表示できません
（中略）
  画面: <h1>マイページ</h1><div role="alert"><p>表示できませんでした（プロフィールを表示できません）</p><button id="retry">もう一度試す</button></div>
  （原因を直してから「もう一度試す」）
  > #retry をクリック
  画面: <h1>マイページ</h1><p>プロフィール: ねこ</p>

export function KeyReset({ userId }: { userId: string }) {
  return (
    <>
      <Header />
      <ErrorBoundary key={userId} fallback={(p) => <Fallback {...p} />}>
        <UserProfile userId={userId} />
      </ErrorBoundary>
    </>
  );
}
function UserProfile({ userId }: { userId: string }) {
  if (userId === 'broken') throw new Error(`${userId} は表示できません`);
  return <p>ユーザー: {userId}</p>;
}

--- 10b. key を付けない場合（broken → neko） ---
  [onCaughtError] broken は表示できません
  画面: <h1>マイページ</h1><div role="alert"><p>表示できませんでした（broken は表示できません）</p><button id="retry">もう一度試す</button></div>
  > userId を neko に変える
  画面: <h1>マイページ</h1><div role="alert"><p>表示できませんでした（broken は表示できません）</p><button id="retry">もう一度試す</button></div>

--- 10. key で作り直す（broken → neko） ---
  [onCaughtError] broken は表示できません
  画面: <h1>マイページ</h1><div role="alert"><p>表示できませんでした（broken は表示できません）</p><button id="retry">もう一度試す</button></div>
  > userId を neko に変える
  画面: <h1>マイページ</h1><p>ユーザー: neko</p>

--- 11. react-error-boundary の resetKeys（broken → neko） ---
  [onCaughtError] broken は表示できません
  画面: <h1>マイページ</h1><div role="alert"><p>表示できませんでした（broken は表示できません）</p><button id="retry">もう一度試す</button></div>
  > userId を neko に変える
  画面: <h1>マイページ</h1><p>ユーザー: neko</p>