프론트엔드 에러는 왜 추적해야 할까? (Sentry)

프론트엔드 에러 추적

 

프론트엔드에서 에러를 추적하는 것은 사용자 경험을 보장하고, 프로덕트의 안정성을 높일 수 있다. QA 단계에서 다양한 시나리오로 테스트를 한다고 해도, 모든 예외 상황을 100% 커버할 수 없다. 사용자가 서비스를 이용하며 에러를 겪게 되면 서비스 동작에 불편함을 느끼고 신뢰도가 떨어져 결국 사용자 이탈로 이어질 수 있다. 따라서 실시간으로 에러를 모니터링하고 빠르게 대응할 수 있는 시스템을 갖추는 것이 중요하다.

 

에러 추적 도구 중 하나인 Sentry는 에러가 발생한 경로와 에러 발생 시점의 디바이스, 브라우저, 유저가 사용하는 OS 등의 정보까지 함께 제공한다. 심지어 사용자의 화면까지 녹화하여 상황을 그대로 재현할 수 있도록 도와준다. 이를 통해 문제의 원인을 파악하는 데까지 시간을 단축시키고 보다 효율적으로 디버깅을 할 수 있게 한다. 에러의 레벨을 지정할 수도 있는데, 슬랙 알림 등의 기능을 통해 레벨에 따라 개발자에게 알림을 제공하기도 한다.

 

https://sentry.io/welcome/

Application Performance Monitoring & Error Tracking Software

 

 

Sentry 적용 방법

 

Sentry 설치 및 초기 설정 참고 공식 문서

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

React | Sentry for React

 

1. 패키지 설치

$ npm install @sentry/react
$ npx @sentry/wizard@latest -i sourcemaps

 

Need to install the following packages:
@sentry/wizard@3.26.0
Ok to proceed? (y)

 

Sentry를 설치하기 위해 @sentry/wizard@3.26.0 패키지를 함께 설치해야 하므로, y 입력

 

 

2. 서비스 진입점에서 Sentry 초기화

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

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
  tracesSampleRate: 1.0,
  tracePropagationTargets: ['example.com'],
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

 

dsn

• DK에게 이벤트를 어디로 보낼지 알려주는 식별자
• Sentry 프로젝트에 오류와 성능 데이터를 전송하는 데 사용되는 고유한 URL
• 보안을 위해 별도의 env파일로 관리하기

integrations

• 통합 기능 설정

Sentry.browserTracingIntegration()

• 성능 모니터링 위함
• 성능 데이터 수집, 분석

Sentry.replayIntegration()

• 사용자 세션 재생 통합
• 사용자의 세션을 녹화, 재생할 수 있게 함 ⇒ 오류 발생 시점의 사용자 동작을 파악할 수 있도록 함

tracesSampleRate

• 성능 트레이싱 샘플링 비율 (0.0 ~ 1.0)
• 1.0은 모든 성능 데이터를 수집한다는 의미

tracePropagationTargets

• 대상 URL 지정
• 특정 도메인 또는 패턴과 일치하는 요청에 대해 트레이스 헤더를 추가하여, 분산 트레이싱을 통해 요청의 흐름을 추적
• 'example.com'은 특정 서버의 API 요청에 트레이스 헤더를 추가
  • api를 요청받는 서버 주소

replaysSessionSampleRate

• 세션 재생 샘플링 비율을 설정 (0.0 ~ 1.0)
• 사용자 세션을 녹화하는 샘플링 비율을 지정
• 0.1은 10%의 세션을 녹화한다는 의미

replaysOnErrorSampleRate

• 오류 발생 시 세션 재생 샘플링 비율 (0.0 ~ 1.0)
• 오류가 발생한 세션을 녹화하는 샘플링 비율 지정
• 1.0은 오류 발생 시 모든 세션을 녹화한다는 의미

Sentry.withScope

• 특정 범위(scope) 내에서 오류를 캡처하고 처리할 수 있는 기능을 제공
• 태그, 사용자, 컨텍스트 등을 설정하여 특정 오류에만 적용되도록 함

 

 

3. 에러를 던질 때 Sentry에서 scope를 나누기

  Sentry.withScope((scope: Sentry.Scope) => {
    scope.setLevel('error');
    scope.setTag('url', window.location.href);
    Sentry.captureException(err);
  });

 

- 우리 팀의 경우 아직 에러 레벨을 나누지 않아 전부 error 레벨로 처리해 놓았다.

- Tag의 경우 에러 항목별 태그를 달 수 있는데, 현재는 에러가 발생한 경로를 태그로 설정해 놓았다.

- captureException을 통해 Sentry에 에러 객체를 전달할 수 있다.

 

 

4. 에러 확인

 

events 개수가 800이 넘는 이유는 ,, 테스트 하느라 많아져버린 것,,, 🤪

 

발생한 에러들은 Issues 탭에서 볼 수 있다. 

에러가 발생한 경로에 따라, 그리고 에러의 유형에 따라 확인할 수 있다.

Sentry는 유사한 에러들을 묶어 관리해 주기 때문에 자세한 이력들은 각 에러페이지의 All Events 탭에서 확인 가능하다.

 

 

 

 

에러 발생 후 대응 전략

 

3차 데모데이에서 받았던 질문인데, 에러가 발생하여 인지한 뒤 이를 해결하는 방법이나 전략이 있는지에 대한 질문을 받았다. 사실 팀 내부에서 아직 정해진 바는 없다. 그렇지만 Sentry의 목적을 고려했을 때 다음과 같은 전략을 세워볼 수 있을 것 같다.

 

1. 실시간 알림

Sentry의 알림 기능을 활용하여 특정 조건에 따라 알림을 받도록 설정한다. 예를 들어, 특정 에러가 반복된다거나, 레벨이 높은 단계의 에러가 발생한다면 즉각적으로 슬랙 등의 채널로 알림을 받을 수 있도록 한다.

 

이때, 고민해 보면 좋을 부분은 '어떤 에러를 수집할지' 여부다. Sentry는 할당량이 정해져 있어 수집된 에러가 일정량을 초과하면 (유료 버전의 경우) 요금이 과금될 수 있다. 따라서 모든 에러를 무조건적으로 수집하는 것이 아니라, 유의미하고 중요한 에러를 선별하여 수집할 필요가 있다. 특히 사용자 경험에 직접적인 영향을 미치거나, 서비스의 정상적인 동작을 방해할 수 있는 에러에 우선순위를 두어야 한다.

 

또한, 어떤 에러를 선별하여 알림을 보낼 지도 결정해야 한다. 모든 에러에 대한 알림을 받게 된다면, 중요하고 심각한 에러를 놓칠 수 있게 된다. 깃허브의 경우 모든 활동에 대해 이메일 알림을 받았었는데, 이렇게 되니 나의 활동에 코멘트가 달릴 때마다 수십 개의 읽지 않은 메일이 쌓여 더 이상 읽지 않게 되었다. 쌓여가는 메일함... 따라서 에러 레벨에 따라 나누거나, 사용자가 불편을 느낄 수 있는 에러를 우선으로 개발자가 꼭 알아야 할 이슈만 알림을 주는 것이 중요하다.

 

 

2. 에러 원인 분석 및 문제 해결

 

Sentry를 통해 얻은 사용자 환경 정보, 스택 트레이스, 로그 등의 데이터로 에러의 원인을 분석한다. 비동기 작업이나 특정 사용자 흐름에서 발생한 예상치 못한 에러를 분석하여, 로컬 환경에서 동일한 상황을 재현해 본다. 해당 상황을 재현하는 테스트 케이스를 넣어 개발 중 같은 오류를 미리 예방하는 방법도 있을 것 같다.

 

 

3. 지속적인 관리와 모니터링

 

에러가 발생하고 이를 해결했다고 해서 대응이 끝난 것은 아니다. 지속적인 모니터링과 관리가 이루어져야만 같은 문제를 다시 겪지 않을 수 있다. 해결된 에러가 다시 발생하지 않는지 추적하고, 새로운 버그가 생기지 않도록 예방하는 것이 중요하다. 기능이 추가되거나 코드가 수정될 때마다 Sentry를 통해 발생할 수 있는 에러를 미리 파악하고, 사용자에게 영향을 미칠 수 있는 요소들을 관리하는 것이 필요하다. 이를 통해 서비스의 안정성을 높이고, 사용자 경험을 지속적으로 향상시킬 수 있을 것이다.

 

 

 

 

 

참고 자료

https://docs.sentry.io/

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

https://if.kakao.com/2022/session/84

https://www.hojunin.com/contents/sentry

https://blog.naver.com/dlaxodud2388/223303680940

https://teawon.github.io/react/Sentry/

https://hyermione.tistory.com/25