SPA2 モニタリングの設定

SPA2 要件

JavaScript エージェント 4.4.3 以降
コントローラ/EUM サーバ 4.4.3 以降（オンプレミス展開の場合）
SPA2 モニタリングの有効化
IE 10 および Edge がサポートされています。IE 10 以降と Edge は、IE 9 またはそれ以前のブラウザとの互換モードにはできません。
非 AngularJS フレームワークでは、JavaScript エージェント 4.2 以降が必要です。
Angular のサポート：
- Angular 12 SPA は JavaScript エージェント 21.12.0 以降でサポートされています。
- Angular 10-11 SPA は JavaScript エージェント 21.7.0 以降でサポートされています。
- Angular 6-9 SPA は JavaScript Agent 4.5.16 以降でサポートされています。
Vue フレームワークは JavaScript エージェント 24.5.0 以上でサポートされています。

注: JavaScript エージェント API を使用して仮想ページを手動でレポートして名前を付けるには、JavaScript エージェント 4.5 以降を使用する必要があります。JavaScript エージェント 4.4.3 以降では、イベントの手動でのレポート用に JavaScript エージェント API の使用をサポートしていません。

SPA2 モニタリングの有効化/無効化

JavaScript エージェントの設定で、次に示すように spa2 を true に設定し、JavaScript エージェントを挿入します。手動または自動のいずれかのインジェクションを使用できます。spa2 のデフォルト値は false であるため、SPA2 モニタリングを有効にするには、spa2 を true に設定する必要があります。

注: JavaScript エージェントをロードする前に、SPA2 モニタリングの有効化などの構成が設定されているか確認します。

<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};
        config.spa = {
            "spa2": true 
        };
    })(window['adrum-config'] || (window['adrum-config'] = {}));
</script>
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>

SPA2 モニタリングの無効化

SPA2 自動インストゥルメンテーションを無効にするには、spa2 を false に設定するだけです。spa2 のデフォルト値は false ですが、削除するのではなく、設定を false にすることを推奨します。

SPA1 から SPA2 モニタリングへの移行

SPA1 から SPA2 モニタリングに移行するには、次のようにします。

「SPA1 と SPA2 のモニタリング」を参照し、使用例が SPA2 に適していることを確認します。
SPA2 の要件を満たします。
SPA2 モニタリングを有効にします。

SPA2 モニタリング用の取得 API サポート

JavaScript エージェントは、角アプリケーションを除くすべての SPA に対して、デフォルトで取得 API コールをモニタします。

Angular.js および Angular 2-9 アプリケーションの場合、次の手順に従って Fetch API コールがモニタされていることを確認します。

JavaScript エージェントは、デフォルトで取得 API コールをモニタするように設定されています。JavaScript エージェントの設定に次のものが含まれていないことを確認します。
```
config.fetch = false
```
Angular の前に JavaScript エージェントをロードします（推奨ですが、必須ではありません）。
```
<script src="adrum.js"></script>
<script src="angular.js"></script>
```

次の設定を追加して、JavaScript エージェントが Angular アプリケーションを正しくモニタするようにします。

>= バージョン 4.5.15

function(config) {
...
config.isZonePromise = true;
...
})(window['adrum-config'] || (window['adrum-config'] = {}));

<= バージョン 4.5.14

function(config) {
...
config.angular = true;
...
})(window['adrum-config'] || (window['adrum-config'] = {}));