[Next.js] Sentry replay 도입하기

🟡 1. Sentry이란?

- 센트리 더 알아보기

🟡 2. Replay 기능 넣기

 ...
  replaysOnErrorSampleRate: 1.0,

  replaysSessionSampleRate: 0.1,

  integrations: [
    new Sentry.Replay({
      maskAllText: false,
      blockAllMedia: false,
    }),
  ],
 })

위 코드를 sentry.client.ts 파일에 위 코드 추가하기.

 

🟡 3. Replay 확인하기

  센트리 사이트에 들어가서 확인해보면, 정상적으로 리플레이가 잘 저장된 것을 볼 수 있습니다. 다만, 리플레이의 기본 생명주기는 앱이 꺼지거나, 백그라운드로 갔을 때 끊어집니다. 그래서 키오스크와 같이 24시간 켜놓는 어플리케이션일 경우 리플레이가 계속 녹화되고 전송됩니다. 

 이를 해결하기 위해서, 리플레이 생명주기 커스텀하는 작업이 필요해 보입니다. 그 과정에 대해서는 차후 포스팅에서 다루겠습니다.

 

 

📝 정리 

1. next.js 프로젝트 sentry.client.config.js에 리플레이 관련 코드 추가
2. 센트리 사이트에서 확인하기.

 

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~