グローバルエラー向けapp.config.errorHandler
グローバルエラーハンドラー、Sentry/Datadogへのログ記録、環境に応じたエラー表示
「グローバルエラー向けapp.config.errorHandler」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
グローバルエラーハンドラー
Vue は app.config.errorHandler を提供しています。これは、アプリ内のどこで発生したかにかかわらず、ローカルで処理されなかったエラーを捕捉する単一の関数です。最後の防衛線となります。
ハンドラーのシグネチャ
onErrorCaptured と同じ3つの引数、つまりエラー、コンポーネントインスタンス、情報文字列を受け取ります。
app.config.errorHandler = (err, instance, info) => {
// global handling
};設定する
マウントする前に、エントリーファイルでアプリインスタンスに設定します。
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
console.error(err, info);
};
app.mount("#app");未処理のエラーを捕捉する
アプリ全体にわたるコンポーネントのレンダリング、ライフサイクルフック、ウォッチャー、イベントハンドラーからのエラーを捕捉します。ローカルの onErrorCaptured フックを通り抜けて伝播したエラーも対象です。
本番環境で Sentry に報告する
本番環境では、エラーを Sentry のような監視サービスに転送して、ユーザーが遭遇した失敗を把握できるようにします。
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) {
Sentry.captureException(err, { extra: { info } });
}
};開発環境で詳細にログ出力する
開発中は、すばやくデバッグできるよう、より詳細な情報をコンソールにログ出力します。
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.DEV) {
console.group("Vue error");
console.error(err);
console.log("info:", info, "instance:", instance);
console.groupEnd();
}
};環境による分岐
堅牢なハンドラーは、1つの関数で本番環境では報告し、開発環境では詳細なログを出力します。
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) Sentry.captureException(err);
else console.error("[Vue]", err, info);
};非同期エラー
グローバルハンドラーは、非同期ライフサイクルフックやウォッチャー内でスローされたエラーも捕捉します。Vue の外部で発生する未処理の Promise の拒否については、window にもリスナーを追加してください。
window.addEventListener("unhandledrejection", (e) => {
Sentry.captureException(e.reason);
});境界との関係
ローカルの境界と onErrorCaptured は、エラーが発生した場所の近くでエラーを処理して封じ込めます。一方、グローバルハンドラーは、そこから漏れたすべてのエラーに対するセーフティネットです。両方を組み合わせて使用してください。
黙って無視しない
エラーを隠してしまう空のハンドラーは避けてください。少なくとも必ずログに記録するか報告しましょう。サイレントな失敗は、バグを見えなくし、原因の追跡を非常に困難にします。
コンテキストを追加する
現在のルート、ユーザー ID、アプリのバージョンなどをレポートに追加すると、本番環境のエラーをより迅速に切り分けられます。
Sentry.captureException(err, {
tags: { info },
user: { id: currentUserId }
});クイックチェック
app.config.errorHandler は何を処理しますか？
まとめ
app.config.errorHandler = (err, instance, info) => {} はグローバルなキャッチオールであることを学びました。本番環境では Sentry に報告し、開発中は詳細にログを出力します。また、ローカルの境界と組み合わせることで、層状で堅牢なエラー処理を実現できます。
よくある質問
「グローバルエラー向けapp.config.errorHandler」レッスンは無料ですか？
はい。「グローバルエラー向けapp.config.errorHandler」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「グローバルエラー向けapp.config.errorHandler」で何を学びますか？
グローバルエラーハンドラー、Sentry/Datadogへのログ記録、環境に応じたエラー表示 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「グローバルエラー向けapp.config.errorHandler」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- onErrorCapturedライフサイクルフック
- Error Boundaryコンポーネント
- グローバルエラー向けapp.config.errorHandler
- Composableでの非同期エラー処理