こちらCircleCI Advent Calendar 2019の記事です。
お声がけいただいたのでCircleCI, Sentry, Nuxt.jsというニッチな小ネタですが書きます。

目的

Nuxt.jsのプロジェクトをCircleCIでデプロイする際にSentryのreleaseを更新してSourceMapを追加する

手順

Sentryプロジェクトは既に存在すると想定して、CircleCI側の設定とNuxt.jsアプリの設定手順を記載します。
参考に使うプロジェクトはこちらですべてソースを公開しております。

CircleCI側

CircleCIのContextに以下の項目を追加
- Context名: SENTRY_AUTH_TOKEN
  - トークンはSentryのアカウントの設定画面から取得可能
- Context名: SENTRY_ORG
  - すべて小文字の Sentryのorganization名
    - 例: AlisProject -> alisproject
- Context名: SENTRY_PROJECT
  - Sentryのproject名
    - 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 が確認できるのはデグレ観点で強いです。

画像が少々わかりにくいですが、リリース(縦線)を境にバグが急増するなどしても可視化されます。
(スクリーンショットで細かいバグまで手が回っていないことがばれますね..)

SourceMapも追加され、ミニファイしたプロダクション環境でもバグ発生箇所のソースをSentry上で追うことができるようになるのでおすすめです。