프론트엔드에서의 모니터링 환경 구축 feat Sentry, GA

프론트엔드에서의 모니터링 환경 구축 feat Sentry, GA

프론트엔드 개발에서 사용자 경험과 시스템 안정성을 보장하기 위해 모니터링 도구는 필수적입니다. 저희 팀은 여러 모니터링 도구 중에서 Sentry와 Google Analytics(GA)의 도입 여부를 논의하였습니다. 이 글에서는 Sentry와 GA가 무엇인지, 그리고 도입 배경에 대해 이야기해보려고 합니다.

Sentry란 무엇일까?

Sentry는 애플리케이션에서 발생하는 오류를 실시간으로 모니터링하고 추적하는 도구입니다. 이를 통해 개발자는 오류가 발생한 원인과 위치를 빠르게 파악할 수 있으며, 더 많은 사용자에게 부정적인 영향을 미치기 전에 문제를 해결할 수 있습니다. 특히, Sentry는 다양한 언어와 프레임워크를 지원하고, 설정이 비교적 간단하다는 장점이 있습니다. 저희 서비스는 React를 활용하고 있고, 이를 지원하는 Sentry는 매우 매력적인 도구라 판단했습니다.

GA란 무엇일까?

Google Analytics(GA)는 웹사이트 트래픽과 사용자 행동을 분석하는 도구입니다. GA를 통해 방문자 수, 페이지뷰, 사용자 세션 등의 데이터를 수집하고 분석할 수 있습니다. 이를 활용하여 사용자 행동을 이해하고, 웹사이트의 사용성을 개선하는 데 필요한 인사이트를 얻을 수 있습니다. GA는 강력한 분석 기능과 다양한 보고서를 제공하여 마케팅 전략 수립에도 유용합니다.

Sentry와 GA 도입 배경

우리 팀에서 Sentry 도입이 필요한 이유

현재 개발 중인 애플리케이션은 아직 완성도가 높지 않아 다양한 버그가 발생할 가능성이 큽니다. Sentry를 통해 이러한 버그를 실시간으로 모니터링하고 신속하게 대응할 수 있습니다.

특히 중요한 API 오류는 사용자 경험에 큰 영향을 미칠 수 있습니다. Sentry는 이러한 크리티컬한 오류를 즉각적으로 파악하고, 신속하게 대응할 수 있는 체계를 갖추는 데 도움을 줍니다.

GA의 도입이 필요한 이유

현재 단계에서는 사용성을 끌어올리기 위한 정밀한 사용자 행동 트래킹이 필수적이지 않다고 판단하였습니다. 초기 단계에서는 서버 데이터를 통해 사용자 행동을 파악하고, 이를 바탕으로 사용성을 개선하는 것이 더 효과적이라고 생각합니다.

하지만 서비스가 성장하면서 정량적 데이터의 필요성이 커질 것을 대비하여 GA를 설정해 두는 것이 좋다고 판단하였습니다.

현재 우리 서비스의 핵심 지표라 할 수 있는 것은?

우리 서비스의 성과를 측정하고 개선하기 위해 몇 가지 핵심 지표를 설정했습니다.

1. 최종프로세스/모집인원으로 ****사용자들이 모집 과정을 얼마나 잘 완료하는지를 나타냅니다. 숫자가 1에 가까울수록 좋으며, 이를 위해 서버 데이터를 활용하여 모니터링하고 있습니다. 현재로서는 서버 데이터를 통해 충분히 파악할 수 있어 GA가 불필요합니다.
2. 모집단계 이동 버튼의 사용성을 판단하기 위해서 GA를 사용하여 인사이트를 얻을 수 있습니다. 현재 저희 서비스에서는 모집 단계가 이동 이벤트가 모달내부, 외부 두 가지 버튼이 있고, GA를 통해 사용자들이 어떤 버튼을 자주 사용하는지 파악할 수 있습니다.
3. 예상 사용자의 디바이스 파악 저희 서비스는 관리자입장에서의 뷰는 웹을 지원합니다. 실제로 어떤 디바이스로 으로 제공해야 할 뷰를 결정할 수 있습니다. 이를 통해 더욱 최적화된 사용자 경험을 제공하고자 합니다.
4. 공고 생성 단계에서의 이탈률 사용자가 공고 생성 도중 이탈하는 비율을 추적하여 문제점을 파악하고 개선하는 것이 필요할 것으로 생각됩니다. 이탈률 데이터를 수집하여 추후 서비스 개선에 활용하기 위해 GA를 사용합니다.

Sentry를 통해 어떤 알림을 받으면 좋을까요?

Sentry는 오류 발생 시 빠르게 대응할 수 있도록 알림 기능을 제공합니다. 저희는 슬랙과 연동하여 실시간으로 알림을 받고 있습니다. 초기 단계인 현재에는 모든 오류를 모니터링하는 것이 중요하다고 판단하여, Production에서 발생하는 모든 에러를 알림으로 설정했습니다. 이를 통해 오류 데이터를 축적하고, 어떤 오류가 중요한지 판단해가며 필터링을 진행할 것입니다.

특히, API 관련 오류는 사용자 경험에 큰 영향을 미치기 때문에 별도로 추적할 필요가 있습니다. 이를 위해 다음과 같은 에러 객체를 정의하여 APIError를 구분하였습니다:

또한, 다음 스프린트에서는 로그인 인증 기능을 구현할 예정입니다. 이에 따라 AuthError를 구분하여 추적할 계획입니다. 이러한 오류 구분은 서비스 안정성을 높이고, 사용자 경험을 개선하는 데 도움이 될 것입니다.

[Slack](https://docs.sentry.io/organization/integrations/notification-incidents/slack/)