여기 CircleCI Advent Calendar 2019 의 기사입니다.
말씀해 주셨으므로 CircleCI, Sentry, Nuxt.js라고 하는 틈새인 작은 재료입니다만 씁니다.

목적

Nuxt.js 프로젝트를 CircleCI에 배포 할 때 Sentry의 릴리스를 업데이트하고 SourceMap 추가

절차

Sentry 프로젝트가 이미 있다고 가정하여 CircleCI 측 설정과 Nuxt.js 앱 설정 절차를 설명합니다.
참고로 사용하는 프로젝트는 여기 에서 모두 소스를 공개하고 있습니다.

CircleCI 측

CircleCI의 Context에 이하의 항목을 추가

Context명: SENTRY_AUTH_TOKEN

토큰은 Sentry 계정 설정 화면에서 얻을 수 있습니다

Context명: SENTRY_ORG

모두 소문자 Sentry의 organization 이름

예: AlisProject -> alisproject

Context명: SENTRY_PROJECT

Sentry의 프로젝트 이름

ex: foobar

이 기사와 직접 관련이 없지만 참고로 :

참고 프로젝트 config.yml

Nuxt.js 측면

다음으로 Nuxt.js 앱 측 설정입니다.

설정 파일: nuxt.config.js

Sentry 용 npm 패키지 넣기

npm i --save @nuxtjs/sentry

nuxt.config.js 에 설정 추가.

modules 부분

...
modules: ['@nuxtjs/axios', '@nuxtjs/markdownit', '@nuxtjs/style-resources', '@nuxtjs/sentry'],
...

sentry에 대한 항목 추가

...
  sentry: {
    dsn: `${process.env.SENTRY_DSN}`
  },
...

${process.env.SENTRY_DSN}에는 Sentry 설정 화면에서 얻은 DSN이 들어 있습니다.
이 프로젝트에서는 CircleCI에서 빌드 할 때 AWS SSM에서 값을 검색하여 환경 변수에 저장합니다.
또한 릴리스 이름에는 git 해시를 사용합니다. 배포 전략으로서, 세세한 것은 반드시 버전을 흔들지 않는 운용을 하고 있기 때문입니다.

요약

이상의 설정으로 Sentry에 release등이 반영되어 트레이스가 쉬워집니다.

각 릴리스마다 New Issues를 확인할 수 있는 것은 Degle 관점에서 강합니다.




이미지가 조금 이해하기 어렵습니다만, 릴리스(세로선)를 경계로 버그가 급증하는 등 해도 가시화됩니다.
(스크린 샷으로 미세한 버그까지 손이 돌리지 않는 것이 좋습니다..)


SourceMap도 추가되어 미니화한 프로덕션 환경에서도 버그 발생 개소의 소스를 Sentry상에서 쫓을 수 있게 되므로 추천입니다.