프론트엔드 모니터링 - Sentry 란?

Sentry란?

Sentry는 실시간 로그 취합 및 분석 도구이자 모니터링 플랫폼입니다

Sentry는 애플리케이션의 **오류 추적(Error Tracking)과 성능 모니터링(Performance Monitoring)**을 제공하는 강력한 APM(Application Performance Monitoring) 도구입니다.

특히 **프론트엔드(JavaScript, React, Vue, Angular, Next.js 등)와 백엔드(Node.js, Python, Java, PHP 등)**에서 발생하는 오류를 실시간으로 수집하고 분석하는 기능이 강점이다.

 

 

Sentry의 대표적인 특징

• 이벤트 로그에 대한 다양한 정보 제공
  • Exception & Message: 이벤트 로그 메시지 및 코드 라인 정보 (source map 설정을 해야 정확한 코드라인을 파악할 수 있습니다.)
  • Device: 이벤트 발생 장비 정보 (name, family, model, memory 등)
  • Browser: 이벤트 발생 브라우저 정보 (name, version 등)
  • OS: 이벤트 발생 OS 정보 (name, version, build, kernelVersion 등)
  • Breadcrumbs: 이벤트 발생 과정
• Sentry는 발생한 이벤트 로그에 대하여 다양한 정보를 제공합니다.
• 비슷한 오류 통합
  • Sentry는 Issue Grouping 기능으로 비슷한 이벤트 로그를 하나의 이슈로 통합합니다. 이는 비슷한 오류를 파악하고 추적하는 데 큰 도움이 됩니다.
• 다양한 플랫폼 지원
  • 프론트엔드 뿐만 아니라 .NET, Android, Apple(Cocoa), Go, Java, Kotlin, Python 등의 다양한 플랫폼을 지원합니다.
• 다양한 알림 채널 지원

그래서 왜 필요한가?

• 현재 프론트(클라이언트) 에서 발생한 사용자 오류는 기록되지 않음
• 개발자 환경과 다른 요인에서 발생한 오류 추적 어려움
• 일반 사용자에게 개발자 도구 콘솔에서 발생하는 오류를 매번 알려 달라고 하기엔 많은 불편함이 수반음

어떻게 쓸수 있나

코드상에서 Sentry JavaScript SDK를 웹사이트에 추가해야 합니다.

• CDN으로 추가하는 방법

  Sentry.init({
    dsn: "<https://your-dsn@your-sentry-server/12345>",
    tracesSampleRate: 1.0
  });

• 자동 오류 감지 및 전송
  • 사용자의 브라우저에서 오류 발생 시, 자동으로 Sentry 서버로 전송됨.
  • 예시: ReferenceError, TypeError 등의 오류 발생 시 추적 가능.
• 추가적으로 사용자 이벤트 수집 가능

Sentry.captureMessage("사용자 정의 메시지 로그");
Sentry.captureException(new Error("사용자 정의 오류"));