onErrorCaptured() 子孫コンポーネントのエラーをキャッチする
最終更新：2026-10-22
onErrorCaptured() 子孫コンポーネントのエラーをキャッチする
onErrorCaptured() は、子孫コンポーネントのレンダリング・ライフサイクル・ウォッチャーで投げられたエラーをキャッチし、エラーが上に伝播するのを止められます。
| グループ | ライフサイクルフック |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
onErrorCaptured((err, instance, info) => {
console.error(err)
return false // false を返すと上位への伝播を止める
})⚙️ 引数
| err | エラーオブジェクト |
|---|---|
| instance | エラーを投げたコンポーネントインスタンス |
| info | エラーの発生元の説明（render / mounted hook など） |
戻り値：false を返すとエラーの伝播を止められます
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The page shows 'caught: child exploded' without a blank screen.💡 ポイント
💡 ヒント ルートコンポーネントでキャッチして監視プラットフォーム（Sentry など）に報告するのは定番の使い方です。
⚠️ 注意 キャッチしたあともエラーを処理してください。記録するだけで済ますと問題が隠れ、静かな失敗につながります。
ℹ️ 補足 false を返すとそれ以上のバブルを止められます。返さない場合はエラーが上位とグローバルの errorHandler へ伝わります。
🏷️ 関連ライフサイクルフック
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q 子コンポーネントの非同期リクエストのエラーもキャッチできますか？
A できません。レンダリング、ライフサイクルフック、ウォッチャーで同期的に投げられたエラーだけをキャッチします。Promise の拒否は各自で処理してください。
Q グローバルの errorHandler との関係は？
A エラーはまず直近の上位のキャッチ地点にバブルします。そこで return false すればグローバルハンドラには届きません。
Q エラー境界コンポーネントはどう書きますか？
A 親側のコンポーネントで onErrorCaptured を使い、条件分岐でフォールバック UI を描くだけで実現できます。
