1. 기존 문제점

사용자들이 무언가 에러가 발생했을 때, ‘빨간 에러가 떠요’라고만 이야기해줄 뿐, 어떤 에러인 지는 명확히 알려주지 않는 경우가 많았다. 에러 메시지가 화면에 떠서, 그 메시지를 보내주면 매우 고맙겠지만, 만약 그렇다 하더라도, 동일한 휴대폰과 환경에서 다시 재연하기란 불가능에 가까웠다. 그래서, 에러를 추적하는 방법을 생각해보았다.

2. 에러를 추적하는 방법

1. Next.js 서버 에러

• Next.js 서버를 띄운 환경에서 확인이 가능하다.

• vercel로 배포했을 경우, Logs탭에서 확인할 수 있다.

  

2. Next.js 클라이언트 에러

1. 오류가 발생한 클라이언트 장비에 원격 접속해 직접 웹 브라우저를 확인한다
2. 서비스 이용 중인 고객에게 직접 ‘웹 브라우저의 개발다 도구를 열고 > 콘솔에 찍힌 오류내용을 캡쳐해주세요’ 요구한다

너무 번거로운 일이다. 그리고, 이러한 에러 대응은 즉각적인 대응이 어렵다. 이러한 클라이언트에서 발생한 에러 트래킹을 도와주는 서비스가 바로 Sentry이다.

3. Sentry

: 실시간 로그 취합 및 분석 도구이자 모니터링 플랫폼

1. 로그에 대해 다양한 정보를 제공하고 이벤트별, 타임라인으로 얼마나 많은 이벤트가 발생하는지 알 수 있고 설정에 따라 알림을 받을 수 있다
2. 로그를 수집하는데서 그치지 않고 발생한 로그들을 시각화 도구로 쉽게 분석할 수 있도록 도와주며 다양한 플랫폼을 지원한다

1. 특징

1. 이벤트 로그에 대한 다양한 정보를 제공한다.
   1. Exception & Message : 이벤트 로그 메시지 및 코드 라인 정보
   2. Device : 이벤트 발생 장비 정보
      • e.g. name, family, model, memory
   3. Browser : 이벤트 발생 브라우저 정보
      • e.g. name, version
   4. OS : 이벤트 발생 OS 쩡보
   5. Breadcrumbs : 이벤트 발생 과정