[React] Sentry란? React+Sentry - Error Monitoring Example

https://sentry.io/welcome/

Application Performance Monitoring & Error Tracking Software

 

Sentry

• 오류 및 이슈 모니터링 및 오길 플랫폼
• 실시간으로 소프트웨어의 문제를 감지하고 해결할 수 있도록 도와주는 서비스
• 주요 기능
  • 소프트웨어에서 발생하는 오류와 예외 사황을 모니터링하고 수집하여 실시간으로 알려준다.
  • 사용자가 정의한 이벤트를 로깅하여 어떤 상황에서 추적할 수 있어 디버깅과 서능 문제를 분석하는데 되움이 된다.
  • Slack, 이메일 등 다양한 방식으로 알림을 설정할 수 있다.
  • 오류 및 이슈에 대한 상세 정보를 제공하고, 이슈의 상태를 추적하고 해결과정을 기록한다.

 

Sentry 설치 

yarn add @sentry/react @sentry/tracing

npm install --save @sentry/react @sentry/tracing

 

Sentry 초기화

• index 부분에 Sentry 설정 초기화 부분 추가
• Sentry.inti() : Sentry를 설정하고 여러 기능을 활성화시킴
  • dsn : Sentry에서 제공하는 고유한 DNS값 입력
  • integrations : Sentry에서 제공하는 통합 설정 부분
    • Sentry.BrowserTracing: 브라우저에서 발생한느 트랜잭션을 추적하도록 허용
      • tracePropagetionTargets: 어떤 URL에서 분산 추적을 사용할지 설정
    • Sentry.Replay: 브라우저의 세션 재생 기능을 제공하여 사용자들이 겪는 환경 와 오류 상황을 디버깅하는데 도움을 준다.
  • tracesSampleRate : 성능 모니터링을 위한 트랙잭션 샘플링 비율 설정
  • replaySessionSampleRate : 세션 재생을 위한 샘플링 비율
  • replayOnErrorSampleRate : 오류가 발생하는 세션에 대해서 세션 재생 샘플링 비율을 설정

ex) index.js

import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "고유DNS",
  integrations: [
    new Sentry.BrowserTracing({
      tracePropagationTargets: ["localhost"],
    }),
    new Sentry.Replay(),
  ],.
  tracesSampleRate: 1.0, 
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0, 
});

 

 

Sentry 수동으로 보고 하기

• try-catch 등으로 애플리케이션 내부에서 처리돼서 Sentry로 전달되지 않는다.
• Sentry.captureException()를 사용해서 따로 Sentry에 전달 가능하다.

try {
  if (layerInfo.layerList.length > 10) {
    ...
    throw new Error("레이어 개수 초과");
  }
} catch (error) {
  ...
  // 발생한 에러를 Sentry에 보고합니다.
  Sentry.captureException(error);
}

 

 

Sentry 이슈 확인