Front-End/Next

[Next.js] Sentry.io로 프론트엔드 모니터링 하기

Voyage_dev 2022. 11. 6. 18:19

가볍게 사용할 수 있지만 다양한 에러를 직관적으로 분석해주며, 알림 설정을 통해 어떤 문제가 생겼는지 알려주고 처리 할 수 있는 Sentry를 알아보자

프론트엔드 모니터링

프론트엔드에서의 오류는 크게 데이터 영역 과 화면 영역 이 두 가지 영역에서의 오류, 그리고 예상할 수 없는 네트워크 이슈나 다양한 런타임 오류로 나눌 수 있다. 이러한 오류는 언제든지 발생할 수 있는 오류이지만 개발자에게 이런 오류를 모두 예측하는 것은 거의가 아니라 불가능 한 일이다.

 

웹 사이트가 더욱 강력해지고 복잡해짐에 따라 성능 유리 관리가 점점 더 어려워지고 있다. 사용자는 사이트에서 경험하는 것을 기반으로 그 기업의 품질을 평가하기 때문에 사이트가 중단되거나 오류가 발생한다면 그 기업의 신뢰가 떨어질 수 있다.

 

프론트엔드 모니터링은 웹 사이트 또는 앱의 성능을 추적하는 데 사용되는 즉, 트래킹하는 일련의 프로세스 및 도구이다. 주로 사용자가 최종적으로 보는 부분에 중점을 둔다.

Sentry?

Sentry는 어플리케이션에서 오류가 발생하면 알려주는 강력한 에러 트래킹 서비스이다. 로그에 대한 다양한 정보를 제공하고 얼마나 많은 이벤트가 발생했는지 알 수 있다. 클라이언트의 오류 발생시 메일을 보내주고, 슬랙과 연동하면 슬랙 메시지를 통해 오류 발생과 해당 오류에 대한 정보 파악이 가능하다.

▪ 이벤트 로그에 대한 다양한 정보 제공

Sentry는 발생한 이벤트 로그에 대하여 다양한 정보를 제공한다

  • Exception & Message: 에러가 발생한 코드 라인과 에러 및 로그 메시지
  • Device: 이벤트 발생 장비 정보 (name, family, model, memory 등)
  • Browser: 이벤트 발생 브라우저 정보 (name, version 등)
  • OS: 이벤트 발생 OS 정보 (name, version, build, kernelVersion 등) (유저가 사용하는 OS)
  • Breadcrumbs: 유저가 오류 발생시 거친 과정 및 경로

Next.js 프로젝트에 도입하기

  • Sentry.io 사이트에서 회원가입하고 프로젝트 생성

  • 프로젝트 플랫폼을 선택하고 프로젝트 이름을 입력한다.

패키지 설치

yarn add @sentry/nextjs

npm install --save @sentry/nextjs

패기지 설치가 끝났으면 npx @sentry/wizard -i nextjs 로 자동으로 해당 프로젝트 세팅이 끝나게 된다.

npx @sentry/wizard -i nextjs
  • root 폴더에 sentry.client.config.js , sentry.server.config.js, sentry.properties 생성
  • root 폴더에 .sentryclirc 생성되며 들어가보면 발급받은 토큰이 들어가 있다
  • pages 폴더에 _error.js 파일 생성
  • next.config.js 도 생성되지만 이미 있으므로 안에 들어있는 sentry 코드만 복사해서 기존에 있던 next.config.js안에 넣어주면 된다.
const { withSentryConfig } = require("@sentry/nextjs");
sentry: {
    // Use `hidden-source-map` rather than `source-map` as the Webpack `devtool`
    // for client-side builds. (This will be the default starting in
    // `@sentry/nextjs` version 8.0.0.) See
    // <https://webpack.js.org/configuration/devtool/> and
    // <https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map>
    // for more information.
    hideSourceMaps: true,
  },
};

const sentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore

  silent: true, // Suppresses all logs
  // For all available options, see:
  // <https://github.com/getsentry/sentry-webpack-plugin#options>.
};

// next.config.js

// ... 생략

module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);

next.config.js에서 withSentryConfig()로 감싸주면 Sentry 대시보드에서 성능 모니터링을 활성화 할 수 있다.

마무리

현재 Sentry를 적용하여 사이트 프로젝트의 이슈 발생 시 알림을 받고있다. Sentry와 같은 강력한 도구는 유용한 통찰력으로 내가 모르던 오류도 어디서 어떻게 발생했는지 알 수 있기 때문에 에러를 줄여나가면서 지급해야 하는 비용이 줄어든다는 점에서 엄청 매력적인 도구인 것 같다.

 

많은 개발자들이 이러한 예기치 못한 클라이언트 이슈 발생의 원인을 파악하고 해결하는 방법을 고민하고 연구해 보면 좋을 것 같다.

 

 

 

 

출처 : 아래의 사이트들을 보면서 큰 공부 하였습니다

https://docs.sentry.io/platforms/javascript/guides/nextjs/

https://velog.io/@thyoondev/Next.Js에-Sentry로-에러-모니터링-하기

https://velog.io/@surim014/frontend-monitoring-with-sentry-and-react

https://tech.kakaopay.com/post/frontend-sentry-monitoring/#-이벤트-로그에-대한-다양한-정보-제공