すべてのプロダクト
Search
ドキュメントセンター

:ブラウザモニタリングをトレース分析のフロントエンドとバックエンドに接続する

最終更新日:Dec 30, 2024

ブラウザモニタリングでは、API の応答時間が分かっても、ネットワーク伝送のパフォーマンスやバックエンドサービスのトレースとパフォーマンスは分かりません。そのため、アプリケーションの API エラーを効率的にトラブルシューティングすることはできません。フロントツーバックトレース機能は、この問題を解決できます。この機能は、API リクエストのフロントエンドとバックエンドのトレースを接続して、コード実行プロセスを再現します。

前提条件

ARMS エージェントは npm を使用してインストールされます。詳細については、npm を使用したブラウザモニタリングの実装を参照してください。

背景情報

ブラウザモニタリングとアプリケーションモニタリングはデフォルトで接続されています。ブラウザモニタリング機能とセッショントレース機能を使用して、エンドツーエンドのリクエストトレースを表示できます。OpenTracing プロトコル(オープンソースのトレース ID、つまり uber-trace-id)を使用する場合は、ブラウザモニタリングの JavaScript 設定をトレース分析のフロントエンドとバックエンドに手動で接続する必要があります。API failure list

パラメータの設定

npm を使用して ARMS エージェントをインストールする場合は、次のパラメータを設定する必要があります。

const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({
    pid:"xxx",     // ポッド ID。
    appType:"web",
    enableLinkTrace:true,
    linkType: 'tracing', // トレースの種類。トレース分析のフロントエンドとバックエンドがブラウザモニタリングにアクセスできるように、値を tracing に設定します。
    enableApiCors: true // ドメイン間でリクエストを送信できるかどうか、ヘッダーをカスタマイズできるかどうかを指定します。デフォルト値: false。このパラメータを true に設定した場合、バックエンドサービスはクロスドメインリクエストとカスタムヘッダー値をサポートする必要があります。
});                      
  • enableApiCors パラメータを true に設定します。この場合、バックエンドサービスはクロスドメインリクエストとカスタムヘッダー値をサポートする必要があります。そうでない場合、次の図に示すように、リクエストは失敗します。Request failed

    リクエストが失敗した場合、次の設定を行うことができます。Node.js アプリケーションの設定を例として使用します。

    // サービスへのクロスドメインアクセスを許可します。
    app.all('*', function (req, res, next) {
      res.header('Access-Control-Allow-Origin', '*');
      res.header('Access-Control-Allow-Headers', 'Content-Type,uber-trace-id'); // linkType パラメータが tracing に設定されている場合、ヘッダー値は uber-trace-id をサポートする必要があります。linkType パラメータが arms に設定されている場合、ヘッダー値は EagleEye-TraceID、EagleEye-SessionID、および EagleEye-pAppName をサポートする必要があります。
      res.header('Access-Control-Allow-Methods', '*');
      next();
    });                    
  • enableLinkTrace パラメータを true に設定します。

    • API リクエストと Web ドメインのオリジンが同じ場合、デフォルトでヘッダーに traceId パススルーが追加され、フロントエンドとバックエンドのトレース分析が実装されます。

    • API リクエストと Web ドメインのオリジンが異なる場合は、enableApiCors パラメータを true に設定し、バックエンドサービスがクロスドメインリクエストとカスタムヘッダー値をサポートする必要があります。

      重要

      すべてのリクエストが適切に調整されていることを確認する必要があります。そうでない場合、リクエストは失敗します。リクエストが失敗した場合は、Node.js アプリケーションの前の例に示すように、パラメータを設定して問題を解決できます。

  • linkType パラメータを tracing に設定します。列挙値を指定する必要があります。

    • デフォルト値は arms です。ARMS バックエンドモニタリングでフロントツーバックトレースを実装するには、この値を使用できます。この場合、ヘッダー値は EagleEye-TraceID、EagleEye-SessionID、および EagleEye-pAppName をサポートする必要があります。

    • トレース分析でフロントツーバックトレースを実装するには、linkType パラメータを tracing に設定します。この場合、ヘッダー値は uber-trace-id をサポートする必要があります。