에러 모니터링, 로그 데이터

에러모니터링과 로그 데이터를 왜 해야할까?

프론트엔드 개발에서 에러 모니터링과 로그 데이터 수집은 사용자 경험 향상 및 애플리케이션 품질 유지에 필수적인 요소이다.

• 실시간으로 문제를 감지하여 사용자가 겪는 에러를 즉시 파악하고 대응할 수 있다.

• 버그나 성능 문제를 신속하게 해결하여 사용자 만족도를 높이고 경험을 개선한다.

• 성능 관련 로그를 분석하여 애플리케이션의 병목현상을 파악하고 개선할 수 있다.

• 로그 데이터를 통해 사용자의 행동 패턴을 분석하고 UX 개선을 할 수 있다.

이런 과정은 다양한 브라우저, 디바이스, 네트워크 환경에서 발생할 수 있는 복잡한 프론트엔드 에러를 효과적으로 관리하는데 도움을 준다. Sentry가 대표적인 라이브러리 도구인데 이를 활용하면 에러 발생 경로, 환경 정보, 화면 녹화 등 상세 데이터를 수집하여 효율적인 문제 해결이 가능해진다.

Sentry 소개 및 특징

Sentry는 실시간으로 에러를 추적하여 에러 발생 경로, 디바이스, 브라우저, OS 등의 상세한 정보를 제공한다. 에러 발생 상황을 화면 녹화 기능으로 재현할 수 있어 디버깅에 유용하고 중요도에 따라 에러를 분류하고 대응 할 수 있다.

• 실시간 에러 추적
• 상세한 에러 정보
• 화면 녹화 기능
• 에러 레벨 지정

Sentry 적용 방법

1. Sentry 계정 생성 및 프로젝트 설정

2. SDK 설치 : npm 또는 yarn 같은 패키지를 통해 Sentry SDK 설치하기

npm install @sentry/react
yarn add @Sentry/react @Sentry/tracing
    
npx @sentry/wizard@latest -i sourcemaps

3. 초기화 코드 작성하기 : 애플리케이션에 Sentry 초기화 코드 추가

   import React from 'react';
   import ReactDOM from 'react-dom';
   import * as Sentry from '@Sentry/react';
   import { BrowserTracing } from '@Sentry/tracing';
   import App from './App';
   
   Sentry.init({
     dsn: 'dsn key',
     release: 'release version',
     environment: 'production',
     normalizeDepth: 6,
     integrations: [
       new Sentry.Integrations.Breadcrumbs({ console: true }),
       new BrowserTracing(),
     ],
   });
   
   ReactDOM.render(<App />, document.getElementById('root'));

4. 에러 캡처 설정하기 : 자동 or 수동으로 에러를 캡처하도록 설정

5. 커스텀 이벤트 및 로그 추가하기

Sentry에서 자주 사용되는 주요 용어

1. dsn (Data Source Name): 이벤트를 전송하기 위한 식별 키
2. release: 애플리케이션의 특정 버전을 나타낸다. 보통 package.json에 명시한 버전을 사용한다.
3. environment: 애플리케이션이 실행되는 환경(예: development, production)을 지정
4. normalizeDepth: 컨텍스트 데이터를 주어진 깊이로 정규화 (기본값: 3)
5. integrations : 플랫폼 SDK별 통합 구성 설정 (React의 경우 react-router integration 설정 가능)
6. Context: 에러와 관련된 추가 정보를 제공. React 컴포넌트의 props나 state 정보를 포함시킬 수 있다.

관련 라이브러리

에러 모니터링

• Sentry: 실시간 에러 추적, 성능 모니터링, 사용자 행동 분석 제공3
• LogRocket: 세션 리플레이, 에러 추적, 성능 모니터링 기능 제공
• Rollbar: 실시간 에러 모니터링 및 디버깅 도구

로그 데이터

• Winston: Node.js 기반의 범용 로깅 라이브러리
• Pino: 고성능 Node.js 로깅 도구
• Bunyan: JSON 로깅을 위한 Node.js 라이브러리

에러 모니터링 , 로그 모니터링 시 주의 사항

• 과도한 로깅 방지: 성능 저하와 비용 증가를 막기 위해 필요한 데이터만 기록한다.

• 로깅 수준 조정: 개발 환경과 프로덕션 환경에 적절한 로깅 수준을 설정한다.

• 민감한 정보 보호: 개인정보, 암호, 액세스 토큰 등을 로그에 직접 기록하지 않는다.

• 로그 저장소 관리: 로그 파일의 생명주기와 저장소 용량을 계획하여 관리

• 성능 영향 고려: 로그 작성 빈도가 애플리케이션 성능에 미치는 영향을 고려한다.

• 효과적인 알림 시스템: 중요한 에러에 대해 신속하게 알림을 받을 수 있는 시스템을 구축

• 에러 우선순위 설정: 에러의 심각도에 따라 우선순위를 설정하고 대응

• 다양한 환경 고려: 여러 브라우저, 디바이스, 네트워크 조건에서의 성능을 테스트하고 모니터링한다.

---

📚 참고자료

• https://docs.sentry.io/
• https://tech.kakaopay.com/post/frontend-sentry-monitoring/