flonted의 오류를 알리고 싶습니다

개요


Sentry를 사용하여 fronted에서 발생한 오류에 대해 Slack 공지를 표시합니다.
Sentry가 공식적으로 준비한 Slack Integration은 Sentry의 유료 계획이 아니면 사용할 수 없습니다.
센트리의 웹훅, AWS Lamba, API Gateway, 슬랙의 인컴핑 웹훅을 조합해 무료 방안으로 구현한다.

날과 씨


fronted의 오류 로그 모니터링에 "Sentry"를 사용하기로 결정했습니다.
하면, 만약, 만약...
import * as Sentry from '@sentry/browser'
import { Integrations } from '@sentry/tracing'

Sentry.init({
  dsn: 'https://xxxx',
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
})
다음과 같이 오류가 발생하면 Sentry의 WebUI에서 확인할 수 있습니다.

device의 정보·os의 정보 등도 자동으로 얻기 때문에 특히fronted의 오류 감시에 편리하다.

이것만으로도 최고입니다. Sentry는 각종 서비스와integration을 제공할 수 있습니다.
이번에는 슬랙과의 협력을 통해 Sentry가 포착한 오류 로그를 슬랙에게 알리고 싶습니다

Sentry Team 계획이 필요합니다.그리고 팀 계획은 유료예요.
이미 포기했지만 웹훅은 무료 프로그램에서도 이용할 수 있다.
이번에는 웹훅을 사용해 무료 방안도 슬랙에게 통지해 봤다.

의 목적


나는 슬랙에게 이런 통지를 받게 할 것이다.

프로비저닝



AWS Lambda를 사용합니다.
Sentry에서 로그가 감지되면 Sentry WebHooks에서 API Gateway가 만든 끝점을 쳐서 Lambda를 호출합니다.
Lambda에서 Slack의 Incoming Webhook을 쳐서 Slack에게 통지합니다.

절차.


  • Slack의 Incoming Webhook 설정
    설정 방법은 다음과 같다.

  • AWS Lambda를 통한 함수 작성
    이번에는 노드.js로 만들었어요.
    event.바디에서 Sentry에서 온 json에 접근할 수 있습니다.
    센트리 공식에도 json 구조가 기재돼 있지만 실제 구조와 다소 어긋나기 때문에 반복적으로 시험해 확인했다.
    const { IncomingWebhook } = require('@slack/webhook')
    // Webhook url
    const url = 'https://hooks.slack.com/xxxxx'
    const webhook = new IncomingWebhook(url)
    
    exports.handler = async (event) => {
      const sentryBodyStr = event.body
      const sentryBody = JSON.parse(sentryBodyStr)
      const sentryEvent = sentryBody.event
      
      // ブラウザ情報
      const browserInfo = (() => {
        const browser = sentryEvent.contexts.browser
        if (browser === undefined) return 'unknown'
        return `${browser.name} ${browser.type} ${browser.version}`
      })()
      
      // OS情報
      const osInfo = (() => {
        const os = sentryEvent.contexts.os
        if (os === undefined) return 'unknown'
        return `${os.name} ${os.type} ${os.version}`
      })()
      
      // デバイス情報
      const deviceInfo = (() => {
        const device = sentryEvent.contexts.device
        if (device === undefined) return 'unknown'
        return `${device.family}`
      })()
      
      // エラー名
      const title = sentryEvent.title
      
      // Sentryのissue URL
      const url = sentryBody.url
      
      // 環境
      const env = sentryEvent.environment
    
      const issue = {
        message: title,
        detail: url,
        browser: browserInfo,
        os: osInfo,
        device: deviceInfo
      }
      const issueProperties = Object.entries(issue).map(entry => { return `${entry[0]}: ${entry[1]}` })
    
      const payload = {
        "blocks": [
          {
    	"type": "section",
    	"text": {
    	  "type": "mrkdwn",
    	  "text": `:ghost: *${env}* でエラーがおきたよ`
    	}
          },
          {
    	"type": "section",
    	"text": {
    	  "type": "mrkdwn",
    	  "text": issueProperties.join('\n')
    	}
          },
        ]
      }
      await webhook.send(payload)
    }
    

  • AWS API Gateway를 트리거하여 AWS Lambda 작업 설정
    설정 방법은 다음과 같다.

  • Sentry WebHooks에서 API Gateway의 endpoint 지정
    Webhooks 및 Addo Project 선택


    API Gateway의 endpoint를 설정합니다.


  • Sentry의 Alert 설정에서 어떤 조건하에서 Kick webhook의 설정을 진행합니까

  • 이 설정으로 끝냅니다.
    Sentry에서 감지된 오류가 슬랙에 안전하게 표시됩니다.

    총결산


    Sentry가 웹훅이라는 통용성이 높은 수단을 제공했기 때문에 큰 도움이 됐습니다.
    이렇게 되면 fronted의 오류 검출이 순조롭게 진행되는 것 같습니다.

    좋은 웹페이지 즐겨찾기