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

フロントエンドのエラーって見落としがちですよね。
ユーザーにエラーのアラートを表示しても連絡がなければ開発者はそのエラーに気づくことができません。
そもそもエラー処理が適切に行えておらず、consoleをみるとエラーだらけなんてもことも。

Sentryでエラーを監視する

Sentryを使えばエラーを見落とすことはなくなるでしょう。発生したエラーをキャッチし、メールやSlackで通知してくれます。

SDKをインストール

今回はVueで使用するので、Browser > Vueを選択します。

yarn add @sentry/browser
yarn add @sentry/integrations

main.ts

// sentry
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';
Sentry.init({
  dsn: 'https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  integrations: [new Integrations.Vue({Vue, attachProps: true})],
});

エラー発生するコンポーネントを作成

クリックするとエラーを投げるボタンだけのコンポーネントを作成し、エラーを通知してみましょう。

Home.vue

<template>
  <button @click="onError">error</button>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  methods: {
    onError() {
      class ValidationError extends Error {
        constructor(message: string) {
          super(message);
          this.name = "ValidationError";
        }
      }
      throw new ValidationError("ValidationError");
    }
  }
});
</script>

エラー内容

ダッシュボードではエラーのクラス単位で表示されています。

エラーの詳細ページではOS、ブラウザ、IP、イベントを発火した要素、時間、エラーを吐いたソースの行などが記録されています。

エラー以外の情報を送信したい

Sentry.captureMessageを使うことで、エラー以外のログを残せます。

captureMessage(message: string, level?: Severity): string;

Sentry.Severity
Sentry.Severity.Critical
Sentry.Severity.Info
Sentry.Severity.Log
Sentry.Severity.Warning
Sentry.Severity.Error
Sentry.Severity.Fatal

APIの通信時間はどれくらいかかってるの？

const startTimeMilliSec = Math.round(performance.now());
const response = await axios.get('https://yesno.wtf/api');
const endTimeMilliSec = Math.round(performance.now());
const message = `
  loadTimeSec: ${(endTimeMilliSec - startTimeMilliSec) / 1000}
  answer: ${response.data.answer}
`;
Sentry.captureMessage(message, Sentry.Severity.Debug);

出力結果は以下の通りです。
API通信のたびに毎回通知が来ても困るので、1秒以上かかった場合などの条件を設けるのがいいかもしれません。

Sentryの管理画面の設定

時間を分かりやすくJST/24時間表示に変更しました。

Slackに通知する

Settings -> Integrations よりSlackを追加します。

Settings -> Alerts -> Rules -> New Alert Rule から通知ルールを設定します。

以上の設定で通知がSlackに来るようになりました。