SPA1 モニタリング
このページでは、AngularJS 1 アプリケーションで SPA1 モニタリングを使用し、Ember.js アプリケーションのイベントを手動で報告する方法について説明します。また、このページでは、SPA1 モニタリングでの AngularJS 1 サポートについても説明します。
SPA Requirements
- IE 10 and Edge is supported. IE >=10 and Edge cannot be in compatibility mode with <=IE 9 browsers.
-
For non-AngularJS frameworks, the JavaScript Agent >=4.2 is required.
Manual Injection for Angular 1.x Applications
For non-Angular applications, adrum.js needs to be loaded before any other JavaScript on the page. When you are using AngularJS 1, however, you need to inject adrum.js after angular.js, but before angular.js is bootstrapped.
To learn which Angular versions have monitoring support, see Monitoring Support for AngularJS.
Manual Injection for Ember.js Applications
For Ember.js applications, you manually inject the JavaScript Agent much in the same way you would do for web pages loaded from an HTTP request. To monitor virtual pages, you manually start and end Virtual Page events based on events triggered when pages are dynamically created. You can also monitor virtual pages to report errors for pages.
The following sections will show you how to inject the JavaScript Agent and monitor virtual pages.
Manual Injection of the JavaScript Agent
app/index.html is the HTML skeleton for all dynamics pages in Ember.js. Thus, you can inject the JavaScript Agent in this file so it is included in every page. - Splunk AppDynamics CDN
-
<!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>
- Self-Hosting
-
<!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>
- Shared Hosting
-
<!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>
Monitor Virtual Pages
When a user requests a new page, the route handler renders the associated template to form the new content of the virtual page. You can listen for events in the route handler indicating when the handler is started and completed, which in effect mark the lifetime of the virtual page. To monitor the virtual page, you start a Virtual Page Event when the activate event is triggered, close the Virtual Page when the deactivate event is triggered, and then report the completed virtual page.
The code snippet below listens to the activate and deactivate events and reports the created virtual page event.
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);
})
}); Use Virtual Pages to Capture Errors
You can also create actions in the routing handlers that can be monitored through virtual pages. For example, you might want to monitor Ajax calls. You can create an action that performs the Ajax call and then use a Virtual Page event to capture the results and errors as shown in the code snippet below.
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);
}
}AngularJS 1 のモニタリングサポート
JavaScript エージェントは、AngularJS バージョン 1.x のモニタリングをデフォルトでサポートしています。
ルーティングエンジン
複数のビューを持つ AngularJS 1 アプリケーションは、1 つの仮想ページから別の仮想ページに移動するためにルートを使用します。ブラウザ RUM を使用して、 または https://docs.angularjs.org/api/ngRoute/ ルーティングエンジンのいずれかを使用する仮想ページをインストゥルメント化できます。https://github.com/angular-ui/ui-router/
メトリクス
仮想ページはブラウザで構築されているため、通常のページビューメトリックを調整する必要があります。基本的に、AngularJS 1 のメトリックは、そのタイムスタンプを使用して、さまざまなルーティングイベント間の時間を相関させる必要があります。メトリックは次のように計算されます。
| 完全なメトリック名 | メトリック名の省略形 | 計算式 |
|---|---|---|
| エンドユーザの応答時間（ウォーターフォール UI には使用されません） | PLT | virtualPageStart ～ virtualPageEnd |
| HTMLダウンロード時間 | DDT | viewChangeStart ～ viewChangeEnd |
| HTML ダウンロードおよび DOM 構築時間 | 回収 | viewChangeStart ～ viewDOMLoaded |
| DOM構築時間 | DPT | viewChangeEnd ～ viewDOMLoaded |
| DOM 待受時間（ウォーターフォール UI の場合は PLT の代わりに使用されます） | Dominican Republic（DOM; ドミニカ共和国） | viewChangeStart ～ viewDOMLoaded |
2 つのルーティングエンジンは少し異なる方法で機能するため、Splunk AppDynamics イベントの構成はエンジンに基づいて少しずつ異なります。
| AppDynamics のイベント名 | ngRoute 同等 | ui：ルータ同等 |
|---|---|---|
| virtualPageStart | locationChangeStart | stateChangeStart |
| viewChangeStart | routeChangeStart | stateChangeStart |
| viewChangeEnd | routeChangeSuccess | stateChangeSuccess |
| viewDOMLoaded | viewContentLoaded | （複数回発生することがあります。タイムスタンプは毎回上書きされます） |
| viewFragmentsLoaded | 最後の HTML フラグメントのロード時間 | |
| xhrRequestsCompleted | 最後の XHR 要求の応答時間 | |
| viewResourcesLoaded | 最後のリソースのロード時間 | |
| virtualPageEnd | viewContentLoaded、xhrRequestsCompleted、および viewResourcesLoaded のうち最新のもの | |
ページロードプロセスの視覚化
ページロードプロセスの視覚化は次のとおりです。
これらを ブラウザ RUM メトリック に表示される標準ページのメトリックと比較します。
タイミングからのハートビートまたはバックグラウンド要求の除外
仮想ページのタイミングから特定のイベントを除外することができます。除外するには、イベントを挿入する場合に JavaScript エージェントをカスタマイズできます。
Javascript エージェントファイル を追加する前に、次のスニペットをページに追加します。
<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>仮想ページのリソースタイミング収集の有効化
デフォルトでは、AngularJS 1 の仮想ページにはリソース タイミング メトリックが含まれていません。角仮想ページプロパティ includeResTimingInEndUserResponseTiming を に設定する必要があります。
次の JavaScript 設定は、AngularJS 1 仮想ページのリソースタイミング収集を有効にする方法を示しています。また、この設定では、ページごとの XHR コールの制限値、リソースタイミングのバッファサイズ、ビーコン送信時にリソース タイミング メトリックをクリアするためのフラグも設定します。
window['adrum-config'] = {
"xhr": {
"maxPerPageView": 10000
},
"resTiming": {
bufSize: 300,
"clearResTimingOnBeaconSend": true
},
"spa": {
"angular": {
"vp": {
"metrics": {
"includeResTimingInEndUserResponseTiming": true
}
}
}
}
}