CircleCiのビルドでSentryのreleaseを更新しSourceMapを追加(Nuxt.js編)

こちら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上で追うことができるようになるのでおすすめです。