VueのエラーハンドラーとAxiosで快適な例外処理を行う

こんなことありませんか？

• 例外処理忘れてて、コンソールに流れていた
• 例外発生時にアラートを表示するだけで4行も余分にコードを書かないといけなくて辛い

XXX.vue

methods: {
  onClick() {
    try {
      this.something();
    } catch (error) {
      alert(error.message);
    }
  },
},

Vueのエラーハンドラーについて

Vue.config.errorHandlerを使えばVueで発生するエラーをほぼキャッチできます。非同期処理内で発生したエラーはキャッチできないため、残りはaddEventListenerでキャッチします。

main.ts

// ほとんどのエラーをキャッチ
Vue.config.errorHandler = function (err, vm, info) {
  // 2.2.0 以降で使用できます。
  alert(err);
}
// 残りのエラーをキャッチ
window.addEventListener("error", event => {
  alert(event.error);
});
window.addEventListener("unhandledrejection", event => {
  alert(event.reason);
});

以下の説明にあるようにバージョンごとに仕様が異なるので注意。

Vue.config.errorHandlerはどこで発生したエラーをキャプチャできるのか - Qiitaが分かりやすくまとまってて参考になりました。

Axiosの共通処理について

Axiosの共通の処理はInterceptorsを使うと綺麗にかけます。
全てのリクエストヘッダーにX-Request-Id: uuidを付けた例です。

Repository.ts

client.interceptors.request.use((config: AxiosRequestConfig) => {
  config.headers['X-Request-Id'] = uuidv4();
  return config;
});

次の例ではrequestとresponseの時間を計測し、APIの通信に何ミリ秒かかったのかを毎回コンソールに出力します。Sentryを使うことで時間のかかってるAPIをフロント側から計測することも出来ますね。

Vueのエラー監視にSentryを使ってみた - Qiita

Repository.ts

import axios from 'axios';

const repository = axios.create({
  baseURL: 'http://localhost:8080',
});
repository.interceptors.request.use(request => {
  performance.mark('start');
  return request;
});
repository.interceptors.response.use(
  // 2XX範囲内のステータスコード
  (response) => {
    performance.mark('finish');
    performance.measure('request-to-response', 'start', 'finish');
    const message = `${performance.getEntriesByName('request-to-response')[0].duration}`;
    console.log(message);
    // Sentryでログを残すもよし
    // Sentry.captureMessage(message, Sentry.Severity.Debug);
    return response;
  },
  // 2XX範囲外のステータスコード
  (error) => {
      return Promise.reject(error);
  }
);
export default repository;

結果

• 例外処理忘れても確実にアラートで表示してくれる
• 共通の例外処理については機械的なtry,catchを書かなくてよくなった

XXX.vue

methods: {
  onClick() {
    this.something();
  },
},