Sentry란?
Sentry는 실시간 에러 추적 및 모니터링 플랫폼입니다. 애플리케이션에서 발생하는 에러를 실시간으로 캡처하고 개발자에게 상세한 디버깅 정보를 제공합니다.주요 기능
- 실시간 에러 모니터링
- 상세한 스택 트레이스 제공
- 성능 모니터링
- 이슈 그룹화 및 추적
- 다양한 플랫폼 지원 (JavaScript, Python, Java 등)
작동 방식
// JS Sentry 초기화 예시 Sentry.init({ dsn: "your-dsn-here", environment: "production", tracesSampleRate: 1.0, }); // 에러 캡처 try { someFunction(); } catch (error) { Sentry.captureException(error); }
Webhook이란?
Webhook은 특정 이벤트가 발생했을 때 실시간으로 정보를 전달하는 방식입니다. HTTP POST 요청을 통해 데이터를 전송합니다.Slack Incoming Webhook
async function sendToSlack(message) { await fetch('your-webhook-url', { method: 'POST', body: JSON.stringify({ text: message }) }); }
Sentry와 Slack 연동
문제 상황
Sentry에서 제공하는 Slack 연동 기능은 유료 플랜에서만 사용할 수 있습니다. 이에 대한 대안으로 Webhook을 활용한 연동을 고려했지만 아래와 같은 문제점이 있었습니다.
- 데이터 형식 불일치
// Sentry의 데이터 형식 { "project": "project-name", "event": { "type": "error", "message": "Error message", "stacktrace": [...] } } // Slack이 기대하는 데이터 형식 { "text": "Message content", "blocks": [...], "attachments": [...] }
- 직접적인 연동 시 발생하는 에러
- Sentry의 raw 데이터를 Slack이 처리하지 못함
- 데이터 변환 과정 필요
해결 방안
초기 접근: Node.js 서버 구축 고려
처음에는 센트리 데이터를 중간에서 변경하기 위해
Sentry → Node.js 서버 → Slack 같은 구조를 고려했습니다.하지만 이 방식은 몇 가지 제한사항이 있었습니다.- 서버 유지보수 부담
- 확장성 제한
- 사용자 인터페이스 부재
최종 솔루션: Next.js 기반 웹훅 브릿지
최종적으로 서버의 기능도 제공하는
Next.js를 활용하여 간단하게 데이터를 보낼 수 있는 웹훅 API를 새로 생성할 수 있고 또한 UI를 제공하여 쉽고 간편하게 웹훅 주소를 새로 발급받도록 하였습니다.서버리스아키텍처 활용 가능
API Routes를 통한 간편한 웹훅 처리
- 직관적인 UI 제공 가능
- 손쉬운 배포와 관리
주요 기능 구현
1. 메시지 템플릿 제공
interface MessageTemplate { basic: { title: string; message: string; stackTrace: string; }; detailed: { // 추가 상세 정보 }; }
- 기본(Basic) 템플릿: 핵심 에러 정보만 표시
- 상세(Detailed) 템플릿: 브라우저, OS 정보 등 포함
- 그룹(Grouped) 템플릿: 유사 에러 통합
2. 데이터 변환 프로세스
Sentry Event → 데이터 파싱 → 템플릿 적용 → Slack 메시지 포맷 → 전송
결과
최종적으로 아래와 같은 UI를 통해 슬랙 웹훅 주소를 입력하면 센트리에서 슬랙으로 데이터를 보낼 수 있는 웹훅 주소를 발급받게 됩니다.
- 비용 효율성
- 무료 플랜으로도 고급 기능 사용 가능
- 서버리스로 인한 유지보수 비용 최소화
- 커스터마이징
- 상황에 맞는 메시지 포맷 선택
- 에러 정보의 가독성 향상
- 사용 편의성
- 직관적인 웹 인터페이스
- 간단한 설정으로 즉시 사용 가능
