[Sentry + Next.js] 내 프로젝트 에러 자동사냥하기

이번에 만든 썸네일 생성기도 계속 개선하면서 사용자를 모아보고 싶어서 센트리를 붙이기로 했다.

 

팀프로젝트를 진행할 때 UT 배포 전 센트리를 세팅해두고싶어서 급하게 설정을 했었는데 이번에 좀 더 여유가 있어서 글로 정리해보려한다.

 

Sentry 공식문서

Next.js | Sentry for Next.js

 

설치

npx @sentry/wizard@latest -i nextjs

 

 

프로젝트 설정

터미널에서 센트리 계정을 확인하고, Organization을 선택하면 어떤 프로젝트에대한 세팅이 필요한지 선택해야한다.

 

Sentry 프로젝트를 생성하고나면 다시 터미널에어 이어서 설정을 해줘야한다.

번들 사이즈가 커지는 것에대한 고민을 했지만, 이전 프로젝트를 진행하며 사용자가 어떤 행동을 했을 때 에러가 생겼는지 직접 행동을 확인하면 에러 발생을 더 잘 파악할 수 있는 힌트가 됐고 이 프로젝트 자체가 에셋이 많거나 큰 프로젝트가 아니어서 번들 사이즈 증가는 크게 걱정하지 않아도 될 것 같다고 생각이 들어서 이번에도 replay 옵션을 선택했다.

 

이 과정에서 배포 환경에서 사용할 경우 적용할 수 있는 환경변수를 제공해준다.

나는 Vercel을 통해 배포해둔 상태이기 때문에 Vercel setting에서 환경변수를 추가해줬다.

 

세팅이 잘 됐는지 확인할 수 있는 에러 페이지를 추가할 수 있는데, sentry-example-page 경로로 들어오면 있는 Throw error 버튼을 눌러준다.

 

그럼 이렇게 Sentry 프로젝트에서 발생한 에러를 확인할 수 있다.

세팅 확인 완료~~

 

테스트용 경로는 없애주자

 

Issues 탭에서 vercel-production을 선택하면 vercel 배포 환경에서 발생한 에러만 확인할 수도 있다.

 

 

 

내 썸네일 생성기로 만든 썸네일..ㅎㅎㅎㅎ