챕터별 상세
00:00
Sentry와 광고 SDK
광고 SDK는 외부 웹페이지에서 실행되는 자바스크립트 런타임으로, 환경 제어가 불가능하고 매일 수억 건의 요청이 발생한다. 기존 Sentry는 범용 도구로서 SDK 환경의 특수성을 완벽히 반영하지 못해 에러 분석에 한계가 있었다. 특히 매체 페이지의 무관한 에러까지 수집되어 노이즈가 심했다.
typescript
const handler = (msg, url, line, column, error) => { const handlerData = { seq, url, line, column, error }; triggerHandler(handlerData); return; }; _oldErrorHandler = GLOBAL.obj.onerror;기존 에러 핸들러를 가로채 데이터를 전송하는 로직
06:13
직접 구현하기로 한 이유
Sentry의 방대한 기능 중 실제 필요한 것은 에러 캡처와 이슈 조회 정도였으나, 비용과 인프라 운영 부담이 컸다. 사내 공통 로깅 시스템인 넬로(NELO)를 활용하면 인프라 비용을 절감할 수 있다는 판단하에 직접 구현을 결정했다. 도메인 특화 기능을 직접 구현하는 것이 장기적으로 효율적이었다.
10:27
glog 구축기
glog는 SDK, CLI, API 서버, 웹 대시보드로 구성된다. SDK는 에러 발생 시 컨텍스트를 묶어 넬로로 전송하고, API 서버는 넬로의 로그를 검색하여 이슈를 그룹핑한다. 웹 대시보드는 리액트 기반으로 에러 발생 지점과 컨텍스트를 시각화한다. 에러 핑거프린팅 기법을 적용해 동일 원인의 에러를 하나로 묶었다.
typescript
function fingerprint(ev: ErrorEvent) { const code = ev.errCode ?? 'unknown'; const norm = normalize(ev.message); return sha1(`${code}:${norm}`); }에러 코드와 메시지를 조합해 해시값으로 고유 핑거프린트를 생성하는 로직
16:45
결과와 교훈
직접 구현을 통해 SDK 환경에 최적화된 에러 모니터링 시스템을 확보했다. AI Agent를 활용하여 개발 생산성을 높임으로써 1인 개발로도 일주일 만에 시스템을 구축했다. 기존의 '바퀴를 다시 발명하지 말라'는 원칙은 여전히 유효하지만, AI를 통해 직접 구현의 진입장벽이 낮아졌다.
용어 해설
- 소프트웨어 개발 키트(SDK)
- — 소프트웨어 개발을 위한 도구 모음. 여기서는 광고 SDK가 외부 웹페이지에 삽입되어 실행되는 환경을 의미함.
- 소스 맵(Source Map)
- — 압축·난독화된 자바스크립트 코드를 원본 소스 코드와 매핑해주는 파일. 에러 발생 시 원본 코드의 위치를 추적하는 데 필수적임.
- 핑거프린팅(Fingerprinting)
- — 에러의 고유한 특징(에러 코드, 메시지 등)을 추출하여 동일한 원인의 에러를 하나의 이슈로 그룹화하는 기법.
언급된 리소스
문서Sentry
AI 분석 전체 내용 보기
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
원문 발행 2026. 06. 16.수집 2026. 06. 16.출처 타입 YOUTUBE
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.
