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.4.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>
JS

SPA2 モニタリングの無効化

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

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

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

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

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

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

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

  1. JavaScript エージェントは、デフォルトで取得 API コールをモニタするように設定されています。JavaScript エージェントの設定に次のものが含まれていないことを確認します。

    config.fetch = false
    JS

  2. Angular の前に JavaScript エージェントをロードします（推奨ですが、必須ではありません）。 

    <script src="adrum.js"></script> <script src="angular.js"></script>
    JS

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

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