はじめに
Rehab for JAPANの真木です。
今回は、Datadogを使用してフロントエンドのログを収集する方法をご紹介します。
フロントエンドのログ管理にはさまざまな方法がありますが、Datadogを使うことで次のようなメリットがあります。
✅ リアルタイムでエラーを監視 → 重大な問題を即座に把握
✅ APIエラーの可視化 → フロントエンドとバックエンドの連携問題を素早く特定
✅ ログの一元管理 → サーバー側のログと統合し、全体像を把握
私たちのチームでは、Datadogを導入し、開発・運用の効率化を図っています。
本記事では、その具体的な方法をご紹介します。
ターゲット
- フロントエンドのログをDatadogで収集する方法を知りたい方
要約
- Datadogのブラウザログの設定方法
- APIのエラーをDatadogで収集する方法
Datadogのブラウザログの設定
フロントエンドのログを収集するには、Datadogのブラウザログ機能を使用します。
設定方法については、公式ドキュメントで詳しく解説されていますので、ここでは基本的な手順を簡単にまとめます。
-
package.jsonに@datadog/browser-logsを追加 - フロントエンド(Next.js)で、_app.tsxに以下のコードを追加
import { datadogLogs } from '@datadog/browser-logs'
datadogLogs.init({
service: '<SERVICE_NAME>',
clientToken: '<DATADOG_CLIENT_TOKEN>',
site: '<DATADOG_SITE>',
forwardErrorsToLogs: true,
forwardConsoleLogs: ['info', 'warn', 'error'],
sessionSampleRate: 100,
})
※forwardConsoleLogsを設定することでconsoleログを収集できるようになります。
APIのエラーも収集できるようにする
上記の設定により、フロントエンドで発生したエラーを収集できるようになりました。
さらにAPIの呼び出し時に発生したエラーもDatadogで可視化したいと思い、エラーハンドリング部分にconsoleログを追加してみました。
console.error(JSON.stringify(error))
ここで問題が！
console.errorと書けば、DatadogのStatusはErrorに振り分けられるだろうと予想していたのですが、なぜか、全てInfoに振り分けられてしまいます。
試行錯誤の結果、以下のようにメッセージにError:やWarning:を追加することで、適切にステータスを反映できるようになりました。
if (error.response?.status >= 500) {
console.error('Error:' + JSON.stringify(error))
} else {
console.warn('Warning:' + JSON.stringify(error))
}
StatusCodeもDatadogに連携する方法を色々と探ってみたのですが、
なかなか上手くいかず、これはまた時間のある時に調べてみようと思っています。
まとめ
- フロントエンドのログはブラウザログ機能を活用することで収集可能
- APIの呼び出し結果のログはconsoleログを利用することでDatadogに反映できる
この記事が、フロントエンドのログをDatadogで収集する方法を知りたい方の一助になれば、幸いです。
Discussion