Vue.jsプロジェクトにAirbrakeを導入する

Vue.jsのプロジェクトにAirbrakeを導入した。
airbrake-jsのREADMEに、Vueについての記述がなかったので残しておく。

Vue自体のエラーハンドラに登録

Vueにランタイムエラー時のフックが用意されている。そこでnotifyを呼ぶ。

import Vue from 'vue';
import Airbrake from 'airbrake-js';

const airbrake = new Airbrake({ projectId: XXXX, projectKey: 'XXXXX' });

Vue.config.errorHandler = (e) => {
  airbrake.notify(e);
  throw e;
};

new Vue({ el: '#app' });

飛ばす通知に環境ラベルをつける

ステージング・本番で環境(process.env.NODE_ENV)を分けている場合がある。その場合、airbrakeダッシュボードで、どの環境でのエラーか表示させたい。
ただし、開発環境(process.env.NODE_ENVがundefined)の場合はエラーを飛ばしたくない。

airbrake.addFilter(notice => {
  // もし開発環境ならばエラー通知を飛ばさない
  if (typeof process.env.NODE_ENV == 'undefined') {
    return null;
  }

  // 他の環境であれば環境ラベルをつけてエラー通知を飛ばす
  notice.context.environment = process.env.NODE_ENV;
  return notice;
});

axiosのcatch等にも追加しておく

Vueクラス内でaxios等でAPIにアクセスするとき、もしcatchを書いていたらその中でairbrake.notifyを書かないとエラー通知をしてくれない。忘れないように追加する。

import axios from 'axios';
import Airbrake from 'airbrake-js';

const airbrake = new Airbrake({ projectId: XXXX, projectKey: 'XXXXX' });

export default {
  someApiCall() {
　　　　  axios.get('/api/action').then(res => {
      // process
    }).catch(err => {
      console.log('api action failed');
      airbrake.notify(err);
    });
  }
}

複数回使うのでまとめておくと楽

axiosを使っている箇所でインポートして使えるように、まとめておくと楽かも。

lib/airbrake.js

import Airbrake from 'airbrake-js';

const airbrake = new Airbrake({ projectId: XXXX, projectKey: 'XXXXX' });
airbrake.addFilter(notice => {
  // もし開発環境ならばエラー通知を飛ばさない
  if (typeof process.env.NODE_ENV == 'undefined') {
    return null;
  }

  notice.context.environment = process.env.NODE_ENV;
  return notice;
});

export default airbrake;

使用例:

import airbrake from 'lib/airbrake.js';

export default {
  someApiCall() {
　　　　  axios.get('/api/action').then(res => {
      // process
    }).catch(err => {
      console.log('api action failed');
      airbrake.notify(err);
    });
  }
}