Sentry에서 전역 예외처리 하는 법 : ignoreErrors

요즘은..이라고 하기에는 몇 주 지났지만 ,, Sentry 관련 작업을 했다.
 
Sentry는 사실 부트캠프 하던 시절에 멘토님께서 말씀해주셔서 알게 되었는데, 사용해 본 적은 없어서 개념적으로만 알고 있었다.
 
기존 프로젝트에 세팅은 되어있어 에러 알람은 잘 오는 상태였다.
하지만, 일부 에러들은 알람이 울리지 않게 해주어야 했고, 일부 API 에러들에 한해서는 sentry가 울리게 설정해주어야 했다.
 
넥스트와 리액트 프로젝트 세팅 내부에서 전역에서 예외 처리도 하고, 각 컴포넌트 별 예외처리도 하면서 생각보다 다양한 속성을 지원한다는 점을 알게되어 포스팅을 하게됐당.
 

Application Performance Monitoring & Error Tracking Software

 

😎 Sentry 

: error 및 performance monitoring을 도와주는 툴
프론트엔드뿐만 아니라 백엔드까지 포함한 애플리케이션 전반의 에러 추적 및 성능 모니터링
-> 실시간 로그 취합 및 분석 도구이자 모니터링 플랫폼
 
실제 상용 서비스의 경우, 심각한 에러가 나서 서비스 진입이 막힌 경우에 정말 큰 손해를 볼 수 있다.
이 상황에 대해 좀 더 빠르게 파악할 수 있는 툴이다.
 

💡 Sentry의 주요 기능

- 실시간 오류 감지 → 사용자에게 발생한 오류를 즉시 탐지하고 알림 전송
- 에러 스택트레이스 제공 → 어떤 코드에서 문제가 발생했는지 상세 분석 가능
- 사용자 영향도 분석 → 특정 에러가 몇 명의 사용자에게 영향을 미쳤는지 확인
- 퍼포먼스 모니터링 → 트랜잭션 추적을 통해 응답 속도, 지연 시간 분석
 
 

📌 실무에서 활용하는 방법

- 배포 이후 발생한 예기치 않은 버그 즉시 탐지
- Slack, 이메일 등으로 실시간 알림 받아서 빠르게 대응
- 에러가 발생한 브라우저/디바이스 정보까지 확인하여 원인 분석
- React, Vue, Next.js 같은 프레임워크와 쉽게 연동 가능
 
 

📒 특정 에러 처리하는 방법

1) 전역에서 특정 에러 (ex. 401) 에 대해 무시되도록 설정

   if (response.status === 401) {
      throw new Error("401 Unauthorized");  // 문구는 원하는 대로 ..
    }

 
나의 경우는 401에 대해서 울리지 않게 설정해주고 싶었기 때문에 401의 경우 이 문구를 던져주었다.
 
 

Sentry.init({
 ...
    ignoreErrors: [
      "401 Unauthorized",    // 설정한 문구 입력
      /401/,
      /Unauthorized/,
    ], 
  ...
    ],
  });

 
제목 그대로 ignoreErrors 라는 속성을 사용하면, 특정 에러에 대해서는 울리지 않게 전역에서 설정 가능하다.
 
위에서 설정해준 401 Unauthorized라는 문구 무시하도록 이렇게 넣어주면 끝이다 ..
나는 혹시 모를 경우를 대비해서 비슷한 문구들도 같이 처리해주었다.
 
 
 
2) 일부 API 에서만 특정 에러 무시 되도록 설정

   const axiosError = error as any;
      const statusCode = axiosError?.response?.status || axiosError?.status;

      if (statusCode !== 401) {
        Sentry.captureMessage(
        .....

 
이렇게 해서 울리지 않게 조건을 추가해주었다.
그리고 해당 에러는 리액트 쿼리 사용해서 잡음!
 
 
 
* 공부할 때 참고한 블로그
https://tech.kakaopay.com/post/frontend-sentry-monitoring/

Sentry로 우아하게 프론트엔드 에러 추적하기 | 카카오페이 기술 블로그