SSR 환경에서의 웹앱 로깅 효율화: 가시성 및 모니터링 개선 사례

핵심 기술: 본 글은 모바일 기기 성능이나 웹뷰 로딩 환경이 좋지 않은 상황에서도 원활한 사용자 경험을 제공하기 위해 Streaming SSR을 도입한 웹앱 서버에서 발생한 로깅 문제점을 해결하고, 로그의 가시성과 모니터링 편의성을 개선한 과정을 공유합니다.

기술적 세부사항:
* 문제점:
* 로그 흐름 파악의 어려움: 상황 예측 기반 디버깅, 메타데이터 대조 및 유사 사례 추측 필요.
* 잘못된 로그 위치 추적의 어려움: 불필요한 로그 발생 시 원인 규명에 4시간 소요.
* 근본 원인: 일관성 없는 로깅 정책 및 로그 형식.
* 개선 방안: 네 가지 구성 요소를 활용한 로그 포맷 통일
* 로그 Level: 심각도/중요도 구분 및 색상 적용 (ANSI escape 코드 활용).
* 로그 메시지: 간결하고 명확한 핵심 내용 전달.
* 로그 트레이스: JS Error 객체의 stack trace 활용하여 코드 발생 위치 정확히 표기.
* 메타데이터: Loki를 위한 JSON 형식의 메타데이터 추가 (요청 식별자, 사용자 식별자 등).
* 구현 방식:
* 로거 자체 로직 직접 구현 (라이브러리 종속성 회피 및 유연성 확보).
* 엔지니어 편의성을 위한 세 가지 인터페이스 제공:
1. 단순 로그 포맷 제공.
2. 메타데이터 주입 로거 인스턴스 제공.
3. 공통 메타데이터 주입 로거 (미들웨어 활용, 전역적 logger context 생성).
* 개선 효과:
* 유저 식별자를 통한 특정 유저 로그 추적 용이.
* 요청 식별자를 통한 요청 단위 흐름 파악.
* 로그 호출 위치 즉시 확인 가능.
* 모니터링 툴과의 통합 (클라이언트 에러부터 서버 모니터링까지 한 흐름으로).
* 오류 디버깅 시간 단축 (CS 문의 → 메타데이터 확인 → 로그 검색 → 해결 → CS 문의 → 모니터링 툴/로그 사용자 식별자 검색 → 해결).

개발 임팩트: 로깅 구조 개선을 통해 운영 효율성을 높이고, 문제 발생 시 신속한 대응이 가능해졌습니다. 또한, 개발자 간의 로그 이해도를 높여 협업 및 코드 맥락 파악에 도움을 주며, 궁극적으로는 더 나은 사용자 경험을 제공하는 데 기여합니다. 직접 문제를 정의하고 해결하는 과정에서 개발 문화 및 시스템 전반에 대한 깊이 있는 고민을 할 수 있는 기회를 제공했습니다.

커뮤니티 반응: (원문 내용에 직접적인 커뮤니티 반응 언급은 없으나, 공유 방식 자체가 개발자 커뮤니티에서 긍정적으로 받아들여질 만한 내용임)