Sentry では、エラーが発生した際に簡単にユーザーフォードバックを求めるダイアログを表示できます。

Nuxt.js では、エラーが発生した際には layouts/error.vue へ遷移させることでエラーページを表示するので、このエラーコンポーネントにダイアログを表示させる処理を書いていきます。

ライブラリをインストール

nuxt/sentry というモジュールがあるので基本はこれを使用しますが、おそらく？ユーザーフィードバックを求めるダイアログを表示させるメソッドは存在しないので、そのために、@sentry/vue もインストールします。

sentry.nuxtjs.org

$ yarn add nuxt/sentry @sentry/vue

nuxt.config.jsを修正

Sentry の初期設定は nuxt.config.js に記述します。

modules: [ '@nuxtjs/sentry' ],
sentry: {
    dsn: process.env.SENTRY_DSN || '',
    disabled: process.env.NODE_ENV !== 'production',
    sourceMapStyle: 'hidden-source-map',
    config: {
      release: process.env.GIT_SHA
    }
  },

Sentry のイベントの送信先である dsn は .env ファイルの定義であります。 disabled の条件によって、本番環境以外においては Sentry は動作しなくなります。 sourceMapStyle は hidden-source-map に設定するとソースマップが非表示になります。通常デフォルトで非表示となっていることが望ましいですが、後方互換性のためにデフォルトの設定では表示させるようにしているようです。 config.relase を process.env.GIT_SHA に設定すると、Git のコミットハッシュによってリリース回数を数えることができます。

設定するとその他のモジュールと同じように this.$sentry でアクセスできるようになります。

エラーコンポーネント

エラーコンポーネントを修正します。

import * as Sentry from '@sentry/vue'
 
export default {
  props: {
    error: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      eventId: ''
    }
  },
  created() {
    this.eventId = this.$sentry.captureException(this.error)
  },
  methods: {
    showReportDialog() {
      Sentry.showReportDialog({
        eventId: this.eventId,
        dsn: process.env.SENTRY_DSN,
        user: {
          name: this.user ? this.user.username : '',
          email: this.user ? this.user.email : ''
        }
      })
    }
  },
  computed() {
    user() {
      // 省略
    }
  }
}