🐶

Datadog を利用したブラウザのエラー収集

2020/10/01に公開

JavaScript

TypeScript

datadog

tech

ブラウザのエラーログの収集を Datadog を使って、やってみます

この記事では最低限必要そうな設定に絞って実装しています
おそらく全部試すのに 30 分もかからないレベルだと思います

今回、新しくアカウントを作って、Datadog の 14 日間無料トライアル期間中に試しています
なので、Datadog の全機能が使える状態です
プライベートで試す用に無料枠はどの程度使えるのかは、また後日調べておこうと思います

最低限の実装

npm i @datadog/browser-logs

Datadog 管理画面のIntegrations -> APIsからクライアントトークンを発行します

以下のコードを記述します
できればエントリーポイントとなる JS に記述するのが望ましいと思います

import { datadogLogs } from '@datadog/browser-logs'

datadogLogs.init({
  clientToken: '[発行したクライアントトークン]'
})

ちなみに@datadog/browser-logsは型定義があるので、設定可能な項目は型定義から参照できます
clientTokenオプション以外の設定はすべてオプショナル型でした

以上で最低限の実装は完了です
これで自動的にエラーを Datadog に Post します

デフォルトの挙動は以下のようになっています

console.errorのログ、キャッチしてない Exception、ネットワークエラーログを自動的に Datadog に Post
すべてのセッションでエラーを収集する
- エラーの分析を改修目的ではなく統計目的で利用する場合などは、sampleRateというパラメーターを調整するのかなと思います
同じサイトのサブドメイン間でセッションを保持しない
セッション Cookie、クロスサイトセッション Cookie は使わない

クライアントトークンについて

JS 上にクライアントトークンをベタ書きするので、必然的にこのトークンは公開されてしまうのですが、このクライアントトークンは公開されてもセキュアな情報です
たとえば、Datadog の API を操作できるような情報ではないということです
ただし、第三者が自由に JSON を送りつけてくることはできてしまいますが、この辺は Datadog を設定すればフィルタリングできると思います

クライアントトークンは Web または、モバイルアプリケーションからのイベントとログを送信するために使用されます
（このことはクライアントトークンの発行を行えるページに書いてあります）

ちなみに、API キーやアプリケーションキーはホストに Datadog Agent がインストールされていれば、API を操作できてしまうので、公開 NG です

ログの送信テスト

自動ログイベントの送信

試しに以下をどこかに書いて実行してみます

console.error('test error')

実行後、以下のように Datadog でエラーを確認できます

また、エラーをクリックすると詳細が見れるのですが、エラーが発生したブラウザ・デバイス・OS 情報も自動で付与されています

カスタムログイベントの送信

try/catch構文などで意図的にログイベントを発生させたい時もあると思います
以下を実行するとカスタムのログイベントを Datadog へ送信できます

datadogLogs.logger.error('Button clicked', { name: 'buttonName', id: 123 })

エラー種別はdebug、info、warn、errorが用意されています

実行後、以下のように Datadog でエラーを確認できます

ログのフォーマットを変更

Datadog から実際にエラーを調査する際は、エラーが発生したユーザのログイン情報などがあると便利です
このライブラリには Datadog へ送るためのログのコンテキストを変更できる関数が用意されています

グローバル設定

以下を実行することで、すべてのログイベントにuser_idを追加できます

datadogLogs.addLoggerGlobalContext('user_id', '123456')

ローカル設定

特定のロガーに限定的してログコンテキストを変更したい場合は、以下を実行します

datadogLogs.logger.addContext('user_id', '123456')

Slack 通知

事前準備

Slack で Datadog Integration を追加し、Webhook URL を発行
Datadog の Integrations から Slack を追加し、Webhook URL と通知先の Channel 名を設定

設定

Datadog 管理画面のMonitors -> New Monitor -> Logsに移動

たとえば、以下のような感じで設定します
今回は確認用でアラートの閾値を1に設定しています
この辺は運用時に最適値を判断して設定する必要があります

Slack にこんな感じで通知されます

エラーログ収集のメリット

フロントエンドのエラーの分析や対策がちゃんと行えるようになるのはもちろんなのですが、普段システムを保守運用する中で、たとえば以下のようなメリットがあるかなと思います

クロスプラットフォームテストやクロスブラウザテストを行わないと気づけない OS、ブラウザ特有のエラーを収集できる
トップ画面が出ません系のエラー調査が楽になる
- ユーザーにブラウザ上でエラーログが出てないか確認してもらう以外に手の打ちようがないエラーの調査が少し楽になりそう
- たいていはユーザーのネットワークの問題か、広告ブロックツールのせいだったりがほとんどですが、、

参考

日本語のドキュメントも用意されていますが、情報が古いです