RollbarのTelemetryがヤバすぎて恋に落ちるレベル
2017-12-27

RollbarのTelemetryがヤバすぎて恋に落ちるレベル

私がフロントエンドの障害監視のために導入している、Rollbarというサービスの「Telemetry」という機能にかなり驚いたので紹介します。

ちなみに私はグローバルチームで働いている隠れRollbarエバンジェリストです。

はじめに

私の場合、Rollbarを主にユーザーのWebブラウザで発生したエラーを収集するために利用しています。

Rollbarは、今まで何が起きているか全くわからなかったユーザーのブラウザで起こったエラーを知ることができる可能性があるという点において、自分の中では導入は必須という認識になっています。
(Rollbarには無料枠があるため導入しない理由が正直見当たりません。)

そのため、自分が担当しているフロントエンド案件には、障害監視のためにRollbarを導入するようにしています。

最近「Telemetry」という機能が使えるようになったので、実際に運用しているサービスで有効にしたのですが、軽く衝撃を受けたので紹介したいと思いました。

Telemetryでなにができるのか?

「Telemetry(テレメトリー)」とは、wikipediaの言葉を借りると、遠隔測定のことで観測対象から離れた地点から様々な観測を行い、そのデータを取得することです。

遠隔測定法 - Wikipedia

今回の場合は、ユーザーのブラウザ上で様々な観測を行い、そのデータをRollbarへ送信することです。
2017年12月のところ、次のようなデータを収集できるようです。

  • DOMContentLoadedloadイベント
  • ユーザーの行動(clickinputイベント、SPA上での画面遷移)
  • xhrfetchのネットワークアクセスとレスポンスデータ
  • console.log
  • その他、Rollberへ任意に送信したメッセージ

下の画像は、あるエンドポイントを呼び出した際に400エラーが発生した時の実際のTelemetryデータです。
Telemetryを見ると、直前にユーザーがどのような行動をしていたかを把握することができます。

ちなみに、textareaの場合はその入力内容がFormValueとして取得できるようです。
(ただしinputで入力した中身は送信されないようで、Rollbar上では確認できませんでした。)

個人的な感覚では、このTelemetryとあとで紹介する「カスタムpayloadデータ」を組み合わせることで、フロントエンドで発生したエラーの原因特定がかなり楽になりました。

Telemetryの導入方法

Telemetryの導入については、rollbar.jsのバージョンが「2.0」以上であれば自動で有効になります。もしTelemetryを収集したくない場合は、次のようにautoInstrumentを使って停止することができます。

1
2
3
4
5
6
Rollbar.configure({
...
// autoInstrumentはデフォルトでtrue
autoInstrument: false,
...
});

また、このようにnetwork, log, dom, navigation, connectivityを使って部分的に停止することもができます。

1
2
3
4
5
6
7
8
9
10
11
Rollbar.configure({
...
autoInstrument: {
network: true,
log: true,
dom: false,
navigation: false,
connectivity: true
},
...
});

JavaScript Integration - Telemetry

カスタムpayloadデータを設定する

Rollbarには、上のconfigureをつかってエラー情報を収集するpayloadにユーザーが任意のデータを追加することができます。

1
2
3
4
5
6
7
Rollbar.configure({
payload: {
person: {},
context: {},
prettyUsefulData: {}
}
});

JavaScript Integration - Payload

ここで設定したデータは「Telemetry」と同じように参照できるため、例えばページが開いた時に取得したバックエンドのデータなどを含めておいて、なにかあった時に参照するような用途で使えます。

まとめ

Rollbarの「Telemetry」という機能についての紹介でした。

「Telemetry」でここまでできるということは、近いうちにこのログを元に実際の環境でもう一度再生できるようになると思います。

エラーが発生した場合、それを再現させるまでがどうしてもコストになってしまうため、BrowserStackSauce Labsなどのオンラインテストサービスと連携して、再現テストまで自動でできるようになったら嬉しいですね。

Telemetryの詳細については、これを書いた時と比べると変更があると思うので、公式のドキュメントを参照してください。場所はこちらです。