[ Sentry ] F.E에서 Sentry를 활용하여 디버깅 하기.

sentry.io

 

 

프론트엔드에서 개발 및 운영을 하는 과정에서 발생하는 에러를 모니터링하는 방법은 다양하다. 현재 우리 회사는 프론트엔드의 디버깅 툴로 센트리를 사용하고 있어서 간단히 소개하려고 한다.

 

센트리는 웹, 모바일 앱, 게임등의 다양한 애플리케이션에서 발생하는 오류를 실시간으로 추적하고 분석하여 예측 가능한 오류와 예측 불가능한 오류들에 대해 탐지를 위한 툴이다. 처음에는 오픈 소스 프로젝트로 시작하였으나 현재는 클라우드 기반 서비스와 온프레미스 설치 버전을 모두 제공한다. 센트리를 잘 활용하여 고객들에게 더 나은 품질의 서비스를 제공할 수 있다.

 

 

센트리의 강력한 기능들

 

1. 에러 모니터링

애플리케이션에서 발생하는 모든 에러를 자동으로 감지하고 기록하여 개발자가 어떤 에러가 발생했는지 바로 알 수 있도록 도와준다. 

 

 

2. 실시간 알림 & 알림 채널 지원

에러가 발생하면 개발자에게 이메일, 슬랙, 텔레그램 등의 다양한 채널을 통해 바로 알림을 보낸다. 

 

 

3. 에러 디버깅

에러가 발생한 코드의 구체적인 위치와 스택 트레이스(stack trace)를 제공하여 문제를 빠르게 찾고 수정할 수 있도록 도와준다. 에러 발생 시점의 컨텍스트(ex: 사용자 정보, 환경 변수 등등)를 제공하여 더 깊은 분석이 가능하다.

 

 

4. 이슈 트래킹

동일한 에러가 반복될 경우 하나의 이슈로 묶어 관리할 수 있다. 이를 통하여 중복된 에러 리포트를 줄이고 중요한 문제에 집중할 수 있다.

 

 

5. 성능 모니터링

에러 모니터링 외에도 애플리케이션의 성능을 모니터링하여 성능 저하를 감지하고 해결할 수 있게 도와준다. 

 

 

6. 다양한 플랫폼 및 채널 지원

다양한 프로그래밍 언어와 프레임워크를 지원하며, Github, Jira, GitLab 등 여러 개발 도구와의 통합이 가능하다. 

 

 

---

 

간단한 사용 방법

 

 

1. Install (Sentry/react)

npm install --save @sentry/react

 

 

 

 

2. Import sentrt/react & Sentry.init()

import { createRoot } from "react-dom/client";
import { createBrowserRouter } from "react-router-dom";
import React from "react";
import * as Sentry from "@sentry/react";
import App from "./App";

Sentry.init({
  dsn: "https://e3aa9eb8f92a5b7579282df0f9390ff5@o4505825278820352.ingest.us.sentry.io/4505825300905984",
  integrations: [
      // See docs for support of different versions of variation of react router
      // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
    Sentry.reactRouterV6BrowserTracingIntegration({
        useEffect: React.useEffect,
        useLocation,
        useNavigationType,
        createRoutesFromChildren,
        matchRoutes
    }),
    Sentry.replayIntegration()
  ],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  tracesSampleRate: 1.0,

  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],

  // Capture Replay for 10% of all sessions,
  // plus for 100% of sessions with an error
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

const container = document.getElementById(“app”);
const root = createRoot(container);
root.render(<App />);

 

 

 

3. Sentry Admin을 통한 이벤트 로그 확인

 

 

 

 

 

 

 

 

---

 

🌸 출처 🌸

 

React Sentry  Docs - Sentry.io