Datadog RUMでNode-REDで作成したWebアプリをモニタリング

## はじめに
本記事では、DatadogのRUMの機能を、Node-REDで作成したWebアプリに仕込む方法について解説します。

## Datadogの設定
DatadogのUX MonitoringメニューからRUM Application Summaryを選択します。
![Screenshot 2023-06-06 at 0.00.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81226/13a268b5-24f3-44f8-6f0d-c721ee442727.png)

New Applicationをクリックします。
![Screenshot 2023-06-06 at 0.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81226/3a9c547d-f961-aae7-9810-084da416c5eb.png)

Application typeはJS（JavaScript）を選択します。Application nameは任意で良いです。（ここでは「Node-RED」としています）
![Screenshot 2023-06-06 at 0.02.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81226/8bbd4575-3743-d970-86b7-100f992e7663.png)

## Node-REDでフロー作成
RUMはWebアプリやモバイルアプリのユーザー利用状況をモニタリングする機能ですので、Node-REDで簡易的なWebアプリを作成します。

Node-REDではFunctionノードの中にnpmモジュールを読み込んで利用することもできますが、試してみたところ上手くDatadogへデータを送れなかったので、今回はHTMLの中にコードスニペットを埋め込むやり方にします。（CDN Sync）

Datadogでデータを見たときに分かるように、環境変数のdd.envに"node-red"を設定します。設定すると左側のコードスニペットに内容が反映されるので、このコードスニペットをコピーします。
![Screenshot 2023-06-06 at 0.03.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81226/1425a7a6-5ee6-b79c-c91e-0d2dd6f97152.png)

Node-REDでhttp inノードとhttp responseノードを配置し、間にhtmlノードをはさみます。
![Screenshot 2023-06-06 at 0.14.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81226/b03e49a0-8869-45a3-fcfc-c149da830c2f.png)

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>
```

![Screenshot 2023-06-06 at 0.05.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81226/b4f7c0b2-f7b2-8627-b00f-bc190d0c7033.png)

## Node-REDで作成したWebアプリを実行し操作する
Node-REDフローエディタ上でデプロイし、http inノードで設定したパスでURLにアクセスします。適当に操作すると、Datadogへのデータ送信が開始します。
![Screenshot 2023-06-06 at 0.06.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81226/302957aa-e076-7caf-1870-8ceea2f111fe.png)

## Datadogでの確認
数分かかりますが、通信が確立したことを確認するとDatadogのRUM設定画面の3番「Verify your installation」に「Data is reporting successfully!」と表示されます。
![Screenshot 2023-06-06 at 0.06.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81226/e2a9844a-d8b4-8fed-35c4-f4548d5cae9a.png)

RUMのアプリケーション一覧から、今回作成したNode-REDを選択すると、デフォルトで生成されたモニター画面（ダッシュボード）が表示され、取得したデータが表示されているのが確認できます。
![Screenshot 2023-06-06 at 0.06.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81226/dbfbc72a-5b33-31cd-299f-727594160376.png)

Session & Replaysを選択してみると、こちらにもデータが反映されているのがわかります。
![Screenshot 2023-06-06 at 0.08.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81226/5e8a4ba5-8284-a384-8d7d-faca5bae5f30.png)

## 終わりに
どうでしたか？非常に簡単にNode-REDのWebアプリにRUMを仕込むことができることが分かったと思います。時間を見つけて、Functionノードにnode.jsのコードスニペットを埋め込む方式（NPM）が上手くいかなかった原因を探りたいと思います。

以上です。