DatadogでフロントエンドのJSエラーを収集してサービス改善

Last updated at 2019-12-11Posted at 2019-12-10

この記事は、弁護士ドットコム Advent Calendar 2019 - Qiita の11日目の記事です。

要約

DatadogでブラウザーのJSエラーの収集を始めた。
1日に発生するJSエラー数を、1/4まで削減することができた。
エラー発生検知が、数時間から15分以内になった。

サービスの課題

以前、Sentryを弁護士ドットコムサービスが稼働しているowned k8sの片隅で運用していたが、運用負荷が高く、廃止。
サーバーサイドの監視は、きちんとやっていましたが、フロントの監視がおざなりになってました。

一部のページでは、Google Tag Manager経由で自作エラー検知スクリプトを埋め込んでいました。しかし、エラーを、Google Analyticsにイベント通知しているが、情報が少なく、エラーが追えませんでした。

結果、JSやフロントエンドのエラーは検知できませんでした。

フロントで障害が起きていても気づけません。
お問い合わせがきてから、バグ発覚。

なぜDatadogを採用したのか

弁護士ドットコムでは全社的にDatadogを導入してサービスの監視を行っています。
そのため、運用を一元化するため、可能ならばDatadogに寄せたいという意図はありました。

ただ、Sentry有料版なども含めて検討しましたが、下記の点からDatadogに軍配が上がりました。
導入当時は、private ベータ版だったのが懸念でしたが、先日GAになりました。安心ですね。

JSライブラリを読み込むだけなので、導入が簡単
費用が安い
- 変動費: $2.5 (1 million log / month)
- 固定費: $1.52
マネージドサービスなので、運用が簡単
綺麗なダッシュボードやモニター機能が充実している

導入方法

##1. クライアントトークンの発行

メニューのIntegrationsから、APIsを選択し、設定画面に入り、クライアントトークンを発行します。
セキュリティ上の理由から、API キーを使用することはできません。

2. jsロガーの構築

全ページに、下記設定を行うことで、全てのエラーログが、Datadogに送信されます。

<html>
  <head>
    <title>Example to send logs to Datadog</title>
    <script type="text/javascript" src="https://www.datadoghq-browser-agent.com/datadog-logs-us.js"></script>
    <script>
      // クライアントトークンを設定します
      DD_LOGS.init({
        clientToken: <CLIENT_TOKEN>,
        // false に設定すると、js およびコンソールエラーの自動収集がオフに
        forwardErrorsToLogs: true,
      });
      // 送信するログレベルを設定
      DD_LOGS.logger.setLevel('error')


      // オプション
      // グローバルメタデータ属性を追加します。一度に 1 つの属性を追加できます
      DD_LOGS.addLoggerGlobalContext(<META_KEY>, <META_VALUE>);
    </script>
    ...
  </head>
...
</html>

送信されたエラーは、綺麗なグラフで可視化されます。

ブラウザの種別、バージョン等は、自動でDatadogが収集します。
エラーをクリックすることで、より詳しい情報が見れます。

3.カスタムログの送信

JSでtry-catchしている箇所は、エラーが送信できないので、明示的に送る必要があります。


DD_LOGS.logger.log(<MESSAGE>, <JSON_ATTRIBUTES>, <STATUS>)

4.一定数以上のJSエラー発生で、slackへアラートをあげる

メニューのMonitorsから、new Moniter+で、アラート設定画面に入り、Logsを選択します。

下記の様に、Source:browserを指定します。
アラートする閾値を設定し、通知するチャンネルを指定します。
普段のエラー数のグラフを見ながら、閾値が設定できるので、わかりやすいです。
通知メッセージで、is_alertなどで条件を設定した場合、アラート種別にあった文章が表示されます。