flonted의 오류를 알리고 싶습니다
16962 단어 JavaScriptSlackSentry오류 모니터링tech
개요
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의 오류 검출이 순조롭게 진행되는 것 같습니다.
Reference
이 문제에 관하여(flonted의 오류를 알리고 싶습니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/carotene4035/articles/67e0a17e96f592텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)