Datadog RUM 実装手順ガイド
Web アプリの種類によって RUM の実装方法は異なる。
代表的な 4 つの方式をまとめる。いずれもRUMは、クライアントPC側のWEBブラウザで動作する。
- Nginx の設定ファイル（/etc/nginx/sites-available/*.com）で自動挿入
- HTMLファイル に直接 RUM Script を挿入
- Python（Flask / Django / FastAPI）テンプレートに挿入
- Node.js（Express）テンプレートに挿入
用語
Datadog RUM はブラウザで動作する JavaScript SDK。
RUM Script スニペット（コピペで使える短いScriptコード）を HTML に挿入して動作する。
Datadog Agent は不要（PC[ブラウザ] から Datadog intake server に直接送信する）。
Datadog RUM：実装方式の比較
| パターン | 実装場所 | コード変更 | 典型例 |
|---|---|---|---|
| Nginx 自動挿入 | /etc/nginx/sites-available/*.com | 不要 | Nginx が対象の HTML 全てに RUM を自動挿入 |
| HTML 直接挿入 | HTML / SPA | 必要 | 対象のHTMLファイルに<script>DD_RUM.init()</script>を追加*1 |
| Python（Flask / Django / FastAPI） | テンプレート | 必要 | base.html に RUM を追加 |
| Node.js（Express） | テンプレート | 必要 | layout.ejs に RUM を追加 |
*1: 全ての HTML に RUM script を追加するのは大変なので、common_head.html などアプリ共通のHTMLファイルなどに追記すると作業を省力化できるが、
４つの方式共通に、追加する RUM JavaScript 内の ClientToken と ApplicationId は、公開前提のキーであり、環境変数などで渡さなくてもよい。
手順A．Nginx の場合
この方式は Nginx 設定に「表示するHTMLファイルに自動で RUM Script を挿入します。HTMLファイルや JavaScript のアプリコードの変更が不要。但し、対象のHTML全てが RUM モニタリングの対象になります。
- Nginx 設定ファイルに RUM 設定を追加
server {
# 省略…
# Datadog RUM - example
datadog_rum on;
datadog_rum_config "v6" {
"applicationId" "8******************************85c";
"clientToken" "pu******************************f64bb";
"site" "datadoghq.com";
"service" "アプリ名";
"env" "prod";
"version" "1.0";
"sessionSampleRate" "100";
"sessionReplaySampleRate" "20";
"trackResources" "true";
"trackLongTasks" "true";
"trackUserInteractions" "true";
"defaultPrivacyLevel" "mask";
}
# 省略…
}
- Nginx を再起動
sudo systemctl restart nginx
手順B．HTML に直接 Script を挿入する場合
- 計装対象の HTMLファイル の
<head>タグ内 に RUM スニペットを追加
<head>
<script src="https://www.datadoghq-browser-agent.com/datadog-rum.js"></script>
<script>
window.DD_RUM.init({
clientToken: "8******************************85c",
applicationId: "pu******************************f64bb",
site: "datadoghq.com",
service: "アプリ名",
env: "prod"
});
</script>
</head>
- そのまま再起動など無しでHTML配信して計測できます
手順C．Python の場合
Python のWEBフレームワーク（Flask / Django / FastAPI）のいずれもテンプレート方式。下記はFlaskの例。
- base.html に RUM スニペットを挿入。
<!DOCTYPE html>
<html>
<head>
<script src="https://www.datadoghq-browser-agent.com/datadog-rum.js"></script>
<script>
window.DD_RUM.init({
clientToken: "8******************************85c",
applicationId: "pu******************************f64bb",
site: "datadoghq.com",
service: "アプリ名",
env: "prod"
});
</script>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
手順D．Node.js（Express）の場合
- layout.ejs（または index.ejs）に RUM を挿入
<head>
<script src="https://www.datadoghq-browser-agent.com/datadog-rum.js"></script>
<script>
window.DD_RUM.init({
clientToken: "8******************************85c",
applicationId: "pu******************************f64bb",
site: "datadoghq.com",
service: "アプリ名",
env: "prod"
});
</script>
</head>
- Express でテンプレートを返すだけ
app.get('/', (req, res) => {
res.render('index');
});
RUM メトリック送信検査
PC側ブラウザの DevTool > Network > rum? の POST Request URL が intake server (browser-intake-datadoghq.com)にアクセスできていることを確認する
まとめ
Datadog RUM は Web アプリの構成に応じて、4つの方式で実装できる。
| パターン | 実装方式 | コード変更 | 代表的な実装 |
|---|---|---|---|
| Nginx 自動挿入 | サーバー側で注入 | 不要 | datadog_rum on; |
| HTML 直接挿入 | HTML に Script | 必要 | 対象のHTMLファイルに<script>DD_RUM.init()</script>を追加 |
| Python（Flask / Django / FastAPI） | テンプレートに挿入 | 必要 | base.html に RUM を挿入 |
| Node.js（Express） | テンプレートに挿入 | 必要 | layout.ejs に RUM を挿入 |