Browser Real User Monitoring (BRUM)

2 minutes  

目標

このラーニングラボでは、AppDynamicsを使用してブラウザベースのアプリケーションの正常性を監視する方法を学習します。

このラボを完了すると、以下のことができるようになります

  • Controllerでブラウザアプリケーションを作成する
  • Browser Real User Monitoring (BRUM) エージェントを設定してWebアプリケーションの正常性を監視する
  • パフォーマンス問題をトラブルシューティングし、ブラウザ側またはサーバー側のどちらで発生したかにかかわらず根本原因を見つける

ワークショップ環境

ワークショップ環境には2つのホストがあります

  • 1つ目のホストはAppDynamics Controllerを実行しており、以降Controllerと呼びます。
  • 2つ目のホストはラボで使用するSupercar Traderアプリケーションを実行しています。このホストにAppDynamicsエージェントをインストールし、以降Application VMと呼びます。

Controller

このワークショップでは、AppDynamics SE Lab Controllerを使用します。

Controller Controller

Application VM

Supercar TraderはJavaベースのWebアプリケーションです。

Supercar-Traderコレクションの目的は、AppDynamics Controllerの動的なトラフィック(ビジネストランザクション)を生成することです。

Application VM Application VM

Last Modified 2026/02/13

Browser Real User Monitoring (BRUM)のサブセクション

BRUMラボの前提条件

2 minutes  

この演習では、以下のタスクを完了します

  • WebブラウザからAppDynamics Controllerにアクセスする。
  • アプリケーションへのトランザクション負荷を確認する。
  • 必要に応じてアプリケーションとトランザクション負荷を再起動する。

Controllerへのログイン

Ciscoの認証情報を使用してAppDynamics SE Lab Controllerにログインします。

アプリケーションへのトランザクション負荷の確認

アプリケーションフローマップを確認します

  1. last 1 hourの時間枠を選択します。
  2. フローマップに5つの異なるTierが表示されていることを確認します。
  3. 過去1時間にわたって一貫した負荷があったことを確認します。

Verify Load 1 Verify Load 1

ビジネストランザクションのリストを確認します

  1. 左メニューの Business Transactions オプションをクリックします。
  2. 下記に示す11個のビジネストランザクションが表示されていることを確認します。
  3. 過去1時間に何らかの呼び出し数があることを確認します。

注意: Calls 列が表示されない場合は、View Options ツールバーボタンをクリックしてその列を表示できます。

Verify Business transactions Verify Business transactions

Nodeのエージェントステータスを確認します

  1. 左メニューの Tiers & Nodes オプションをクリックします。
  2. Grid View をクリックします。
  3. 各Nodeの App Agent Status が過去1時間で90%以上であることを確認します。

Verify Agents Verify Agents

必要に応じてアプリケーションと負荷生成の再起動

前のステップで実行した確認のいずれかが検証できなかった場合は、Application VMにSSH接続し、以下の手順に従ってアプリケーションとトランザクション負荷を再起動します。

以下のコマンドを使用して、実行中のApache Tomcatインスタンスを停止します。

cd /usr/local/apache/apache-tomcat-9/bin
./shutdown.sh

以下のコマンドを使用して、まだ実行中のアプリケーションJVMがないか確認します。

ps -ef | grep Supercar-Trader

まだ実行中のアプリケーションJVMが見つかった場合は、以下のコマンドを使用して残りのJVMを終了します。

sudo pkill -f Supercar-Trader

以下のコマンドを使用して、アプリケーションの負荷生成を停止します。すべてのプロセスが停止するまで待ちます。

cd /opt/appdynamics/lab-artifacts/phantomjs
./stop_load.sh

Tomcatサーバーを再起動します

cd /usr/local/apache/apache-tomcat-9/bin
./startup.sh

2分待ってから、以下のコマンドを使用してApache Tomcatがポート8080で実行されていることを確認します。

sudo netstat -tulpn | grep LISTEN

以下の画像のような出力が表示され、ポート8080がApache Tomcatによって使用されていることが確認できるはずです。

Restart App 1 Restart App 1

以下のコマンドを使用して、アプリケーションの負荷生成を開始します。

cd /opt/appdynamics/lab-artifacts/phantomjs
./start_load.sh

以下の画像のような出力が表示されるはずです。

Restart App 3 Restart App 3

Last Modified 2026/02/13

ブラウザアプリケーションの作成

2 minutes  

この演習では、以下のタスクを完了します

  • WebブラウザからAppDynamics Controllerにアクセスする。
  • ControllerでBrowser Applicationを作成する。
  • Browser Applicationを設定する。

Controllerへのログイン

Ciscoの認証情報を使用してAppDynamics SE Lab Controllerにログインします。

ControllerでのBrowser Applicationの作成

以下の手順に従って、新しいブラウザアプリケーションを作成します。

Note

下記のステップ5で、ブラウザアプリケーションに一意の名前を作成することが非常に重要です。

  1. トップメニューの User Experience タブをクリックします。
  2. User Experience の下にある Browser Apps オプションをクリックします。
  3. Add App をクリックします。
  4. Create an Application manually オプションを選択します。
  5. Supercar-Trader-Web-<your_initials_or_name>-<four_random_numbers> の形式でブラウザアプリケーションの一意の名前を入力します。
    • 例1: Supercar-Trader-Web-JFK-3179
    • 例2: Supercar-Trader-Web-JohnSmith-0953
  6. OK をクリックします。

Create App Create App

これで Supercar-Trader-Web-##-#### アプリケーションの Browser App Dashboard が表示されるはずです。

  1. 左メニューの Configuration タブをクリックします。
  2. Instrumentation オプションをクリックします。

Instrumentation Instrumentation

以下の手順に従って、ブラウザ監視エージェントによってキャプチャされるデータと一緒にIPアドレスが保存されるようにデフォルト設定を変更します。

  1. Settings タブをクリックします。
  2. 右側のスクロールバーを使用して画面の下部までスクロールします。
  3. Store IP Address チェックボックスをオンにします。
  4. Save をクリックします。

Browser RUM用のController UIの設定について詳しくは、こちらをご覧ください。

IPAddress Config IPAddress Config

Last Modified 2026/02/13

エージェントインジェクションの設定

3 minutes  

この演習では、以下のタスクを完了します

  • JavaScript Agentインジェクションを有効化する。
  • インジェクション用のビジネストランザクションを選択する。

JavaScript Agentインジェクションの有効化

AppDynamicsはJavaScript Agentをインジェクトするさまざまな方法をサポートしていますが、このラボではAuto-Injection方式を使用します。以下の手順に従ってJavaScript Agentの自動インジェクションを有効化します。

  1. 左メニューの Applications タブをクリックし、Supercar-Trader-##アプリケーションにドリルダウンします。
  2. 下部にある左メニューの Configuration タブをクリックします。
  3. User Experience App Integration オプションをクリックします。

BRUM Dash 1 BRUM Dash 1

  1. JavaScript Agent Injection タブをクリックします。
  2. Enable をクリックして青色に切り替えます。
  3. Supercar-Trader-Web-##-#### が選択されたブラウザアプリであることを確認します。前のセクションで作成したアプリケーションを選択してください。
  4. Enable JavaScript Injection の下にある Enable チェックボックスをオンにします。
  5. Save をクリックします。

BRUM Dash 2 BRUM Dash 2

Auto-Injectionが潜在的なビジネストランザクションを検出するまで数分かかります。この間に、以下の手順でBusiness Transaction Correlationを有効化します。新しいAPMエージェントでは、これは自動的に行われます。

  1. Business Transaction Correlation タブをクリックします。
  2. Manually Enable Business Transactions セクションの下にある Enable ボタンをクリックします。
  3. Save をクリックします。

BRUM Dash 3 BRUM Dash 3

インジェクション用のビジネストランザクションの選択

以下の手順に従って、Auto-Injection用のビジネストランザクションを選択します。

  1. JavaScript Agent Injection タブをクリックします。
  2. 検索ボックスに .do と入力します。
  3. すべての9つのBTが表示されるまで Refresh List リンクをクリックします。
  4. 右側のリストボックスからすべてのビジネストランザクションを選択します。
  5. 矢印ボタンをクリックして左側のリストボックスに移動します。
  6. すべてのビジネストランザクションが左側のリストボックスに移動されていることを確認します。
  7. Save をクリックします。

JavaScript Agentの自動インジェクションの設定について詳しくは、こちらをご覧ください。

BRUM Dash 5 BRUM Dash 5

ブラウザアプリケーションに負荷が表示され始めるまで数分待ちます。

Last Modified 2026/02/13

監視とトラブルシューティング - パート1

2 minutes  

この演習では、以下のタスクを完了します

  • Browser Application Overviewダッシュボードをレビューする
  • Browser Application Geoダッシュボードをレビューする
  • Browser Application Usage Statsダッシュボードをレビューする
  • Supercar-Traderアプリケーションのウェブページをナビゲートする

Browser Application Overviewダッシュボードのレビュー

User Experienceダッシュボードに移動し、以下の手順に従ってブラウザアプリケーションのOverviewダッシュボードにドリルダウンします。

  1. 左メニューの User Experience タブをクリックします。
  2. Webアプリケーション Supercar-Trader-Web-##-### を検索します。
  3. Details をクリックするか、アプリケーション名をダブルクリックします。

BRUM Dash 1 BRUM Dash 1

Overviewダッシュボードには、設定可能なウィジェットのセットが表示されます。デフォルトのウィジェットには、アプリケーションパフォーマンスの一般的な高レベル指標を含む複数のグラフとリストが含まれています

  • End User Response Time Distribution
  • End User Response Time Trend
  • Total Page Requests by Geo
  • End User Response Time by Geo
  • Top 10 Browsers
  • Top 10 Devices
  • Page Requests per Minute
  • Top 5 Pages by Total Requests
  • Top 5 Countries by Total Page Requests

ダッシュボードの機能を探索します。

  1. + をクリックして、ダッシュボードに追加するグラフとウィジェットを選択します。
  2. 任意のウィジェットの右下隅をクリックしてドラッグしてサイズを変更します。
  3. 任意のウィジェットの枠線部分を選択して、ダッシュボード上で移動して配置します。
  4. 任意のウィジェットのタイトルをクリックして、詳細ダッシュボードにドリルダウンします。
  5. 任意のウィジェットの右上隅にある X をクリックしてダッシュボードから削除します。

ダッシュボードウィジェットのレイアウトに加えた変更は自動的に保存されます。

Browser Application Overviewダッシュボードについて詳しくは、こちらをご覧ください。

BRUM Dash 2 BRUM Dash 2

Browser Application Geoダッシュボードのレビュー

Geoダッシュボードは、ページロードに基づいて地理的な場所ごとに主要なパフォーマンスメトリクスを表示します。ダッシュボード全体に表示されるメトリクスは、マップまたはグリッドで現在選択されているリージョンのものです。マップビューは、右側のパネルに表示されるキータイミングメトリクスの国に対してラベル付きの負荷円を表示します。ただし、一部の国とリージョンはグリッドビューでのみ表示されます。

Browser Application Geoダッシュボードに移動し、以下に説明するダッシュボードの機能を探索します。

  1. Geo Dashboard オプションをクリックします。
  2. 負荷円の1つをクリックしてリージョンにドリルダウンします。
  3. リージョンの1つにカーソルを合わせてリージョンの詳細を表示します。
  4. ズームスライダーを使用してズームレベルを調整します。
  5. Configuration をクリックしてマップオプションを探索します。
  6. グリッドビューとマップビューを切り替えます。

Browser Application Geoダッシュボードについて詳しくは、こちらをご覧ください。

BRUM Dash 3 BRUM Dash 3

Browser Application Usage Statsダッシュボードのレビュー

Usage Stats ダッシュボードは、ユーザーのブラウザタイプとデバイス/プラットフォームに基づいて集約されたページロード使用データを表示します。

Browser Application Usage Statsダッシュボードは、以下のことを発見するのに役立ちます

  • 合計エンドユーザー応答時間の面で最も遅いブラウザ。
  • 応答ページをレンダリングするのに最も遅いブラウザ。
  • エンドユーザーの大半が使用しているブラウザ。
  • 特定の国やリージョンでエンドユーザーの大半が使用しているブラウザ。

Browser Application Usage Statsダッシュボードに移動し、以下に説明するダッシュボードの機能を探索します。

  1. Usage Stats オプションをクリックします。
  2. Show Versions オプションをクリックします。
  3. 負荷ごとにさまざまなブラウザとバージョンを確認します。
  4. 円グラフのセクションにカーソルを合わせて詳細を確認します。

BRUM Dash 4 BRUM Dash 4

以下の手順を使用して、ブラウザとバージョンごとのその他のメトリクスを探索します。

  1. 右側のスクロールバーを使用してページの下部までスクロールします。
  2. ブラウザとバージョンごとの利用可能なメトリクスを探索します。
  3. 国ごとの利用可能なメトリクスを探索します。

BRUM Dash 5 BRUM Dash 5

Devicesダッシュボードに移動し、以下に説明するダッシュボードの機能を探索します。

  1. Devices オプションをクリックします。
  2. デバイス別の負荷の内訳を確認します。
  3. 円グラフのセクションにカーソルを合わせて詳細を確認します。
  4. デバイス別の利用可能なパフォーマンスメトリクスを探索します。

Browser Application Usage Statsダッシュボードについて詳しくは、こちらをご覧ください。

BRUM Dash 6 BRUM Dash 6

Supercar-TraderアプリケーションのWebページのナビゲート

Browser Real User Monitoringエージェントを設定し、最初の一連の機能を探索したので、Supercar-TraderアプリケーションのWebページをナビゲートして追加の負荷を生成し、ユニークなブラウザセッションを記録しましょう。

Webブラウザでアプリのメインページを開きます。以下の例のURLでは、Application VMのIPアドレスまたは完全修飾ドメイン名を置き換えてください。

http://[application-vm-ip-address]:8080/Supercar-Trader/home.do

アプリケーションのホームページが表示されるはずです。

App Page 1 App Page 1

利用可能なフェラーリのリストを開きます。

  1. トップメニューの Supercars タブをクリックします。
  2. フェラーリのロゴをクリックします。

App Page 2 App Page 2

フェラーリのリストが表示されるはずです。

App Page 3 App Page 3

最初のフェラーリの画像をクリックします。

  1. View Enquiries をクリックします。
  2. Enquire をクリックします。

App Page 4 App Page 4

車に関する問い合わせを送信します。

  1. 問い合わせフォームのフィールドに適切なデータを入力します。
  2. Submit をクリックします。

App Page 5 App Page 5

車を検索し、サイトの閲覧を続けます。

  1. トップメニューの Search タブをクリックします。
  2. 検索ボックスに文字 A を入力し、Search をクリックします。
  3. 残りのタブをクリックしてWebサイトを探索します。

App Page 6 App Page 6

Last Modified 2026/02/13

監視とトラブルシューティング - パート2

2 minutes  

この演習では、以下のタスクを完了します

  • 作成したBrowser Sessionをレビューする。
  • Pages & AJAX Requestsダッシュボードをレビューする。
  • 特定のBase Pageのダッシュボードをレビューする。
  • Browser Snapshotをトラブルシューティングする。

作成したBrowser Sessionのレビュー

セッションは、ユーザーがアプリケーションとやり取りする体験を分析するための時間ベースのコンテキストと考えることができます。ブラウザセッションを調べることで、アプリケーションがどのように動作しているか、ユーザーがどのようにアプリケーションとやり取りしているかを理解できます。これにより、UIの変更やサーバー側のパフォーマンスの最適化など、アプリケーションをより適切に管理および改善できます。

Sessionsダッシュボードに移動し、前の演習でWebアプリケーションのページをナビゲートして作成したブラウザセッションを見つけます。以下の手順に従います。

Note

Webアプリケーションの最後のページにアクセスしてからブラウザセッションがセッションリストに表示されるまで、10分程度待つ必要がある場合があります。10分経ってもセッションが表示されない場合は、使用中のJava Agentのバージョンに問題がある可能性があります。

  1. 左メニューの Sessions タブをクリックします。
  2. Session FieldsリストでIPアドレスのチェックをオンにします。
  3. IPアドレスで作成したセッションを見つけます。
  4. セッションをクリックし、View Details をクリックします。

BRUM Dash 1 BRUM Dash 1

作成したセッションを見つけて開いたら、以下の手順に従ってセッションビューのさまざまな機能を探索します。

注意: ステップ5に示されているように、セッション内のどのページにも View Snapshot リンクがない場合があります。後でこの演習で、リンクがあるセッションを見つけて探索します。

  1. Session Summary リンクをクリックしてサマリーデータを表示します。
  2. 左側に表示されているページをクリックすると、右側にそのページの詳細が表示されます。
  3. 左側のリストで選択したページの完全名を常に確認できます。
  4. ウォーターフォールビューの水平の青いバーをクリックすると、そのアイテムの詳細が表示されます。
  5. 一部のページには、サーバー側でキャプチャされた相関スナップショットへのリンクがある場合があります。
  6. 設定アイコンをクリックして、ページリストに表示される列を変更します。

Browser RUM Sessionsについて詳しくは、こちらをご覧ください。

BRUM Dash 2 BRUM Dash 2

Pages & AJAX Requestsダッシュボードのレビュー

Pages & AJAX Requestsダッシュボードに移動し、そこにあるオプションを確認し、以下の手順に従って特定のBase Pageダッシュボードを開きます。

  1. 左メニューの Pages & AJAX Requests タブをクリックします。
  2. ツールバーのオプションを探索します。
  3. localhost:8080/supercar-trader/car.do ページをクリックします。
  4. Details をクリックしてBase Pageダッシュボードを開きます。

BRUM Dash 3 BRUM Dash 3

特定のBase Pageのダッシュボードのレビュー

Base Pageダッシュボードの上部には、Controller UIの右上隅にあるタイムフレームドロップダウンで選択された期間全体のEnd User Response Time、Load、Cache Hits、Page Views with JS errorsなどの主要なパフォーマンス指標が表示されます。Cache Hitsは、ソースからではなくCDNなどのキャッシュから取得されたリソースを示します。

Timing Breakdownセクションには、ページロードプロセスの各側面に必要な平均時間を表示するウォーターフォールグラフが表示されます。各メトリクスが何を測定するかについての詳細情報は、左側の名前にカーソルを合わせると定義がポップアップ表示されます。より詳細な情報については、Browser RUM Metricsを参照してください。

以下の手順に従って、localhost:8080/supercar-trader/car.do Base Pageの詳細を確認します。

  1. タイムフレームドロップダウンを last 2 hours に変更します。
  2. 主要なパフォーマンス指標を探索します。
  3. ウォーターフォールビューのメトリクスを探索します。
  4. 垂直スクロールバーを使用してページを下にスクロールします。
  5. すべてのKPI Trendsのグラフを探索します。

Base Pageダッシュボードについて詳しくは、こちらをご覧ください。

BRUM Dash 4 BRUM Dash 4

Browser Snapshotのトラブルシューティング

Note

アプリケーションにブラウザスナップショットがない場合があり、その場合はワークフロー全体を実行できません。このセクションを別のデモアプリケーションで実行したい場合は、ブラウザアプリケーション AD-Ecommerce-Browser に切り替えることができます。

Browser Snapshotsリストダッシュボードに移動し、以下の手順に従って特定のBrowser Snapshotを開きます。

  1. Browser Snapshots オプションをクリックします。
  2. End User Response Time 列ヘッダーを2回クリックして、最も長い応答時間を上部に表示します。
  3. 左から3番目の列にグレーまたは青のアイコンがあるブラウザスナップショットをクリックします。
  4. Details をクリックしてブラウザスナップショットを開きます。

BRUM Dash 6 BRUM Dash 6

ブラウザスナップショットを開いたら、詳細を確認し、以下の手順に従って長い応答時間の根本原因を見つけます。

  1. ウォーターフォールビューを確認して、応答時間がどこで影響を受けたかを理解します。
  2. Server Time メトリクスが長くなっていることに注意してください。Server Time のラベルにカーソルを合わせてその意味を理解します。
  3. ブラウザスナップショットに自動的にキャプチャされ相関付けられたサーバー側トランザクションをクリックします。
  4. View Details をクリックして、関連するサーバー側スナップショットを開きます。

BRUM Dash 7 BRUM Dash 7

相関するサーバー側スナップショットを開いたら、以下の手順を使用してパフォーマンス低下の根本原因を特定します。

  1. ブラウザで費やされたトランザクション時間の割合が最小限であることがわかります。
  2. ブラウザとWeb-Portal Tier間のタイミングは、ブラウザからの初期接続から完全な応答が返されるまでを表しています。
  3. JDBCコールが最も時間がかかっていたことがわかります。
  4. Drill Down をクリックして、Enquiry-Services Tier内のコードレベルビューを確認します。

BRUM Dash 8 BRUM Dash 8

Enquiry-Services Tierのスナップショットセグメントを開くと、データベースへのJDBCコールがトランザクションの問題を引き起こしていたことがわかります。

  1. 最も時間がかかった JDBC リンクをクリックして、JDBCコールの詳細パネルを開きます。
  2. JDBC exit callの詳細パネルには、最も時間がかかった特定のクエリが表示されます。
  3. 完全なSQLステートメントとSQLパラメータ値を確認できます。

Browser Snapshotsについて詳しくは、こちらこちらをご覧ください。

BRUM Dash 9 BRUM Dash 9