Nuxt.js에 Sentry 적용하기

안녕하세요 Lovefield입니다.

서비스를 운영하면서 에러를 로깅하는 것은 결코 쉬운일이 아닙니다. 그래서 사람들은 에러 로깅을 쉽게 해주는 Sentry 서비스를 애용하는 편입니다. 이번 글은 Nuxt.js 에서 Sentry를 설정하는 법에 대해서 알아보겠습니다.

다음 명령어를 사용해 sentry모듈을 설치합니다.

npm i @nuxtjs/sentry or yarn add @nuxtjs/sentry

nuxt.config.js 에 모듈부분과 플러그인 부분을 추가해줘야 합니다. 모듈 부분만 추가하면 sentry에서 제공하는 setTag, setUser 같은 옵션을 사용할 수가 없습니다.

modules: ["@nuxtjs/sentry"],
plugins: ["~/plugins/sentry"],

모듈을 추가했다면 nuxt.config.js 부분에 다음을 추가해줍니다.

sentry: {
       dsn: “your sentry DSN address”,
       config: {
           environment: process.env.NODE_ENV, // app mode (dev,stage,prod)
           beforeBreadcrumb(breadcrumb, hint) { // hook - add http request payload
               if (breadcrumb.category === "xhr") {
                   const data = {
                       statusCode: hint.xhr.status,
                       requestBody: hint.xhr.__sentry_xhr__.body,
                       response: hint.xhr.response,
                       responseUrl: hint.xhr.responseURL,
                   };
                   return { ...breadcrumb, data };
               }
               return breadcrumb;
           },
       },
   },

sentry에 정보를 전송할 수 있는 주소인 DSN를 설정합니다. `config` 부분에는 hook과 어플리케이션의 모드를 표시할 `environment` 를 설정 합니다. environment는 주로 어플리케이션이 개발모드인지 운영모드인지를 표기합니다. 그리고 hook으로 `beforeBreadcrumb`을 설정합니다. 이 함수는 sentry에서 지정하는 breadcrumb을 생성하기 전에 실행됩니다. breadcrumb은 sentry에서 에러가 발생하기 전 유저의 행동이나 이동한 경로를 표기하는 항목입니다. 이 항목중 `xhr` 은 서버간의 통신을 의미합니다. 즉 서버간 통신이 이루어진 경우 유저가 요청한 정보와 서버가 응답한 정보를 추가로 표기하겟다는 함수를 작성 한 것입니다.

plugins/sentry.js

export default function ({ $sentry }) {
   $sentry.setTag("useremail", "userEmail");
}

마지막으로 sentry에 보낼 tag를 설정합니다. setUser를 사용하지 않은 이유는, 별도로 이메일이나 유저 id를 지정할 경우 기존 ip정보가 날아가 버리기 때문입니다. 그렇다고 ip를 직접 적어주자니 plugin에서 req 인자가 존재하지 않는 경우도 있어 처리하기 힘들었기 때문입니다.