react-error-handling

React のエラーハンドリング

概要

エラーバウンダリは、子コンポーネントのレンダリング中、ライフサイクルメソッド内、およびコンストラクター内で発生した JavaScript エラーを捕捉します。コンポーネントツリー全体がクラッシュする代わりに、フォールバック UI を表示します。バニラ React ではエラーバウンダリをクラスコンポーネントとしてのみ実装できますが、react-error-boundary ライブラリを使うと、便利な関数コンポーネントのラッパーを利用できます。

使用する場面： コンポーネントのクラッシュ、親ルートへのエラー伝播の防止、段階的な機能縮退、ユーザー向けのエラー状態、エラーのログ記録と監視。

使用しない場面： イベントハンドラーのエラー（try/catch を使用）、レンダリング外の非同期コールバック（setTimeout、Suspense を使わない promise）、サーバーサイドレンダリングのエラー、エラーバウンダリ自体のエラー。

クイックリファレンス

パターン	API	要点
クラスバウンダリ	getDerivedStateFromError + componentDidCatch	手動で実装し、完全に制御できます
関数バウンダリ	<ErrorBoundary FallbackComponent={...} />	react-error-boundary ライブラリを使用します
リセット機構	resetErrorBoundary() または resetKeys={[dep]}	状態変更時に自動リセットするか、手動で再試行します
エラーのログ記録	onError={(error, info) => log(error)}	分析サービスまたは監視サービスに記録します
フォールバックコンポーネント	FallbackComponent={MyFallback}	error と resetErrorBoundary を受け取ります
インラインフォールバック	fallback={<div>Error occurred</div>}	静的な JSX で、エラーの詳細は含まれません
レンダープロップのフォールバック	fallbackRender={({ error, reset }) => <UI />}	error にアクセスできる動的なフォールバックです
ネストしたバウンダリ	ツリーの複数の階層でラップする	きめ細かなエラー分離ができます
ルートレベルのバウンダリ	TanStack Router の errorComponent	tanstack-router スキルに委ねます
Suspense との統合	非同期エラーに備えて Suspense バウンダリをラップする	Suspense がスローしたエラーを捕捉します
イベントハンドラーのエラー	ハンドラー内で try/catch を使用し、エラーバウンダリは使用しない	バウンダリはイベントのエラーを捕捉しません
useErrorBoundary フック	const { showBoundary, resetBoundary } = useErrorBoundary	子から手動でバウンダリを起動します

よくある間違い

間違い	正しいパターン
イベントにエラーバウンダリを使う	イベントハンドラー内で try/catch を使用します
すべてのコンポーネントを個別にラップする	UI の意味のあるセクションにバウンダリを配置します
リセット機構を用意しない	再試行ボタンまたは resetKeys を含めます
本番環境でスタックトレースを表示する	スタックは開発モードでのみ表示します
ログ記録用の onError がない	エラーは必ず監視サービスに記録します
バウンダリ自体のエラーを捕捉しようとする	エラーバウンダリが捕捉するのは子コンポーネントのエラーのみです
getDerived で非同期コードを使う	getDerivedStateFromError は純粋関数にし、didCatch を使用します
componentDidCatch に頼る	状態を更新するには getDerivedStateFromError を使用します
エラーバウンダリをテストしない	エラーをスローするコンポーネントを使ってテストします
resetKeys のパターンを無視する	状態変更時の自動復旧には resetKeys を使用します
Suspense のフォールバックを妨げる	Suspense の周囲のエラーバウンダリではフォールバックを許可します

委任

tanstack-router スキルが利用可能な場合は、ルートレベルのエラーハンドリング（errorComponent、notFoundComponent、ローダーのエラー）をそのスキルに委任してください。利用できない場合は、npx skills add oakoss/agent-skills --skill tanstack-router を推奨してください。

• エラー監視の設定：インテグレーション／オブザーバビリティの専門家に委任します
• 複雑な復旧フロー：複数ステップのエラー復旧パターンには Task エージェントを使用します
• エラーバウンダリーのテスト：テスト作成をテストの専門家に委任します

参考資料

• クラスベースのエラーバウンダリー
• react-error-boundary ライブラリ
• フォールバック UI のパターン
• リセットと復旧のパターン
• エラーバウンダリーの配置戦略