Sentry로 에러 모니터링하기(React/Vite)
#Sentry
Sentry란?
실시간 로그 취합 분석 도구 / 모니터링 플랫폼
로그에 대한 정보 제공 및 시각화 도구를 통해 발생한 이벤트들을 쉽게 분석할 수 있게 도와줍니다.
Sentry 적용을 통해 얻을 수 있는 효과
프론트엔드 환경에서 발생할 수 있는 에러는 어떤 것들이 있을까?
시작하기
Sentry 계정 가입 후 프로젝트 생성
*Sentry를 이용한 에러 추적 프로세스
에러 데이터 쌓기 → severity 기준 설정 및 모니터링 → 에러 데이터 분석 → 분석 결과에 따른 개선
*Sentry SDK 7.47.0 이상부터 아래 설정을 적용할 수 있습니다.
아래 방법을 적용하면 Sentry에 sourcemap 업로드 & sourcemap 버전 관리를 자동화 할 수 있습니다.
⚠️ @sentry/tracing 모듈은 설치하지 않아도 됩니다. sentry sdk의 7.47.0 부터 해당 모듈은 deprecated 되었습니다.
javascript
npx @sentry/wizard@latest -i sourcemapssentry cli가 활성화 됩니다.
Sentry SDK가 없어보이는데, 설치할지를 친절하게 물어봐줍니다.
Sentry SaaS를 선택해주세요.
기존에 Sentry계정이 있다면, 계정 연동 후 cmd에 project를 선택하도록 나옵니다.
설치가 완료되면, .env.sentry-build-plugin 이라는 파일이 하나 생성됩니다.
이 파일에 auth_token 값을 가져다 .env 와 빌드 환경변수에 넣어주세요.
env의 key값은 SENTRY_AUTH_TOKEN 로 적용해주세요.
cli로 진행 중 (sentry/react or sentry/vite-plugin)모듈 설치에 실패한 경우 직접 설치해주세요. ▾
*sentry/react 모듈 설치
javascript
yarn add @sentry/react*sentry/vite-plugin 설치
javascript
npm install @sentry/vite-plugin --save-dev설정
ReactDOM이 createRoot를 사용해 DOM에 react를 붙이는 root파일에 Sentry.init 메서드를 추가합니다.
javascript
1import ReactDOM from 'react-dom/client';
2import App from './App.tsx';
3import './index.css';
4import './i18n/i18n.ts';
5import * as Sentry from '@sentry/react';
6
7Sentry.init({
8 dsn: import.meta.env.VITE_SENTRY_DSN,
9 integrations: [
10 Sentry.browserTracingIntegration({}),
11 Sentry.replayIntegration({
12 maskAllText: false,
13 blockAllMedia: false,
14 }),
15 ],
16 tracesSampleRate: 1.0,
17 tracePropagationTargets: ['https://www.tour-bus.zzimcar.com'],
18 replaysSessionSampleRate: 0.1,
19 replaysOnErrorSampleRate: 1.0,
20});
21
22ReactDOM.createRoot(document.getElementById('root')!).render(<App />);*DSN은 Settings > project > Client Keys에서 확인 가능합니다.
이미지 참고▾
options에는 어떤 것들이 있을까?
배포 관련 sourcemap 설정하기
Sentry에 sourcemap을 업로드 하지 않으면, 오류 로깅 시 난독화된 소스코드가 나와 디버깅이 어렵습니다.
하지만 sourcemap을 번들에 포함하게 되면 외부에 코드가 그대로 유출되지요.
따라서, sourcemap을 Sentry에 업로드한 다음 삭제하는 작업이 필요합니다.
@sentry/vite-plugin 을 사용하면 위 작업을 할 수 있습니다.
sourcemaps 프로퍼티의 filesToDeleteAfterUpload 설정해 dist파일의 .map 파일 삭제하기
javascript
1//vite.config.ts
2export default defineConfig({
3plugins:[
4 sentryVitePlugin({
5 org: 'personal-org',
6 project: 'project name',
7 sourcemaps: {
8 filesToDeleteAfterUpload: './dist/**/*.map',
9 },
10 authToken:
11 'secret'
12 }),
13})각 sourcemap이 버전별로 업로드 되고 있는지 확인하려면
해당 파일 목록을 보면 소스맵(.map 파일)과 번들링된 js파일이 함께 업로드 되는 것을 볼 수 있습니다.
Sentry는 js와 소스맵을 비교해 오류가 발생한 경우 소스맵에서 어떤 요소에 오류가 발생했는지 보고해줍니다.
슬랙에 Sentry관련 Alert 추가하기
⇒ 프로젝트 선택 및 Slack 워크스페이스 / 채널 선택 / 태그 설정이 필요합니다.
Sentry설치 후 vite에서 Some chunks are larger than 500 kBs after minification 경고 메세지가 출력된다면 → 번들링 최적화가 필요한 시점!
※ manification(= 축소, 최소화)
: 웹 사이트에서 로드 시간과 대역폭 사용량을 줄이는 데 사용되는 주요 방법 중 하나로 웹 페이지 및 스크립트 파일에서 코드 및 마크업을 최소화하는 프로세스.
*vite는 dev- esm / prod - Rollup을 builder로 사용합니다.
번들링 최적화하기
javascript
import { defineConfig, type PluginOption, splitVendorChunkPlugin } from 'vite';@sentry 를 기존 node_modules를 하나의 vendor.js chunk로 만드는 과정에서 분리해 보겠습니다.
이 방법을 적용하면 sentry는 별도의 한 chunk 파일로 생성됩니다.
위 옵션 적용 시, manualChunks는 객체 형태가 아닌 함수 형태로 작성해야 합니다!rollupOptions는 Rollup 플러그인 옵션을 구성할 수 있게 해주는 Vite 옵션입니다. manualChunks 함수는 코드 분할(code splitting)을 수동으로 제어할 수 있게 해줍니다. 예를 들어, node_modules/react/index.js의 경우 청크 이름은 react가 됩니다.
함수는 모듈 ID가 @sentry 를 포함하는 경우에만 작동합니다. 이렇게 하면 @sentry 를 포함한 파일들이 별도의 청크로 분리되어 vendor.js 청크 크기를 줄여 초기 로드 시간을 개선할 수 있습니다.
manualChunks에서 파라미터로 받는 id값을 콘솔로 찍으면 무엇이 나오나?▾
vendor.js 청크 크기 변화
*기존 vite build시 기존에 적용되는 chunk 전략은? node_modules에 있는 외부 라이브러리는 별도의 vendor chunk로 묶는다. 위 옵션을 통해 일부 라이브러리만 빼서 다른 청크로 생성할 수 있다. (수동으로 코드 스플리팅이 가능해짐)