[Next.js] Sentry로 효율적인 에러 모니터링하는 법(자동화 에러 추적 도구)

 

최근 프론트엔드 개발을 진행하면서 Sentry라는 에러 모니터링 도구를 알게되었습니다.

 

제가 맨 처음 프론트엔드 개발을 했을 때는 에러가 발생하는 경우 그냥 브라우저의 console.error()를 통해 에러 로그를 찍었었는데 이는 사용자 입장에서는 보이지도 않을 뿐더러 개발자 도구를 열어서 본다고 하더라도 의미없는 에러 로그만 보이게 됩니다.

 

개발자 입장에서도 어떤 에러가 발생했는지 사용자 브라우저에 들어가보지 않는 이상 모르기 때문에 디버깅을 하기 또한 어렵습니다.

 

그래서 최근에는 사용자 입장에서 유의미한 에러 문구를 보여주기 위해 콘솔을 찍지 않고 toast UI에 에러 메세지를 담아 보여주는 방식으로 사용하고 있습니다. 하지만 그렇다고 해도 그러한 에러를 수집하지 않는 이상 개발을 하는 제 입장에서는 그러한 오류들에 대해 인지할 수가 없는 상황을 마주할 수밖에 없습니다.

 

하지만 Sentry를 사용하면 에러가 발생하는 경우 모니터링할 수 있는 도구를 제공하기 때문에 더욱 신속하고 명확하게 대처할 수 있어 추후 프로젝트에 도입하기 위해 공부한 내용을 바탕으로 글을 적어보았습니다.

 

1. 들어가며

시작하기 전에 먼저 Sentry가 무엇인지 이해하는 단계를 먼저 가져보도록 할 것입니다. Sentry는 애플리케이션 스택 전체에서 성능 문제 충돌 및 예외를 모니터링하도록 도와주는 애플리케이션 모니터링 플랫폼입니다. 

 

또한 Sentry는 다양한 프로그래밍 언어로도 애플리케이션에 대한 실시간 에러 추적 및 모니터링 도구를 제공해 줍니다.

 

굉장히 역동적인 웹 개발 환경에서는 애플리케이션의 안정성과 신뢰성을 보장하는 것이 상당히 중요하다고 할 수 있는데요. 이러한 안정성과 신뢰성을 보장하기 위해서 해야하는 것이 바로 에러 모니터링(error monitoring)입니다. 최근 여러 프로젝트에서 사용 중인 에러 추적 및 모니터링 도구인 Sentry는 웹 애플리케이션 구축을 위한 강력한 React 프레임워크 중 하나인 Next.js와 굉장히 잘 통합됩니다.

 

이 조합으로 사용 중인 서비스가 실제로 많다고 하고 Next.js 프로젝트에서 발생할 수 있는 문제를 식별하거나 진단하여 해결하는 능력을 크게 향상시킬 수 있습니다.

 

2. 그래서 정확히 Sentry가 해주는 것이 무엇인가?

Sentry는 개발자에게 실시간 오류 추적 및 모니터링을 제공하여 특히 배포 환경에서 발생하는 문제에 대한 인지를 할 수 있도록 도와줍니다. 여러 프로그래밍 언어와 프레임워크를 지원하기에 다양한 기술 스택을 사용하는 팀이더라도 Sentry를 다양한 용도로 사용할 수 있는 것이죠. 

 

Sentry와 Next.js를 같이 사용하여 다음과 같은 기능을 사용할 수 있습니다.

• 실시간 오류 알림: Sentry는 배포 환경에서 Next.js 애플리케이션 내에서 발생하는 오류를 실시간으로 모니터링합니다. Sentry는 오류가 발생하면 즉시 관련 정보를 캡쳐하여 사용자에게 경고 알림를 보냅니다. 이를 통해 문제를 널리 퍼뜨려 상당수의 사용자에게 영향을 미치기 전에 선제적으로 문제를 해결할 수 있게 됩니다.
• 효과적인 문제 진단: Sentry는 오류를 유발한 함수 호출 순서에 대한 스냅샷을 제공하는 스택 추적을 포함하여 상세한 오류 보고서를 캡처합니다. 또한 Sentry는 사용자의 브라우저, 운영 체제 및 오류를 유발한 특정 작업과 같은 컨텍스트 정보를 캡처합니다. 이러한 풍부한 정보는 디버깅 프로세스를 크게 가속화하여 개발자가 문제의 근본 원인을 빠르게 이해하고 진단할 수 있도록 지원합니다.
• 성능 모니터링: 중요한 문제를 식별하고 우선순위를 정하세요: Sentry는 심각도, 빈도 및 영향에 따라 오류를 분류합니다. 이를 통해 많은 사용자에게 영향을 미치거나 심각한 장애를 일으킬 수 있는 중요한 문제의 우선순위를 정할 수 있습니다. 가장 영향력이 큰 문제에 먼저 집중함으로써 리소스를 효율적으로 할당하고 사용자 경험에 가장 큰 영향을 미치는 문제를 해결할 수 있습니다.
• 릴리즈 모니터링: Sentry를 사용하면 오류를 Next.js 애플리케이션의 특정 릴리스와 연결할 수 있습니다. 이는 코드 변경의 영향을 추적하고 특정 오류가 최근 배포와 관련이 있는지 여부를 식별하는 데 유용합니다. 이슈가 발생한 시점을 파악하는 프로세스를 간소화하고 디버깅 프로세스를 간소화하는 데 도움이 됩니다.
• 협업 및 워크플로우 통합: Sentry는 오류 모니터링을 위한 중앙 집중식 플랫폼을 제공하여 팀원 간의 협업을 촉진합니다. 개발자는 댓글을 남기고, 이슈를 할당 및 추적하고, Sentry를 널리 사용되는 프로젝트 관리 및 커뮤니케이션 도구와 통합할 수 있습니다. 이를 통해 워크플로우를 간소화하고 개발 프로세스에 참여하는 모든 사람이 오류를 해결할 때 동일한 정보를 공유할 수 있습니다.

 

3. Sentry 계정을 만들어봅시다.

Sentry를 사용하기 위해선 가장 먼저 Sentry 페이지에 들어가 계정을 만들어주어야 합니다.

 

로그인을 마치면 Sentry 대시보드로 이동합니다.

 

 

4. 사용할 애플리케이션에 대한 새로운 프로젝트 생성

 

앞선 단계에서 성공적으로 가입을 마치면 프로젝트 페이지로 이도하고, 새 프로젝트 만들기(Create project) 버튼을 찾을 수 있습니다. 프로젝트 화면에서 프로젝트 만들기 버튼을 클릭하여 새 프로젝트를 만들어줍니다. 플랫폼으로는 Next.js를 선택하고 이름을 지정한 다음 만들기 버튼을 누릅니다.

 

Next.js 클릭하고 다음으로 넘어가기

 

 

5. Sentry 설치

그 다음 페이지에서는 프로젝트에서 Next.js SDK를 설정하는 방법에 대한 가이드를 제공하고 있는 모습을 볼 수 있습니다. 그 전에 먼저 wizard를 실행해야 합니다. 아래 명령을 복사하여 프로젝트에 실행하도록 합니다.

npx @sentry/wizard@latest -i nextjs --saas --org gongcheck --project gitfolio

 

 

그러면 wizard 패키지가 설치가 될 것 입니다. CLI 앱으로 Sentry 계정을 인증할 수 있도록 로그인 화면으로 이동합니다.

 

 

이제 세 가지 환경에서 Sentry를 초기화하는 sentry.server.config.ts, sentry.edge.config.ts 및 sentry.client.config.ts 파일이 생성 되었습니다. 수정된 next.js.config.js 파일은 withSentryConfig 메서드를 가져오고 Next.js 구성으로 감싸는 파일입니다.

 

수정된 next.js.config.js 파일에는 withSentryConfig 메서드를 가져와서 Next.js 구성을 래핑하는 메서드가 있습니다.

 

 

구성을 마치고 npm run dev로 서버를 실행시킨 다음 /entry-example-page로 들어가 에러를 일부러 발생시키는 버튼을 클릭해 봅니다.

 

그러면 아래와 같이 Issues 탭에 가서 에러 로그를 확인할 수 있습니다.

 

 

6. 통합 확인

프로젝트에 Sentry를 잘 설치한 후, Next.js 애플리케이션을 실행하고 localhost:3000에서 사이트를 열어줍니다. 콘솔이나 터미널에 별 다른 오류가 표시되지 않으면 Sentry가 올바르게 구성되었을 겁니다. 이제 프로젝트를 확인하고 데이터가 있는지 확인합니다. 

 

성능 페이지를 열면 Sentry에 데이터가 있는 것을 확인할 수 있습니다.

 

 

가장 먼저 표시되는 페이지는 앱에서 발생하는 모든 오류를 확인하고 각 오류에 대해 모든 세부 정보들을 확인할 수 있는 문제 페이지입니다.

 

 

 

애플리케이션의 프론트엔드, 백엔드, 모바일 및 웹 바이탈의 성능 측정값을 확인할 수 있는 성능 화면도 있습니다.

 

그런 다음 특정 오류가 발생하기 직전에 사용자가 앱을 어떻게 사용했는지 확인할 수 있는 리플레이 화면이 있습니다.

 

7. 마치며

이렇게 Sentry를 쉽게 구축하여 에러를 모니터링하는 방법에 대해서 알아보았습니다. 실시간 에러 추적 및 모니터링은 사소한 문제들부터 굉장히 크리티컬한 문제들을 사전에 해결할 수 있도록 도와주기 때문에 사용자 만족도가 향상될 뿐만 아니라 제품의 안정성도 올라가게 됩니다.

 

프로젝트 특정 요구 사항에 따라 Sentry 구성을 커스터마이징하고 정기적인 에러 리포트를 검토하여 개선할 영역을 파악하면 좋을 것 같습니다.

 

다음에 기회가 된다면 Sentry를 직접 써 보고 어떻게 활용했는지에 대해 남기는 시간을 가져보도록 하겠습니다. 감사합니다.