Sentry를 사용하여 Vue 오류 모니터링 시도

앞부분의 오류를 무시하기 쉽죠.
사용자가 오류 경보를 표시하지만 연락이 없으면 개발자가 이 오류를 알아볼 수 없습니다.
원래의 오류 처리는 적절하게 진행할 수 없으며, 콘솔을 봐도 많은 오류가 있을 수 있다.

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>

오류 내용

대시보드는 잘못된 클래스 단위로 표시됩니다.

오류 세부 페이지에는 운영 체제, 브라우저, IP, 이벤트를 트리거하는 요소, 시간, 잘못된 원본 줄 토출 등이 기록되어 있습니다.

오류 이외의 메시지를 보내고 싶습니다.

Sentry.capture Message를 사용하면 오류 이외의 로그를 남길 수 있습니다.

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

설정 -> 통합에서 Slack을 추가합니다.
설정 -> 경고 -> 규칙 -> 새 경고 규칙에서 알림 규칙을 설정합니다.
위의 설정을 통해 Slack에 도착할 것을 알립니다.