React 프로젝트 배포 후 에러 추적 하는 방법 (feat. sentry)

프론트 프로젝트를 배포하고 나면 사용자가 어떻게 사용하는 궁금한 경우나

에러가 발생하였는데 원인을 파악하기 힘든 경우가 프로그램 운영을 하다보면 많이 발생 한다.

 

그런 경우 프론트엔드 개발자는 sectry라는 모니터링 툴을 사용하면 된다.

 

여기서는 react 프로젝트에 sentry를 연결하는 방법을 리뷰해보겠다.

 

우선 sentry에 로그인해주어야 한다.

사이트: https://sentry.io/for/frontend/

Frontend Monitoring with Full Code Visibility

 

회원 가입 방법은 별도로 설명하지 않겠다.

 

나는 github 계정을 연동하여 진행 하였다.

 

로그인에 성공하였다면,

 

프로젝트를 만들어준다.

 

아래 접속하여 project를 생성!!

 

https://oet-vh.sentry.io/projects/new/

Sign In | Sentry

 

여러가지 항목중에 react를 선택!

그리고 프로젝트 명을 입력하고 생성해준다.

 

 

 

생성에 성공하면 sentry 연결할 수 있는 명령어와 js 코드를 보여줄 것이다.

그것을 기억해둔다.

 

우선 npm install --save @sentry/react 명령어를 프로젝트를 열고 터미널을 열어서 npm install --save @sentry/react 를 입력해서 sentry를 설치 해준다.

 

그 후  sentry 환경 설정을 위해 main.jsx에 진입하여 sentry를 import하고 페이지에 있는 init을 복붙해서 넣어준다.

 

여기서 tracePropagationTargets 속성에 url을 본인 sentry 사이트명을 넣어주면 된다.

 

그 후 프로젝트 탭을 들어가 보면 생성한 프로젝트가 보인다.

 

여기서 performance 탭을 선택하면 사용자가 진입된 경로가 보여진다.

 

만약 콘솔로그를 넣어두었다면 그것도 확인 가능하다 아래 화면을 참고해주면 된다.