Sentry 도입(1)

내가 담당하고 있는 시스템은 내부 콜센터 시스템으로, Vue.js 기반의 프론트엔드와 Spring Boot 기반의 백엔드로 구성되어 있다.
상담원이 고객과의 전화 상담을 진행하는 데 사용하는 내부 시스템이며, 하루 평균 5,000건의 상담을 처리한다.
상담 업무의 연속성이 중요한 시스템이므로 배포 전 철저한 테스트와 운영 중 모니터링이 필수적이다.

프론트엔드 오류 디버깅의 어려움

백엔드는 서버 로그를 통해 오류를 추적할 수 있어 디버깅이 상대적으로 쉽다.
그러나 프론트엔드 오류는 다르다. 백엔드 로그에 기록되지 않는 클라이언트 측 오류를 디버깅해야 하는 경우가 종종 발생한다.
대부분의 오류는 개발 환경에서 쉽게 재현할 수 있지만, 운영 환경에서 간헐적으로 발생하는 오류는 직접 확인하기 어렵다.

기존 프론트엔드 오류 추적 방식

• 개발 환경에서 오류를 재현하고 디버깅
• 사용자가 오류 발생 시 웹 브라우저 개발자 도구(Console)를 열어 오류 메시지를 캡처하도록 요청

하지만 이 시스템의 주요 사용자는 콜 업무로 바쁜 상담원이다.
상담원에게 개발자 도구를 열고 콘솔 로그를 확인해달라고 요청하는 것은 현실적으로 어렵다.

이런 상황에서 프론트엔드 콘솔 로그를 서버 로그처럼 기록할 수는 없을까? 라는 고민을 하게 되었다.
사수에게 문의해봤지만 별다른 해결책이 없었고, 재현할 수 없는 프론트엔드 오류를 디버깅할 방법을 찾다가 클라이언트 사이드 오류 로깅 도구인 Sentry를 도입하면 어떨까 생각하게 되었다.

---

InterMax vs Sentry: 어떤 차이가 있을까?

현재 우리 회사에서는 애플리케이션 성능 모니터링(APM) 도구인 InterMax를 사용하고 있다.

InterMax란?

서버 성능을 실시간으로 모니터링하는 APM 도구

InterMax 주요 기능
✅ 웹 애플리케이션 서버(WAS) 성능 모니터링
✅ DB, TP, 외부 연계 구간까지 포함한 전체 시스템 성능 분석
✅ 장애 발생 시 즉각적인 원인 분석 및 대응

InterMax는 백엔드 중심의 APM 솔루션으로, 서버 성능 모니터링에는 강점이 있지만 프론트엔드 오류 추적에는 한계가 있다.
이를 보완하기 위해, 나는 클라이언트 사이드 오류 로깅 도구인 Sentry를 함께 활용하는 것이 적절하다고 판단했다.

---

Sentry란?

프론트엔드 오류 추적을 위한 솔루션

Sentry 주요 기능
✅ Vue.js와 손쉽게 통합 가능 (@sentry/vue 패키지 사용)
✅ 운영 환경에서 발생한 JS 오류를 자동 수집 (에러 메시지, 스택 트레이스, 사용자 정보 포함)
✅ API 요청 실패 및 성능 문제 추적 가능
✅ Vue 컴포넌트 단위의 에러 핸들링 지원
✅ 무료 플랜 제공 (일정 요청량까지 무료 사용 가능)

Sentry의 강점
서버에서는 자체 로그를 기록할 수 있지만, 프론트엔드는 클라이언트 환경에 따라 오류 발생 위치가 다를 수 있기 때문에 이를 추적하는 것이 쉽지 않다.
하지만 Sentry를 사용하면 다음과 같은 정보를 자동으로 수집할 수 있다.

✅ 어떤 디바이스에서 오류가 발생했는지
✅ 어떤 브라우저, 어떤 OS에서 발생했는지
✅ 어떤 Vue 컴포넌트에서 오류가 발생했는지
✅ 소스 코드의 어느 부분에서 에러가 발생했는지 (Sourcemap 지원)
✅ Breadcrumbs(사용자의 사이트 이동 경로) 추적 가능

이러한 기능 덕분에, 운영 환경에서 발생하는 오류를 더욱 효과적으로 추적하고 분석할 수 있다.

Sentry 무료 플랜의 제한 사항
무료 플랜에서도 대부분의 기능을 사용할 수 있지만, 몇 가지 제한이 있다.

• 멤버 수 제한: 하나의 계정으로 로그인해야 해당 이슈들을 조회할 수 있음 (유료 사용 시 무제한)
• 에러 수 제한: 무료 플랜에서는 월 5,000개까지 수집 가능 (유료 사용 시 100,000개 이상)
• 히스토리 저장 기간: 무료 사용 시 30일간 오류 기록 보관 (유료 사용 시 최대 90일)
• 추가 기능 제한: 알림 서비스, 성능 모니터링 기능 등 일부 기능은 유료 플랜에서만 제공

이러한 제한이 있긴 하지만, 우리 시스템의 경우 프론트엔드 오류 발생량이 많지 않기 때문에 무료 플랜만으로도 충분히 효과적으로 활용할 수 있을 것이라고 판단했다.

---

결론: Sentry + InterMax로 완벽한 모니터링 구축

기존 InterMax는 서버 측 성능 및 백엔드 오류 추적에 강점이 있다면,
Sentry는 프론트엔드에서 발생하는 오류를 자동으로 기록하고 분석할 수 있는 강력한 도구다.

💡 Sentry + InterMax를 조합하면?

✅ 백엔드와 프론트엔드의 오류를 모두 효과적으로 추적 가능
✅ 운영 환경에서 발생하는 클라이언트 오류를 자동으로 로깅하여 빠르게 대응 가능
✅ 더 이상 사용자의 오류 제보에 의존하지 않고 직접 오류를 감지할 수 있음

즉, Sentry를 사용하여 클라이언트 측 에러를 추적하고, InterMax를 사용하여 서버 측 성능을 모니터링하는 방식으로 활용해서 최적의 모니터링 환경을 구성하려고한다.

---

다음 글에서는
1️⃣ Sentry 설정 과정
2️⃣ Sentry를 더욱 효과적으로 활용하기 위한 에러 바운더리(Error Boundary) 설정 방법
에 대해서 다룰 예정이다. 🚀