6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

はじめに

image.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 アナリティクス みたいなもの。

なにがうれしいか

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

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

料金

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

image.png

やってみた

前準備

  1. アプリケーションモニターを追加して
    image.png

  2. コードスニペットを発行して
    image.png

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

RUM の概要

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

image.png

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

が確認できるようです。

Apdexスコアとは

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

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

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

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

パフォーマンスタブ

image.png

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

エラーとセッションタブ

image.png

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

ブラウザとデバイスタブ

image.png

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

ユーザージャーニータブ

image.png

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

設定タブ

image.png

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

まとめ

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

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

参考

  1. LightSail上でWordPressを立ち上げてやりました

  2. すみません

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?