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

TL;DR

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

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

---

自己紹介

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

---

LogRocketとは

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

---

サンプル

ユーザー一覧画面

ユーザーの行動の画面

---

導入方法

以下の設定まんま

• nuxt-community/nuxt-logrocket: LogRocket module for Nuxt.js

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で、以下の報告がされています。

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

---

参考

• nuxt-community/nuxt-logrocket: LogRocket module for Nuxt.js