LogRocketをNuxtで使ってみる! - inokawablog

LogRocketをNuxtで使ってみる!

LogRocketとは?

LogRocketとは、ユーザーがサイトで何を行っているかを記録するためのサービスです。

デバイス、セッションなどでユーザーをフィルタリングしたり、UI/UXの問題をチェックしたり、UXの問題を見つけて改善するためのとても優れたツールです。

また様々なツールと連携することができ、開発を加速させます。

メリット

  • カスタマーサポート・サクセスが円滑になる。
  • 開発者のエラー・バグ調査が円滑になる
  • UI/UX改善のための分析ができ、さらなるUXの向上が見込める。

Nuxtでの設定方法

今回はNuxtを使った実装方法を紹介します。

nuxt-logrocketはnuxt communityで公式にサポートしているので、nuxtにおいては開発面で安心して使用でき、簡単に導入することができます。(そのまま使っても導入はとても簡単ですが。。。)

nuxt.config.js


  modules: [
    // git: https://github.com/nuxt-community/nuxt-logrocket
    // https://docs.logrocket.com/reference#javascript-sdk-api
    'nuxt-logrocket'
  ],
  logRocket: {
    logRocketId: 'YOUR_APP_ID',
    // 開発モードでもログをとるかどうか
    devModeAllowed: true
  },

YOUR_APP_IDは、サイドバーのSETTINGS>General SettingsApp IDがあるのでそれを入力してください。

コンソールを自動で記録してくれます。

console.log
console.info
console.debug
console.warn
console.error

vuex

vuexを使用している場合、LogRocket Vuexが自動でvuexを記録してくれます!

mutaionのみ記録してくるようです。

セキュリティ

パスワードなど、記録したくないデータはDOMに任意の属性を付与することで記録されないようになります!

フォーム入力

データをマスキングする方法はredactlipsumの2種類あります。

<textarea data-private="redact"></textarea>
<textarea data-private="lipsum"></textarea>

実際に設定してみると以下のようになります。最初の数秒はdata-private="redact"に入力していますが、入力情報が表示されません。
data-private="lipsum"の方では、実際はsamplesampleと入力したのですが、違う文字列で表示されています。

文字列の長さだけ同じことがわかります。data-private="lipsum"の方がセキュリティが甘くなりますが、何かしら入力したことを確認したい場合は、lipsumで設定しておきたいですね。

料金

個人では1000セッション/月まで無料で使用することができます。

チームでは50000セッション/月までは$399/月ほどで利用することができます。

それ以上のプロフェッショナルの場合は、お問い合わせをして確認しましょう。

セッションに関して

1セッションのカウントとしては、What defines a session?に以下のように書いてありました。

Simply put, a session is a series of user interactions on your site, beginning with the first page they visit and ending with a period of inactivity lasting longer than 30 minutes. "Activity" is defined as any user mouse movement, clicks, or scrolls.

As an example, if your user visits your landing page, then your app, and then refreshes the page all within 30 minutes of each other, the entire experience is recorded in a single session. If the user returns back to your site after another hour, a new session recording starts from the moment that they do the first action.

LogRocket sessions also support recording across multiple tabs, so a user opening a link in your app in a new tab will count as the same session.

30分以上非アクティブな状態でセッションが切れるようです。つまり、1時間後にユーザーが戻ってきてアクティブな状態になったら新しく1セクションとしてカウントされます。

タブでの移動やリロードに関しては同一セッションとして扱われるようです。

単純にアカウント数がセッション数になるわけではないので気をつけましょう!

データに関して

保持期間

個人 チーム プロフェッショナル
14日 1ヶ月 要お問い合わせ

個人では14日間データが保持されます。

チームでは1ヶ月間データが保持されます。

それ以上のプロフェッショナルの場合は、お問い合わせをして確認しましょう。

データをエクスポートすることは出来なさそうなので、データの定量的な部分に関しては自分でログを収集するように実装する必要がありそうです。

データの表示は基本的に1セッションごとで分割して表示されます。

データ消去

At any time, a LogRocket client can send an email to support@logrocket.com and request that all their customer data be erased from all LogRocket systems. The request will be carried out by the LogRocket operations team within 24 hours and be followed by an email response confirming deletion of the data.

メールを送れば簡単にデータを削除してくれるみたいです。

エラーをslackに通知するには?

エラーが発生した場合は、slackに通知してもらいたいですよね。

LogRocketではとっても簡単に設定することができます!

サイドバーのSETTINGS>Error SettingsからSlackのロゴがあるので、それをクリックすると、Webhook URLChannel Nameを入力する場所があるので、それぞれを入力してSave Changesを押せば完了です。

比較

FullStory

FullStoryの方が機能が多く、UIも素晴らしく、データ提供のAPIも用意しているので、これを使ってデータを移行することも可能です。

しかし、料金が少々高いようです。
そして、私自身それほど多くの機能は必要ないと考えており、料金に見合った成果は得られないと考えています。

またSDKもLogRocketの方がきちんと用意されており、LogRocket開発者向けにも作られていることがわかります。

Sentry

Sentryはエラーロガーなので根本的には比較することは出来ませんが、LogRocketでもエラーログを見れるので、一応の比較。

エラーロガーに関してはSentryの方が優れていると思います。

スタック全体のエラーをリアルタイムで集約して,より具体的なエラーを取得することもできます。またSentryは導入も簡単で、Nuxtを使用している場合では、Nuxt公式がsentry-moduleを作っているのでNuxtにも簡単に導入することができます。

まとめ

一番気軽に試すことができ、安価で運用できるのはLogRocketだと思います。

セッション数に関して気をつけなければいけないところがありますが、料金さえあまり気にしないようにすれば、カスタマーサポートや開発の効率がとても上がると思います。