2018.11.21
Vue.jsでフロント側のエラー検知を共通化する

こんにちは
フロントエンドにおける天敵、機種・ブラウザ対応。
日々、フロントエンドエンジニアの皆さんはこれらのエラーに悩まされることも多いかと思います。
中には、問い合わせで発覚したが、手元の機種では再現しないパターンもしばしば・・・
今回は、前回:Vuexを用いてマスタデータ等の取得を共通化するに引き続き、
Vue.jsで構築したサイトにおけるフロントエンド側でのエラー検知について記載します。
使う機能はこれ
Vue.js errorHandler
API自体は単純なもので、各コンポーネントで発生したエラーをハンドリングすることができます。
Vue.jsのバージョンによって、サポートできる範囲が異なるようなので、注意しましょう!
私のサービスでは、以下のように例外をAPIサーバへ送信して、そこでログファイルに記載するように対応しています。
Vue.config.errorHandler = function (err, vm, info) {
//例外がループしないようにtry-catch
try {
//API送信処理
/*
* err.stack
* vm.$metaInfo,
* info
* あたりを自サービスだと送信
*/
} catch (e) {
}
}
これにより、フロントエンドにおける例外も検知できるようになり、機会損失や調査工数を削減することができました。
処理自体は単純なものですが、意外とググっても出てこない為、本ブログにてVue.jsエンジニアの負担が少しでも軽くなればと思います。