すべての SPA フレームワーク（特に Angular 1–5 および React）に SPA2 モニタリングを使用することをお勧めします。

このページでは、AngularJS 1 アプリケーションで SPA1 モニタリングを使用し、Ember.js アプリケーションのイベントを手動で報告する方法について説明します。また、このページでは、SPA1 モニタリングでの AngularJS 1 サポートについても説明します。

SPA 要件

  • IE 10 および Edge はサポートされています。IE 10 以降と Edge は、IE 9 またはそれ以前のブラウザとの互換モードにはできません。 

  • 非 AngularJS フレームワークでは、JavaScript エージェント 4.2 以降が必要です。

Angular 1.x アプリケーションの手動インジェクション

Angular 以外のアプリケーションの場合は、ページで他の JavaScript を実行する前に adrum.js をロードする必要があります。ただし、AngularJS 1 を使用している場合は、angular.js の後かつ angular.js がブートストラップされる前に adrum.js を注入する必要があります。

モニタリングがサポートされるバージョンについては、「AngularJS のモニタリングサポート」を参照してください。 

Ember.js アプリケーションの手動インジェクション

Ember.js アプリケーションの場合は、HTTP リクエストからロードされた Web ページとほぼ同じ方法を使用して、JavaScript エージェントを手動で注入します。仮想ページをモニタするには、ページが動的に作成されたときにトリガーされるイベントに基づいて、仮想ページのイベントを手動で開始および終了します。また、仮想ページをモニタして、ページのエラーを報告することもできます。 

次のセクションでは、JavaScript エージェントを注入し、仮想ページをモニタする方法について説明します。

JavaScriptエージェントの手動組み込み

app/index.html ファイルは、Ember.js のすべての動的なページの HTML スケルトンです。したがって、このファイルに JavaScript エージェントを注入して、すべてのページに含まれるようにすることができます。 

<!DOCTYPE html>
<html>
  <head>
    ...
    <script charset='UTF-8'>
        window['adrum-start-time'] = new Date().getTime();
        (function(config){
            config.appKey = '<EUM_APP_KEY>';
            config.adrumExtUrlHttp = 'http://cdn.appdynamics.com';
            config.adrumExtUrlHttps = 'https://cdn.appdynamics.com';
            config.beaconUrlHttp = 'http://col.eum-appdynamics.com';
            config.beaconUrlHttps = 'https://col.eum-appdynamics.com';
            config.xd = {enable : false};
        })(window['adrum-config'] || (window['adrum-config'] = {}));
    </script>
    <script src="//cdn.appdynamics.com/adrum/adrum-latest.js"></script>
  </head>
  <body>
    {{content-for "body"}}
    ...
  </body>
</html>
XML 
<!DOCTYPE html>
<html>
  <head>
    ...
    <script charset='UTF-8'>
        window['adrum-start-time'] = new Date().getTime();
        (function(config){
            config.appKey = '<EUM_APP_KEY>';
            config.adrumExtUrlHttp = 'http://<your-cdn.com>';
            config.adrumExtUrlHttps = 'https://<your-cdn.com>';
            config.beaconUrlHttp = 'http://col.eum-appdynamics.com';
            config.beaconUrlHttps = 'https://col.eum-appdynamics.com';
            config.xd = {enable : false};
        })(window['adrum-config'] || (window['adrum-config'] = {}));
    </script>
    <script src="//<your-cdn.com>/adrum/adrum-latest.js"></script>
  </head>
  <body>
    {{content-for "body"}}
    ...
  </body>
</html>
XML 
<!DOCTYPE html>
<html>
  <head>
    ...
    <script charset='UTF-8'>
        window['adrum-start-time'] = new Date().getTime();
        (function(config){
            config.appKey = '<EUM_APP_KEY>';
            config.adrumExtUrlHttp = 'http://cdn.appdynamics.com';
            config.adrumExtUrlHttps = 'https://cdn.appdynamics.com';
            config.beaconUrlHttp = 'http://col.eum-appdynamics.com';
            config.beaconUrlHttps = 'https://col.eum-appdynamics.com';
            config.xd = {enable : false};
        })(window['adrum-config'] || (window['adrum-config'] = {}));
    </script>
    <script src="//<your-cdn.com>/adrum/adrum.js"></script>
  </head>
  <body>
    {{content-for "body"}}
    ...
  </body>
</html>
XML

仮想ページのモニタリング

ユーザが新しいページを要求すると、ルートハンドラが関連するテンプレートをレンダリングして、仮想ページの新しいコンテンツを形成します。ルートハンドラで、ハンドラが開始および完了したことを示すイベントをリッスンできます。これで、仮想ページのライフタイムが実際にマークされます。仮想ページをモニタするには、activate イベントがトリガーされたときに仮想ページイベントを開始し、deactivate イベントがトリガーされたときに仮想ページを閉じて、完了した仮想ページを報告します。

以下のコードスニペットで、activate および deactivate イベントをリッスンし、作成された仮想ページイベントを報告します。

import Ember from 'ember';
import config from '.././config/environment';

export default Ember.Route.extend({
  beforeEnterAbout: Ember.on('activate', function(){
    console.log('hello about');
    config.aboutVpView = new ADRUM.events.VPageView();
    config.aboutVpView.start();
  }),
  afterEnterRental: Ember.on('deactivate', function(){
    console.log('goodbye about');
    config.aboutVpView.end();
    ADRUM.report(config.aboutVpView);
  })
}); 
JS

仮想ページを使用したエラーのキャプチャ

仮想ページを使用してモニタできるルーティングハンドラでアクションを作成することもできます。たとえば、Ajax コールをモニタする必要があるとします。以下のコードスニペットに示すように、Ajax コールを実行するアクションを作成し、次に仮想ページイベントを使用して結果とエラーをキャプチャできます。 

 actions: {
    makeXhrCall() {
      config.xhrVpView = new ADRUM.events.VPageView();
      config.xhrVpView.start();
      var xmlHttp = new XMLHttpRequest();
      xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState === 4) {
          console.log(xmlHttp.responseText);
          config.xhrVpView.end();
          ADRUM.report(config.xhrVpView);
        }
      };
      xmlHttp.open("GET", "http://localhost:3000", true);
      xmlHttp.send(null);
    }
}
JS

AngularJS 1 のモニタリングサポート

JavaScript エージェントは、AngularJS バージョン 1.x のモニタリングをデフォルトでサポートしています。 

ルーティングエンジン

複数のビューを持つ AngularJS 1 アプリケーションは、1 つの仮想ページから別の仮想ページに移動するためにルートを使用します。ブラウザ RUM を使用して、ngRoute または ui-router. ルーティングエンジンのいずれかを使用する仮想ページをインストゥルメント化できます。

メトリック

仮想ページはブラウザで構築されているため、通常のページビューメトリックを調整する必要があります。基本的に、AngularJS 1 のメトリックは、そのタイムスタンプを使用して、さまざまなルーティングイベント間の時間を相関させる必要があります。メトリックは次のように計算されます。

完全なメトリック名メトリック名の省略形計算式
エンドユーザの応答時間
（ウォーターフォール UI には使用されません）		PLTvirtualPageStart ～ virtualPageEnd
HTMLダウンロード時間DDTviewChangeStart ～ viewChangeEnd
HTML ダウンロードおよび DOM 構築時間回収viewChangeStart ～ viewDOMLoaded
DOM構築時間DPTviewChangeEnd ～ viewDOMLoaded
DOM 待受時間
（ウォーターフォール UI の場合は PLT の代わりに使用されます） 		Dominican Republic（DOM; ドミニカ共和国）viewChangeStart ～ viewDOMLoaded

2 つのルーティングエンジンは少し異なる方法で機能するため、AppDynamics イベントの構成はエンジンに基づいて少しずつ異なります。  

AppDynamics のイベント名ngRoute 同等ui：ルータ同等
virtualPageStartlocationChangeStart
stateChangeStart
viewChangeStartrouteChangeStart
stateChangeStart
viewChangeEndrouteChangeSuccess
stateChangeSuccess
viewDOMLoadedviewContentLoaded
viewContentLoaded （複数回発生することがあります。タイムスタンプは毎回上書きされます）
viewFragmentsLoaded最後の HTML フラグメントのロード時間
xhrRequestsCompleted最後の XHR 要求の応答時間
viewResourcesLoaded最後のリソースのロード時間
virtualPageEndviewContentLoaded、xhrRequestsCompleted,、viewResourcesLoaded の中の最新の 1 つ

ページロードプロセスの視覚化

ページロードプロセスの視覚化は次のとおりです。

SPA Page Load Process Diagram

これらを ブラウザ RUM メトリック に表示される標準ページのメトリックと比較します。

タイミングからのハートビートまたはバックグラウンド要求の除外

仮想ページのタイミングから特定のイベントを除外することができます。除外するには、イベントを挿入する場合に JavaScript エージェントをカスタマイズできます。  

Javascript エージェントファイル adrum.js を追加する前に、次のスニペットをページに追加します。

Option for excluding XHRs

<script type="text/javascript">
(function(config) { 
   (function(spa) {
        (function(angular) {
            (function(vp) {
                vp.xhr = {
                    "exclude": {
                        "urls": {
                            pattern: '.*/dealActiveUsers'
                        }
                    }
                };
            })(angular.vp || (angular.vp = {}));
        })(spa.angular || (spa.angular = {}));
    })(config.spa || (config.spa = {}));
})(window["adrum-config"] || (window["adrum-config"] = {}));
</script>
XML

仮想ページのリソースタイミング収集の有効化

デフォルトでは、AngularJS 1 の仮想ページにはリソース タイミング メトリックが含まれていません。角仮想ページプロパティ includeResTimingInEndUserResponseTiming を true に設定する必要があります。

次の JavaScript 設定は、AngularJS 1 仮想ページのリソースタイミング収集を有効にする方法を示しています。また、この設定では、ページごとの XHR コールの制限値、リソースタイミングのバッファサイズ、ビーコン送信時にリソース タイミング メトリックをクリアするためのフラグも設定します。

window['adrum-config'] = { 
    "xhr": { 
        "maxPerPageView": 10000 
    }, 
    "resTiming": {
        bufSize: 300, 
        "clearResTimingOnBeaconSend": true 
    },
    "spa": {
        "angular": {
            "vp": {
                "metrics": {
                    "includeResTimingInEndUserResponseTiming": true
                }
            }
        }
    }
}
JS

相関サーバ時刻の表示

相関サーバのタイミングがリンクされる通常の HTML ページ タイミングがないため、サーバの時間を表示するには、ダッシュボードまたはスナップショットの仮想ページビューからコンポーネントの XHR 要求にドリルダウンする必要があります。ここにサーバの時刻が表示されます。