onErrorCapturedライフサイクルフック
子コンポーネントのエラー捕捉、伝播を止めるfalseの返却、エラーオブジェクト
「onErrorCapturedライフサイクルフック」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
コンポーネントでエラーを捕捉する
Vueには、子孫コンポーネントがスローしたエラーを捕捉するonErrorCapturedライフサイクルフックがあります。親コンポーネントでサブツリー内のエラーを横取りできます。
フックのシグネチャ
onErrorCapturedは3つの引数を受け取ります。エラー、エラーをスローしたコンポーネントインスタンス、そして発生箇所を説明するinfo文字列です。
import { onErrorCaptured } from "vue";
onErrorCaptured((err, instance, info) => {
// handle it
});err引数
最初の引数はスローされたエラーオブジェクトです。通常は、ログに記録したり表示したりできるメッセージとスタックを持つErrorインスタンスです。
onErrorCaptured((err) => {
console.error("Captured:", err.message);
});instance引数
2番目の引数はエラーを発生させたコンポーネントインスタンスです。デバッグに利用したり、レポートにコンテキストを付加したりできます。
onErrorCaptured((err, instance) => {
console.log("From component:", instance);
});info引数
3番目の引数は、どのライフサイクルや操作がエラーを発生させたかを示す文字列です。たとえば「render function」、「setup function」、または特定のフックが指定されます。
onErrorCaptured((err, instance, info) => {
console.log("Vue context:", info);
});子孫のエラーだけを捕捉する
重要なのは、onErrorCapturedが子孫からのエラーを捕捉するものであり、コンポーネント自身のsetupやrenderからのエラーは捕捉しないことです。保護したいコードの祖先にこのフックを配置します。
伝播を停止する
デフォルトでは、捕捉されたエラーは祖先のハンドラーやグローバルハンドラーへ引き続き伝播します。falseを返すと、それ以上の伝播を停止できます。
onErrorCaptured((err) => {
reportError(err);
return false; // do not propagate
});伝播を停止する理由
falseを返すと、エラーをその場で閉じ込められます。このコンポーネントがエラーを完全に処理し（たとえばフォールバックを表示し）、グローバルハンドラーまで実行したくない場合に便利です。
伝播させる
上位のハンドラー（またはグローバルハンドラー）にもエラーを認識させたい場合は、falseを返しません。この場合、フックはローカルでログを記録しつつ、エラーを上位へ伝播させます。
onErrorCaptured((err) => {
logLocally(err);
// no return -> still propagates
});実践的な用途
一般的な用途は、ログ記録と復旧用フラグの組み合わせです。リアクティブなフラグを設定してフォールバックを表示しながら、診断用にエラーを報告します。
const failed = ref(false);
onErrorCaptured((err) => {
failed.value = true;
report(err);
return false;
});非同期処理に関する注意点
onErrorCapturedは、子孫のrender、ライフサイクル、同期ハンドラーで発生したエラーを捕捉します。一部の非同期エラー（捕捉されないPromiseの拒否）は、グローバルレベルで処理する方が適切です。これは後で扱います。
確認問題
onErrorCapturedからfalseを返すとどうなるでしょうか。
まとめ
onErrorCaptured((err, instance, info))が子孫コンポーネントのエラーを捕捉することを学びました。info文字列はライフサイクルのコンテキストを示し、falseを返すと伝播を停止して、コンポーネント内でエラーを処理できます。
よくある質問
「onErrorCapturedライフサイクルフック」レッスンは無料ですか？
はい。「onErrorCapturedライフサイクルフック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「onErrorCapturedライフサイクルフック」で何を学びますか？
子コンポーネントのエラー捕捉、伝播を止めるfalseの返却、エラーオブジェクト ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「onErrorCapturedライフサイクルフック」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- onErrorCapturedライフサイクルフック
- Error Boundaryコンポーネント
- グローバルエラー向けapp.config.errorHandler
- Composableでの非同期エラー処理