アプリケーションのクライアント側のパフォーマンスをモニタリングする Amazon CloudWatch RUM の紹介

## はじめに

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534812/504dbb05-854a-7411-0bc4-404dfed5f8ec.png)


> Amazon CloudWatch RUM は、リアルユーザーモニタリング機能であり、ウェブアプリケーションのクライアント側の問題を特定してデバッグし、エンドユーザーのデジタルエクスペリエンスを強化するのに役立ちます。
> CloudWatch RUM を使用すると、アプリケーションデベロッパーと DevOps エンジニアは、より迅速な解決が可能になることで、クライアント側のパフォーマンスの問題解決に要する平均時間 (MTTR) を短縮することができます。Amazon CloudWatch RUM は、Amazon CloudWatch Synthetics および Amazon CloudWatch Evidently とともに、CloudWatch のデジタルエクスペリエンスモニタリングの一部です。
> 
> CloudWatch RUM を使用すると、さまざまな位置情報、ブラウザ、デバイスの間でアプリケーションのパフォーマンスの様子をほぼリアルタイムで表示できるため、パフォーマンスを最適化することが可能になります。CloudWatch RUM の厳選されたダッシュボードを使用して、ページロードステップ、コアウェブバイタル、JavaScript および Http エラーなど、アプリケーションのパフォーマンスの異常を表示できます。また、どのくらいの数のユーザーセッションが問題の影響を受けるかを理解することで、修正する問題に優先順位をつけることができます。CloudWatch RUM は、使いやすいダッシュボードにエラーメッセージ、スタックトレース、セッションなどの関連するデバッグデータを表示して、パフォーマンスの問題を修正します。CloudWatch RUM コンソールでは、CloudWatch ServiceLens と AWS X-Ray との統合により、クライアント側からバックエンドインフラストラクチャノードへのトレースを簡単に関連付けることもできます。CloudWatch RUM にクライアント側のパフォーマンスデータが追加されたことで、CloudWatch をエンドツーエンドモニタリングに使用できるようになりました。

の記事確認です。

## ひとことで

Webアプリケーションのモニタリングができる [Google アナリティクス](https://www.google.com/analytics/web/?hl=ja) みたいなもの。

## なにがうれしいか

クライアント側の情報やパフォーマンスの問題を確認できる

   - ユーザーセッション
   - ユーザー数
   - 地理的位置
   - ブラウザー
   - エラーメッセージ
   - スタックトレース

## 料金

RUM イベント: 100,000 イベントあたり 1 USD

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534812/1912836c-6e4d-3862-77b6-24144ee04045.png)

https://aws.amazon.com/jp/cloudwatch/pricing/

## やってみた

### 前準備

1. アプリケーションモニターを追加して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534812/2e426c18-def3-1d82-98bd-6ea338b58742.png)

1. コードスニペットを発行して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534812/cc6accd7-a1c3-518d-a589-8cd1bc1fa1e2.png)

1. 適当なWebアプリ[^1]を作ってヘッダーにJavaScript コードスニペットを張り付けて少し動かします......

### RUM の概要

しばらく待つと、Webアプリからデータが送信されて CloudWatch RUM 画面で情報が確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534812/94bf7722-c78e-bb8b-c35b-2ef859c5282d.png)

- ページの読み込み回数
- 平均ページロード速度
- Apdex スコア
- アラーム
- ページのロードとロード時間
- 国別 Apdex
- エラーが発生したセッション
- デバイス別のエラー
- セッション
- Canary

が確認できるようです。

#### Apdexスコアとは

ユーザの満足度を計測する指標で、0 (最も低い満足度)～1 (最も高い満足度) で表されます。

https://docs.newrelic.com/jp/docs/apm/new-relic-apm/apdex/apdex-measure-user-satisfaction/

RUMでは全体のApdexスコアと国別のApdexが確認できるようです。

### RUM アプリケーションモニター

細かい情報を見てみましょう。

#### パフォーマンスタブ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534812/a51f37cf-e531-d6f5-0128-d64ddd31d52f.png)

ページごとに時刻別平均ロード時間、ページの描画時間、内訳が確認できます。

#### エラーとセッションタブ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534812/d59aa073-1b67-4daa-bbc9-c576d971fb74.png)

エラーが確認できるようですが、今回発生させなかったので確認できていません[^2]...

#### ブラウザとデバイスタブ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534812/06d7ffa3-760b-49c7-7b80-d1d2a67b6d44.png)

デバイスとブラウザごとにパフォーマンスが確認できます

#### ユーザージャーニータブ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534812/bc7d490f-baa3-6e66-cbed-2d437adb2a69.png)

ユーザのページ遷移情報を確認できます。が、今回直ページ遷移のみなのでイマイチ分かりませんね。

#### 設定タブ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534812/69ab7ee1-7376-2d8f-7772-f8143baee9fe.png)

RUMの設定内容を確認できます。

## まとめ

スクリプトを仕込むだけでアプリケーションのモニタリングが簡単に行えます。

クライアントの情報やページ遷移情報など、Webアプリ改善のためのinput情報として有益なものが手に入るのでマーケティングの方、企画の方、システム運用者の方など、導入すると色々な方が幸せになれるかもしれません。

## 参考

https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM.html

[^1]: LightSail上でWordPressを立ち上げてやりました
[^2]: すみません