Sentry로 에러 모니터링하기(React/Vite)

date

Apr 4, 2024

slug

sentry

author

status

Public

tags

Sentry

summary

type

Post

thumbnail

category

updatedAt

Jun 9, 2024 12:49 PM

Sentry란?

Sentry 적용을 통해 얻을 수 있는 효과

• 에러 원인을 파악하고 정확하게 안내할 수 있게됩니다.

• 특정 오류 재현에 오랜 시간을 들이지 않아도 에러 추적이 가능합니다.

프론트엔드 환경에서 발생할 수 있는 에러는 어떤 것들이 있을까?

• 데이터 영역에서의 에러

• 화면 영역에서의 에러

• 외부요인에 의한 에러

• 런타임 에러

시작하기

Sentry 계정 가입 후 프로젝트 생성

npx @sentry/wizard@latest -i sourcemaps

yarn add @sentry/react

npm install @sentry/vite-plugin --save-dev

설정

import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import './i18n/i18n.ts';
import * as Sentry from '@sentry/react';

Sentry.init({
	dsn: import.meta.env.VITE_SENTRY_DSN,
	integrations: [
		Sentry.browserTracingIntegration({}),
		Sentry.replayIntegration({
			maskAllText: false,
			blockAllMedia: false,
		}),
	],
	tracesSampleRate: 1.0,
		tracePropagationTargets: ['https://www.tour-bus.zzimcar.com'],
	replaysSessionSampleRate: 0.1,
	replaysOnErrorSampleRate: 1.0,
});

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

이미지 참고

 

options에는 어떤 것들이 있을까?

• dsn(data source name) 이벤트를 전송하기 위한 식별 키

• release 애플리케이션 버전 (보통 package.json에 명시한 버전을 사용합니다. 이는 버전별 오류 추적을 용이하게 합니다.)

• environment 애플리케이션 환경 (dev, production 등)

• normalizeDepth 컨텍스트 데이터를 주어진 깊이로 정규화 (기본값: 3)

• integrations 플랫폼 SDK별 통합 구성 설정 (React의 경우 react-router integration 설정 가능)

• maxBreadcrumbs
최대 breadcrumb의 양을 제어 (최근 n개의 데이터만 유지하고 삭제한다)

• tracesSampleRate
Sentry에 보내는 트랜잭션의 샘플 비율 (0.0 ~ 1.0)
너무 많은 이벤트를 기록하지 않도록 부하를 조절

• tracePropagationTargets 설정된 URL 패턴에 대해서만 추적 정보를 전파

• replaysSessionSampleRate
Sentry SDK에서 세션 리플레이 기능의 샘플링 비율을 제어

• replaysOnErrorSampleRate
오류가 발생한 세션 중 어느 정도의 비율로 리플레이 데이터를 수집할지 결정
 

배포 관련 sourcemap 설정하기

//vite.config.ts
export default defineConfig({
plugins:[
		sentryVitePlugin({
			org: 'personal-org',
			project: 'project name',
			sourcemaps: {
				filesToDeleteAfterUpload: './dist/**/*.map',
			},
		authToken:
				'secret'
		}),
})

각 sourcemap이 버전별로 업로드 되고 있는지 확인하려면

1. 왼쪽 사이드바의 Releases 클릭

1. Release항목 중 최근 버전의 Source Maps 확인

슬랙에 Sentry관련 Alert 추가하기

Sentry설치 후 vite에서 Some chunks are larger than 500 kBs after minification 경고 메세지가 출력된다면 → 번들링 최적화가 필요한 시점!

번들링 최적화하기

1. vite에서 splitVendorChunkPlugin을 import합니다. (vite 공식 문서를 참고했습니다.)
manualChunks을 사용하려면 splitVendorChunkPlugin을 import 해줘야합니다.

import { defineConfig, type PluginOption, splitVendorChunkPlugin } from 'vite';

1. rollupOptions의 output필드에 manualChunks 함수를 사용해 chunk크기가 큰 @sentry 를 기존 node_modules를 하나의 vendor.js chunk로 만드는 과정에서 분리해 보겠습니다. 이 방법을 적용하면 sentry는 별도의 한 chunk 파일로 생성됩니다. 위 옵션 적용 시, manualChunks는 객체 형태가 아닌 함수 형태로 작성해야 합니다!

• rollupOptions는 Rollup 플러그인 옵션을 구성할 수 있게 해주는 Vite 옵션입니다.
• 내부의 output 옵션은 Rollup 출력 옵션을 구성합니다.

• manualChunks 함수는 코드 분할(code splitting)을 수동으로 제어할 수 있게 해줍니다.
• 이 함수는 모듈 ID를 받아 청크(chunk) 이름을 반환합니다.

manualChunks에서 파라미터로 받는 id값을 콘솔로 찍으면 무엇이 나오나?

• 870KB → 390KB