[Sentry] 서비스 에러 모니터링 및 에러 트래킹하기

Gyuhan Park·2024년 8월 8일

React sentry webpack 에러 모니터링 에러 트래킹

인프라

목록 보기

3/3

📘 Sentry 설정

Sentry를 react 애플리케이션에 설정하는 방법을 하나씩 설명하려고 한다.

Sentry 설치

처음에 공식문서에 --save로 되어 있어서 --save-dev인줄 알았다. sentry를 런타임에 사용하기 때문에 빌드 결과물에 추가해야 한다.

npm i @setry/react

Sentry 초기화

가능한 빨리 Sentry를 init하는 것이 중요
Sentry 초기화 코드를 index 파일에 넣고 해당 파일을 애플리케이션 진입 지점에 포함하는 것이 좋음

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

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  integrations: [Sentry.browserTracingIntegration()],
  tracesSampleRate: 1.0,
});
});

Error Boundary (React 16 이상)

Error Boundary 컴포넌트를 사용하여 컴포넌트 트리 내부에서 Sentry로 자바스크립트 오류를 자동으로 전송하고 폴백 UI 설정 가능

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

<Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
  <Example />
</Sentry.ErrorBoundary>;

React Router 트래킹

React Router integration은 tracing package와 함께 작동하도록 설계됨 (추가 설정 예정)

✅ 읽기 쉬운 stack trace 추가

Sentry 오류의 스택 추적이 실제 코드와 다르게 보이는데, 소스맵을 Sentry에 업로드하여 해결할 수 있다.

가장 쉬운 방법은 Sentry Wizard 사용

npx @sentry/wizard@latest -i sourcemaps

처음에는 라이브러리 의존하는 느낌 들어서 수동으로 설치했다 ㅋㅋㅋㅋㅋ 왜그랬을까 근데 알고보니 wizard 사용하면 필요한 내용 가이드해주는 거였음 무조건 쓰세요!!!!!

🚨 source map

Sentry Error 에서 읽기 쉬운 스택 트레이스 설정을 위해 소스맵을 Sentry에 업로드한다.

🚨 webpack

webpack을 사용하여 source map을 수동으로 제공할 때는 @sentry/webpack-plugin 을 사용한다.

build할 때 release를 자동으로 생성하고, 소스맵을 Sentry에 업로드한다.

npm i -D @sentry/webpack-plugin

source map을 업로드하기 위해 auth token을 설정해야 한다.

SENTRY_AUTH_TOKEN 환경 변수를 사용

.env.sentry-build-plugin 파일을 사용하여 전달

인증 토큰을 CI/CD 환경에 환경 변수로 추가하는 것을 권장

const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");

module.exports = {
  // ... other config above ...

  devtool: "source-map", // Source map generation must be turned on
  plugins: [
    sentryWebpackPlugin({
      org: "ddangkong",
      project: "ddangkong-front",
      authToken: process.env.SENTRY_AUTH_TOKEN,
    }),
  ],
};

주의사항

프로덕션에서 소스맵을 생성하는 것은 소스 코드가 유출될 수 있는 public에 노출되므로 2가지 방법을 사용

.js.map 파일에 대한 접근을 막는 설정으로 막을 수 있다.

@sentry/webpack-plugin 의 sourcemaps.filesToDeleteAfterUpload 옵션을 사용하여 Sentry에 업로드된 후에 소스맵을 삭제할 수 있다.

watch mode와 dev mode에서 소스맵을 업로드하지 않는다.
configuration을 확인하기 위해 production build 하도록 권장한다.

SourceMapDevToolPlugin : 해당 플러그인을 설치하여 소스맵 생성을 더 세밀하게 제어할 수 있다. noSources 속성을 끄면 Sentry가 이벤트 스택 추적에 적절한 소스 코드 컨텍스트를 표시할 수 있다.

https://docs.sentry.io/platforms/javascript/guides/react/

📘 discord에 알림 설정하기

공식 문서에서 가이드를 친절하게 제공해주고 있다. 만드는 데에는 큰 어려움이 없었다. 근데 알림을 잘 사용하려면 일정 조건을 만족시키는 에러만 알림을 보내도록 해야 알림을 잘 볼 수 있을 것 같다.

settings > integrations > Discord 검색 후 설치
Alerts -> set conditions 클릭 -> Discord 채널 URL 설정 -> save

Discord 채널 URL은 이름 옆에 설정 들어가서 고급 > 개발자 모드를 on하면 채널을 우클릭했을 때 링크를 복사할 수 있다.

❌ network request blocked

Sentry init을 설정하고 로컬에 띄워보면 이와 같은 오류가 떴다. 근데 아무리 찾아봐도 이런 오류를 겪은 사람이 안보였다. 그런데 주변 크루들에게 물어보니 광고 차단 익스텐션 깔려있는 거 아니냐고 물어봐서 난 그런거 없는데? 했다가 확인해보니 있었다!!!

이게 왜 깔려있었을까...당장 설정을 없애보았더니 거짓말 같이 문제가 해결되었다...! 신기하게도 이 사실을 알고 다시 검색해보니 공식문서에서 안내해주고 있었다.

When you are using our CDN, ad-blocking or script-blocking extensions may prevent our SDK from being fetched and initialized properly. Because of this, any call to the SDKs API will fail and may cause your application to behave unexpectedly.