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

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

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

はじめに

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

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

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

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

Telemetry でなにができるのか？

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

遠隔測定法 - Wikipedia

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

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

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

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

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

Telemetry の導入方法

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

Rollbar.configure({
  ...
  // autoInstrumentはデフォルトでtrue
  autoInstrument: false,
  ...
});

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

Rollbar.configure({
  ...
  autoInstrument: {
    network: true,
    log: true,
    dom: false,
    navigation: false,
    connectivity: true
  },
  ...
});

JavaScript Integration - Telemetry

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

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

Rollbar.configure({
  payload: {
    person: {},
    context: {},
    prettyUsefulData: {},
  },
});

JavaScript Integration - Payload

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

まとめ

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

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

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

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

• Introducing JavaScript Telemetry
• Telemetry