Vue エラーハンドリング

Vueアプリケーションにおけるエラーハンドリングは様々な目的や実装が考えられます。ここに書かれているのはいち例なので目的に応じて他のアプローチも検討するべきです。

window.onerror

Vue の外で起こるエラーは window.onerror でキャッチする。

window.onerror = function (msg, file, line, column, error) {
    const message = '"' + msg + '"'
        + ' at ' + file + ' line ' + line + ' column ' + column
        + ' err:' + JSON.stringify(error);
    console.error(message);
};

• Promiseがrejectされたエラーが検出できない
• IE10以前は未サポート

unhandledrejection, rejectionhandled event

Promiseを使う場面では window.onerror でキャッチできないエラーをevent listener (unhandledrejection, rejectionhandled event) でキャッチする必要があります。

window.addEventListener('unhandledrejection', function(event){
    const message = event.reason;
    console.error(message);
});

window.addEventListener('rejectionhandled', function (event) {
    const message = event.reason;
    console.error(message);
});

• IE11以前は未サポート(Edge79以降ではサポートされている)
• Android版Firefox未サポート

Vue.config.errorHandler

Vue レイヤのグローバルエラーハンドラ Vue.config.errorHandler

Vue.config.errorHandler = function(error, vm, info) {
    const message = error.toString();
    console.error(message);
}

• とにかくここでキャッチすれば Vue のエラーは捕まえられる
• Vue 2.6.0 以降ではv-on DOM リスナ内で投げられたエラーもキャプチャします。
• Vue 2.6.0 以降ではフックやハンドラが Promise チェーン (例えば、async 関数) を返す場合、その Promise チェーンからのエラーもハンドリングされます。

errorCaptured

Vue インスタンス・コンポーネントに仕込むことができるエラーオプション。

errorCaptured: function(error, vm, info) {
    const message = error.toString();
    console.error(message);
    return false;
}

• エラーは親コンポーネントに順に伝播して Vue.config.errorHandler までいく
• falseを返すと、そこで伝播がとまる

まとめ

JSグローバルで window.onerror を仕込みつつ、Promiseの利用がある場合は、unhandledrejection, rejectionhandled event も併用しつつ、Vueレイヤでは Vue.config.errorHandler をグローバルに使いつつ、コンポーネント単位でエラーハンドリングが必要な場合は errorCaptured を用いる。

Vue のバージョンが 2.6.0 以降の場合はVue.config.errorHandlerがあれば unhandledrejection, rejectionhandled event は必要なさそう(未検証)。