フロントエンドでFirebase Crashlyticsみたいに、
Web上でログ情報を集めるようにしたいなと思い、いろいろみていたら、
Sentryというログ収集サービスがあったので、使ってみたときの備忘録

インストール

$ npm i @nuxtjs/sentry

nuxt.config.tsの設定

nuxt.config.tsに設定を追加。
modulesに@nuxtjs/sentryに追加して、SentryのDSNを設定する。

const config: NuxtConfiguration = {
  modules: [
    // Doc: https://github.com/nuxt-community/sentry-module
    "@nuxtjs/sentry"
  ],
  
  /**
   * Sentry
   * Doc: https://github.com/nuxt-community/sentry-module
   */
  sentry: {
    dsn: process.env.SENTRY_DNS || "",
    disabled: process.env.NODE_ENV != "production"
  },
}

SentyのDNSは、Sentyの管理画面から。

「Settings」→「Projects」→作成したプロジェクト、を選択

f:id:wannabe-jellyfish:20190722150253p:plain

作成したプロジェクトを選択すると、真ん中のメニューが変わる。
「Client Keys（DNS)」を選択するとDNSが表示されるので、それをコピー

f:id:wannabe-jellyfish:20190722150320p:plain

これで、例外が発生したりするとトラッキングしてくれるようになる(´ω｀)

ユーザ情報の設定

デフォルトでIPアドレスのみ取得してくれるが、ユーザIDなども紐づけたい。
Sentryではid/username/emailを設定できるので、ログイン後などに設定する。

const userId = "...";
const userName = "...";
const userEmal = "...";

if (process.env.NODE_ENV == "production") {
  Sentry.configureScope(scope => {
    scope.setUser({ id: userId, username: userName, email: userEmal });
  });
}