Nuxt.js + Sentry の本番運用での設定に戸惑った #Vue.js

フロントエンドのエラーを検知するのは、バグの早期発見、場合によってはリリースバージョンを切り戻しの判断をしたりする上で非常に重要です。

Sentryを使えば、かなり簡単にフロントエンドのログ収集の仕組みを実現出来ます。また、他の同様のツール(Rollbarなど)に比べてモダンなUIかつ、ドキュメントやTipsが豊富な気がします。また、nuxt-community にて sentry-module が提供されてる点もgood。

SentryにはReleaseという機能があり、運用環境へのデプロイとログを紐付けることが出来ます。また、SourceMapを一緒にアップロードしておくことで、本番環境でも stack trace を追えるようになります。

しかし、今回@nuxtjs/sentryを使ってReleaseしようとした際、公式の記述がさらっとしていてちょっと困ったので備忘録として残しておきます

やりたかったこと

NustからSentryにReleaseを作成する。

Releaseの際にはSourceMapをSentryにアップロードする。

本番環境側ではSourceMapは見えないようにしたい。

解決方法

※ Sentry Project 立ててある前提です

Sentry側で用意しておくべきもの

DSN: Project Settings の Client Keysから確認
Auth Token: アカウント設定の Auth Tokens から作成 (Projectの書き込み権限をもつTokenを発行する)
Organization Name: Organization Settings から確認
Project Name

設定

$ npm i @nuxtjs/sentry

build時に sentry cli が使うオプションファイル .sentryclirc を準備

.sentryclirc


[defaults]
org = organizarion-name
project = project-name

何も考えずに config

nuxt.config.js

{
  modules: [
    '@nuxtjs/sentry',
  ],
  sentry: {
    dsn: process.env.SENTRY_DSN,
    publishRelease: true,
    sourceMapStyle: 'hidden-source-map',
    config: {
      release: process.env.GIT_SHA,
    },
  },
  // ***
}

release はtag名やpackages.json に記載してるバージョンなど何でもいいのですが、とりあえずリリース時点のコミットハッシュをいれておきました。

sourceMapStyle は webpack の sourcemap を設定するプロパティです。デフォルトの値は "source-map" になってるので、本番運用では "hidden-source-map" を指定してあげるとクライアント側では SourceMap を隠してくれます。READMEにも書いてあります。

困ったこと

最初はReleaseの実行に必要な環境変数がわからなかったり、本番運用で必須な SourceMap の隠し方が分からず結構時間を取られてしまいました。解決するためにこちらの記事などを参考にさせていただき、SourceMapを除去する Webpack Plugin 書いたりとかしてました。

が、今回記事をまとめるにあたって改めてドキュメントを読んでみたらしっかりと書いてあるんですよね… 残念な英語読解力を痛感しました。

初めて Nuxt と Sentry を使われる方の参考にしていただければ幸いです。