はじめに
本記事では、DatadogのRUMの機能を、Node-REDで作成したWebアプリに仕込む方法について解説します。
Datadogの設定
DatadogのUX MonitoringメニューからRUM Application Summaryを選択します。
New Applicationをクリックします。
Application typeはJS（JavaScript）を選択します。Application nameは任意で良いです。（ここでは「Node-RED」としています）
Node-REDでフロー作成
RUMはWebアプリやモバイルアプリのユーザー利用状況をモニタリングする機能ですので、Node-REDで簡易的なWebアプリを作成します。
Node-REDではFunctionノードの中にnpmモジュールを読み込んで利用することもできますが、試してみたところ上手くDatadogへデータを送れなかったので、今回はHTMLの中にコードスニペットを埋め込むやり方にします。（CDN Sync）
Datadogでデータを見たときに分かるように、環境変数のdd.envに"node-red"を設定します。設定すると左側のコードスニペットに内容が反映されるので、このコードスニペットをコピーします。
Node-REDでhttp inノードとhttp responseノードを配置し、間にhtmlノードをはさみます。
HTMLの中身は以下の通りかんたんなフォームアプリにしておきます。headタグ内に、さきほどコピーしたコードスニペットを埋め込みます。
<html>
<head>
<meta charset="UTF-8">
<title>ユーザー登録</title>
<script
src="https://www.datadoghq-browser-agent.com/us1/v4/datadog-rum.js"
type="text/javascript">
</script>
<script>
window.DD_RUM && window.DD_RUM.init({
clientToken: 'pub84b0c5ba245c196c9efd797745235ff3',
applicationId: '09a941f5-eb09-4025-bab9-ae14e64c1a6f',
site: 'datadoghq.com',
service: 'node-red',
env: 'node-red',
// Specify a version number to identify the deployed version of your application in Datadog
// version: '1.0.0',
sessionSampleRate: 100,
sessionReplaySampleRate: 20,
trackUserInteractions: true,
trackResources: true,
trackLongTasks: true,
defaultPrivacyLevel: 'mask-user-input',
});
window.DD_RUM &&
window.DD_RUM.startSessionReplayRecording();
</script>
</head>
<body>
<form action="https://google.com" method="post">
名前:<br>
<input type="text" name="name"><br>
性別:<br>
男<input type="radio" name="gender" value="0">
女<input type="radio" name="gender" value="1">
<input type="submit" value="登録">
</form>
</body>
</html>
Node-REDで作成したWebアプリを実行し操作する
Node-REDフローエディタ上でデプロイし、http inノードで設定したパスでURLにアクセスします。適当に操作すると、Datadogへのデータ送信が開始します。
Datadogでの確認
数分かかりますが、通信が確立したことを確認するとDatadogのRUM設定画面の3番「Verify your installation」に「Data is reporting successfully!」と表示されます。
RUMのアプリケーション一覧から、今回作成したNode-REDを選択すると、デフォルトで生成されたモニター画面（ダッシュボード）が表示され、取得したデータが表示されているのが確認できます。
Session & Replaysを選択してみると、こちらにもデータが反映されているのがわかります。
終わりに
どうでしたか？非常に簡単にNode-REDのWebアプリにRUMを仕込むことができることが分かったと思います。時間を見つけて、Functionノードにnode.jsのコードスニペットを埋め込む方式（NPM）が上手くいかなかった原因を探りたいと思います。
以上です。