:API エラーを診断するためのフロントツーバックトレース機能の使用

ARMS ブラウザ監視の設定

アプリケーションへの同一ドメイン API リクエスト

1. フロントエンドブラウザがバックエンドアプリケーションに接続されていることを確認します。

2. 自動 API レポート機能を有効にするには、[自動 API レポートの無効化] オプションの選択を解除します。

3. enableLinkTrace パラメータを true に設定して、フロントツーバックトレース機能を有効にします。次のサンプルコードは、フロントツーバックトレース機能を有効にする方法の例を示しています。

   <script>
   !(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", enableLinkTrace: true};
   with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
   })(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
   </script>                         

アプリケーションへのクロスドメイン API リクエスト

1. フロントエンドブラウザがバックエンドアプリケーションに接続されていることを確認します。

2. enableLinkTrace パラメータと enableApiCors パラメータを true に設定します。

   <script>
   !(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", 
   enableLinkTrace: true, enableApiCors: true};
   with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
   })(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
   </script>

   重要

   enableApiCors パラメータを true に設定する場合、バックエンドサービスもクロスオリジンリクエストとカスタムヘッダー値をサポートする必要があります。すべてのリクエストが想定どおりに組み合わせて呼び出せることを確認してください。そうでない場合、リクエストは失敗する可能性があります。次のサンプルコードは、NGINX を設定する方法の例を示しています。

   upstream test {
           server 192.168.220.123:9099;
           server 192.168.220.123:58080;
       }
       server {
           listen    5800;
           server_name  192.168.220.123;
           root         /usr/share/nginx/html;
           include /etc/nginx/default.d/*.conf;
           location / {
               proxy_pass http://test;
               proxy_set_header Host $host:$server_port;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Real-PORT $remote_port;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header   EagleEye-TraceID $eagleeye_traceid;
               proxy_set_header   EagleEye-SessionID $eagleEye_sessionid;
               proxy_set_header   EagleEye-pAppName $eagleeye_pappname;
           }

3. 無視メソッドを設定します。詳細については、ignore を参照してください。次のサンプルコードは、無視メソッドを設定する方法の例を示しています。

   let whitelist = ['api.xxx','source3']; // ホワイトリストを設定します。
   let blacklist = ['source2','source6']; // ブラックリストを設定します。
   // ビジネス要件に基づいてブラックリストとホワイトリストを設定できます。return true または return false を指定して、ホワイトリストとブラックリストを有効にするかどうかを決定できます。
   ignore: {
               ignoreApis: [
                   function(str) {   // 無視メソッドを設定します。
                       if (whitelist.includes(str)) {
                           return false;
                       }
                       return true; // true が返された場合、API リクエストは無視されます。
                   }]
            }

   説明

   無視メソッドは、ブラックリストとホワイトリストに似ています。このメソッドは、許可されていないサードパーティリソースリクエストに対するヘッダーの変更を禁止し、リソースリクエストのエラーを防ぎます。

原則

• 自動 API レポートが有効になっていて、API とアプリケーションのドメイン名が同じオリジンを持っている場合、EagleEye-TraceID と EagleEye-SessionID のカスタムヘッダーが API リクエストヘッダーに追加されます。EagleEye-TraceID は、フロントエンドとバックエンドを接続するトレースの識別子です。

• API とアプリケーションのドメイン名が同じオリジンを持っていない場合、カスタムヘッダーは API リクエストヘッダーに追加されません。これにより、アプリケーションは想定どおりにリクエストを送信できます。

• フロントツーバックトレースの設定が有効になっているかどうかを確認するには、ARMS コンソールに移動して API リクエストヘッダーを表示します。EagleEye-TraceID ヘッダーと EagleEye-SessionID ヘッダーが API リクエストヘッダーに含まれている場合、設定は有効になっています。

  警告

  EagleEye-TraceID ヘッダーと EagleEye-SessionID ヘッダーの値は自動的に生成されます。値を手動で設定することはお勧めしません。

  

シナリオとケース

リクエストに予想よりも長い時間がかかる場合、呼び出しタイムラインに基づいて、原因がネットワーク転送であるか、バックエンド呼び出しプロセスであるかを判断できます。また、バックエンドアプリケーションのメソッドスタックをクリックして、リクエストの完全なバックエンドトレースを表示することもできます。この場合、ビジネスに基づいて API エラーの原因を特定できます。

• API がエラーコードを返すか、ビジネスロジックエラーが発生した場合、次の操作を実行してエラーの原因を特定します。

  1. ARMS console にログインします。左側のナビゲーションペインで、ブラウザ監視 > Browser Monitoring を選択します。
  2. ブラウザ監視ページで、上部のナビゲーションバーでリージョンを選択し、管理するアプリケーションの名前をクリックします。

  3. 左側のナビゲーションペインで、[アプリケーション] > API リクエスト を選択します。

  4. API 障害リストセクションの API リンクトレース (上位 20) タブで、関連する API またはトレース ID を見つけて、リンクトレースをクリックします。ブラウザ監視の全体的な応答時間とバックエンドアプリケーションの呼び出しシーケンスチャートを表示できます。

     

  5. 呼び出しタイムラインに基づいて、ネットワーク転送またはバックエンド呼び出しプロセスのどちらに時間がかかっているかを判断します。

  6. バックエンドアプリケーションの メソッドスタック列にある虫眼鏡アイコンをクリックして、リクエストの全体的なバックエンドトレースを表示します。ビジネスに基づいて API エラーの原因を特定できます。

     

• API の応答時間が予想よりも長い場合、次の操作を実行してエラーの原因を特定します。

  1. ARMS console にログインします。左側のナビゲーションペインで、ブラウザ監視 > Browser Monitoring を選択します。
  2. ブラウザ監視ページで、上部のナビゲーションバーでリージョンを選択し、管理するアプリケーションの名前をクリックします。

  3. 左側のナビゲーションペインで、[アプリケーション] > API リクエスト を選択します。

  4. API リンクトレース (上位 20) セクションでは、API は応答時間の降順にソートされます。応答時間が予想よりも長い API またはトレース ID を見つけます。

  5. リンクトレースをクリックします。次に、ブラウザ監視の全体的な応答時間とバックエンドアプリケーションの呼び出しシーケンスチャートを表示します。

     • バックエンドアプリケーションの処理時間が短いが、全体的な応答時間が長い場合、API リクエストのサーバーへの送信からフロントエンドへのデータ返却までに消費される時間が長くなります。この場合、詳細の表示をクリックします。詳細ページで、アクセスリクエストのネットワーク、リージョン、ブラウザ、デバイス、およびオペレーティングシステムを表示します。

     • バックエンドアプリケーションがアクセスリクエストの処理に長い時間がかかる場合、バックエンド処理のパフォーマンスが低下しています。この場合、メソッドスタック列の虫眼鏡アイコンをクリックします。[メソッドスタック] ダイアログボックスで、バックエンドトレースのどの部分が時間のかかっているかを確認して、問題を特定します。