TIL - Sentry란 (feat. Source Map 도입기)

신혜린·2024년 8월 5일

목록 보기

23/27

참고자료 |
Sentry로 우아하게 프론트엔드 에러 추적하기 - kakaopay tech
Sentry 에러 로깅 가이드(with Sourcemaps)

사내에서 사용하는 Sentry 란 어떤 기능을 하는 툴인지 알아보기 위해 정리한 문서

vite

doppler

💎 Sentry

Sentry는 실시간 로그 취합 및 분석 도구이자 모니터링 플랫폼이다.
즉, 에러 트래킹을 위한 Saas 서비스를 뜻하며, 에러가 발생하면 발생 시점의 스냅샷을 기반으로 에러 추적에 필요한 다양한 데이터를 제공하고 있다.

프론트엔드 개발을 하다보면, QA에서 확인되지 않는 오류들을 종종 마주하게 된다. 크롬의 쿠키 정책 변경, 디바이스 별 차이, 버전 차이 등 개인이 통제할 수 없는 외부의 영향을 받게 되기 때문이다. 이러한 경우들을 대비하여 신속한 장애 파악과 해소를 돕기 위해 Sentry와 같은 분석 도구를 도입하게 되는 것이다.

이벤트 로그에 대한 다양한 정보 제공

Sentry는 발생한 이벤트 로그에 대해 다양한 정보를 제공한다.

Exception & Message: 이벤트 로그 메시지 및 코드 라인 정보
- source maps 설정을 해야 정확한 코드라인을 파악할 수 있음.
(주의: 배포 시 source maps 설정을 해제해야 외부로부터 정보가 유출되는 것을 방지할 수 있다)

Device: 이벤트 발생 장비 정보 (name, family, model, memory 등)

Browser: 이벤트 발생 브라우저 정보 (name, version 등)

OS: 이벤트 발생 OS 정보 (name, version, build, kernelVersion 등)

Breadcrumbs: 이벤트 발생 과정

(참고: https://tech.kakaopay.com/post/frontend-sentry-monitoring/)

SOURCE MAPS

번들러를 활용한 프로젝트들의 경우, 배포 환경 내에서 실제로 어디서 오류가 났는지 파악하기 어렵다는 문제가 있다. 이를 해결하기 위해 source maps 기능이 존재한다.

source map은 원본 코드와 변환된 코드 사이의 매핑 정보가 정의된 파일이다. 즉, 개발자가 변환된 코드를 디버깅할 때 원본 소스의 몇 번째 라인, 몇 번째 글자의 코드를 참조해야 하는지를 알 수 있도록 제공한다.

🔐 주의해야 할 점

배포 환경에서도 source map을 제공하게 된다면, Sentry 외 서비스에 접속한 모든 유저도 source map을 통해 볼 수 있으며, 이는 원본 코드의 유출로 직결되어 보안에 문제가 생길 수도 있다.

이를 방지하기 위해 Sentry에만 source map을 제공하고, 배포환경에서는 source map이 노출되지 않게 하는 설정을 추가해줘야 한다.

Sentry에는 source map을 제공한다.
배포 환경에는 source map이 노출되지 않도록 설정한다.

💎 Sentry source map 추가 방법

1. Sentry 토큰 발급

프로젝트 > Settings > Developer settings > Auth Tokens

2. 발급 받은 토큰 환경변수 처리

해당 프로젝트는 Doppler를 이용하여 관리하고 있었기 때문에 Doppler에 환경변수로 키-밸류 값을 추가해주었다.

SENTRY_AUTH_TOKEN

3. vite.config.js 코드 추가

export default defineConfig({
  plugins: [
    sentryVitePlugin({
      org: '[organization name]',
      project: '[project name]',
      sourcemaps: {
        // sentry에 source map 제공 후 배포환경에서는 노출되지 않도록 처리하는 코드
        filesToDeleteAfterUpload: ['dist/assets/**/*.js.map'], 
      },
      debug: true,
    }),
  ],
  build: {
    sourcemap: true,
  },
  // ...
})