こんにちは

フロントエンドにおける天敵、機種・ブラウザ対応。
日々、フロントエンドエンジニアの皆さんはこれらのエラーに悩まされることも多いかと思います。
中には、問い合わせで発覚したが、手元の機種では再現しないパターンもしばしば・・・

今回は、前回: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エンジニアの負担が少しでも軽くなればと思います。