NuxtのプロジェクトにLogRocketを追加してすぐに幸せになる方法

4202 ワード
nuxt.js Vue.js log JavaScript JavaScript テキストリンク

TL;DR

LogRocketのアカウントを作成して、数行足せばフロントのログ管理がすごい楽になる。

※このお話はゆめみ様のYumemi.vue #3のLTで話した内容です。

自己紹介

  • いーふとイチオカ(@redshoga)
  • Vue, Nuxt使って1年ぐらい
  • Nuxt.js, Nest.js使って仕事してます
  • npx redshoga叩くと自己紹介カードがでます

LogRocketとは

数行コードを足せば、ユーザー行動を動画で記録できるようになるSaaS

サンプル

ユーザー一覧画面

ユーザーの行動の画面

導入方法

以下の設定まんま

npm install nuxt-logrocket --save
nuxt.config.js
{
  modules: [
    'nuxt-logrocket',
  ],

  logRocket: {
    logRocketId: 'YOUR_LOGROKCET_ID', // LogRocketのページから取れるID
    devModeAllowed: false, // 開発モードでも取得するか
  }
}

これだけでログが取れるようになります。（Vuexのログもとってくれます）

その他TIPS

this.$logRocketでLogRocketのモジュールにアクセスできるようになります。

これでいろいろ設定できます。

例えば以下のようにするとLogRocketのユーザ一覧に名前が表示されるようになります。

...

loggedInHandler((userInfo) => {
  this.$logRocket.identify(userInfo.name)
})

注意(?)

nuxt-logrocketが依存しているlogrocket-vuexで、以下の報告がされています。

詳しくは見ていないので要検討

参考