Sentryを使ってフロントエンドのエラーを確認する

エラーの見逃しがよくあるある.

自分で作ったWebアプリを何気なく触っていたらバックエンドのAPIと通信するaxiosの実装ミスで期待する動作になっておりませんでした。 レスポンスで200OK以外が返却された場合ERRORとなってしまうため、READMEによるとしっかりcatchしてあげる必要があったようです。

てっきりaxiosのresponseから取得できるstatuscodeでハンドリングするものだと思っていた・・・。

悪い例↓

public async updateFileList() {
    const res = await axios.get(backendURL + 'data/upload/list');
    if (res.status === 200) { //statusでハンドリングしているが、200以外のstatusは設定されない・・
        this.uploadList = res.data.fileList;
    }

いい例↓

const res = await axios.post(backendURL + 'convert/pdf/download', {
    uploadId: filePath,
    }, {responseType: 'blob'}).catch((err) => { //catchでエラーをつかむ
        if (err.response.status === 404) {
            this.$toasted.show('No File!!', options);
            throw new Error('PdfFileNotFound');

それはさておき、エラーが出ていても気が付かなかったのが問題ですので、何とかします。

Table of Contents

SentryをVue.jsで使ってみる

というわけでさっそくSentryを入れてみます。

Sentryとはエラーイベントを収集・解析して通知するサービスです。 Cloudwatchでもいいのですが、アプリへの導入が簡単にできるのが魅力です。

さらにフロントエンドだと、OS・ブラウザ情報や認証情報も取ってくれる優れものです。

詳しくは公式Demo: What is Sentry?へ。

main.ts

main.tsに、

import Vue from 'vue';
import App from './App.vue';
import router from './router';

import store from './store/';

import { init as SentryInit } from '@sentry/browser';import { Dedupe, ExtraErrorData, Vue as SentryVue } from '@sentry/integrations';

SentryInit({    dsn: 'https://7b6959a517d44d199a9359ccc129cad7@sentry.io/1729562',    integrations: [        new Dedupe(),        new ExtraErrorData({ depth: 3 }),        new SentryVue ({ Vue,  attachProps: true }),    ],});
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

SentryInitを呼び出すだけです。たったそれだけ。

さらにVue用にIntegrateされたSentryVueを呼び出します。 たったそれだけ。

実際にエラーを起こしてみた

実際にエラーを起こします。F12で確認してみると404NotFoundのエラーが出ています。

Sentryに早速エラーが通知されます。

エラーが発火したコード位置もわかります。

SlackにIntegrationすれば通知もリアルタイムできます。

出てきたエラーはIssuesとしてまとめられます。

有料版ではカテゴライズもされるようですが、お金がないので無料版です。

結論

結構簡単に実装できたのでいろんなところに入れてみようと思います。

tubone24にラーメンを食べさせよう！

ぽちっとな↓