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

自分で作った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');

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

SentryをVue.jsで使ってみる

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

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

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

Img

くわしくは公式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のエラーが出ています。

Img

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

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

Img

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

Img

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

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

Img

結論

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