6. 로그/모니터링(Sentry · OpenTelemetry · Request-ID)

Tech Note — React 6. 로그/모니터링

Tech NoteReact6화 · 2025-12

목차

1. 프론트 관측성의 핵심: “에러/성능/상관관계”
2. 에러 모니터링: Sentry 기본
3. 트레이싱/메트릭: OpenTelemetry 개념
4. Request-ID로 프론트↔프록시↔백엔드 연결
5. References

0) 프론트 관측성의 핵심: “에러/성능/상관관계”

• 에러: 사용자 화면이 깨졌는지(예외/Unhandled rejection)
• 성능: 첫 로딩/페이지 전환/특정 API가 느린지
• 상관관계: “이 에러가 어떤 요청/로그와 연결되는지”(Request-ID)

1) 에러 모니터링: Sentry 기본

운영에서 프론트 에러는 사용자가 “그냥 안 돼요”로만 신고하는 경우가 많다. 에러 모니터링 도구를 붙이면 재현/원인 추적 비용이 크게 줄어든다.

# 예시: Sentry SDK 설치
npm install @sentry/react

실제 설정은 DSN/환경(prod/stage)/릴리즈 버전/소스맵 처리 정책까지 같이 잡아야 운영에서 가치가 생긴다.

2) 트레이싱/메트릭: OpenTelemetry 개념

OpenTelemetry는 로그/메트릭/트레이스를 수집하기 위한 표준 프레임워크다. 프론트에서도 “사용자 체감 지연”과 “네트워크 호출”을 계측해 백엔드와 연결할 수 있다.

3) Request-ID로 프론트↔프록시↔백엔드 연결

운영 디버깅에서 가장 강력한 패턴은 Request-ID다. 프록시(Nginx)가 Request-ID를 만들거나 전달하고, 백엔드 로그에도 같은 ID를 찍고, 프론트 에러/이벤트에도 그 ID를 붙이면 “한 방에” 이어진다.

• Nginx: X-Request-Id 생성/전달
• Node: 요청마다 request-id를 로깅(구조화 로그 권장)
• React: API 호출 실패 시 request-id를 에러 리포팅에 포함

References

• Sentry Docs — React
• Sentry for React(개요)
• OpenTelemetry JavaScript 문서
• OpenTelemetry JS Getting Started

다음 글: Tech Note — React 7. 트러블슈팅 모음