トレーシング分析によるフロントエンドとバックエンドのトレース連携 - Application Real-Time Monitoring Service

ブラウザ監視では、API リクエストの応答時間を把握するだけでは不十分です。ネットワークパフォーマンスやバックエンドサービスの完全なトレースを可視化できないためです。これにより、API の問題を迅速かつ正確にトラブルシューティングすることが困難になります。フロントエンドからバックエンドへのトレース機能は、クライアントからバックエンドサービスまで、API リクエストの全行程を連携させることでこの問題を解決し、コード実行の全体像を把握できるようにします。

前提条件

npm を使用してエージェントをインストールします。詳細については、「npm を使用したブラウザ監視の設定」をご参照ください。

背景情報

デフォルトでは、ブラウザ監視とアプリケーションモニタリングは自動的に統合されており、ブラウザ監視とセッション追跡の両方を通じてエンドツーエンドのリクエストトレースデータを表示できます。ただし、OpenTracing プロトコル (オープンソースのトレース ID uber-trace-id を使用) を使用する場合、ブラウザ監視の JavaScript 構成と Managed Service for OpenTelemetry を手動で接続する必要があります。[trace] タブの表には、各呼び出しの詳細が表示されます。この表には、アプリケーション名、ログ時間、ステータス、IP アドレス、呼び出しタイプ、サービス名、呼び出しスタック、スレッドプロファイリング、タイムライン (ミリ秒) の列が含まれます。例えば、呼び出しタイプが frontend のリクエストは 30,889 ms かかり、ステータスが異常 (赤色のドット) である一方、対応する HTTP entry の呼び出しは 68,964 ms かかり、ステータスは正常 (緑色のドット) です。呼び出しスタックまたはスレッドプロファイリング列の虫眼鏡アイコンをクリックすると、詳細情報を表示できます。

パラメーター

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

const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({
    pid:"xxx",     // サイト ID
    appType:"web",
    enableLinkTrace:true,
    linkType: 'tracing', // トレースタイプ。デフォルト値は 'arms' で、独自の ARMS プロトコルを使用し、'EagleEye' プレフィックスのヘッダーを送信します。これを 'tracing' に変更すると、Jaeger プロトコルが使用され、'uber-trace-id' ヘッダーが送信されます。
    enableApiCors: true  // クロスオリジンリクエストとカスタムヘッダーを許可するかどうかを指定します。デフォルト値は false です。true に設定した場合、バックエンドサービスでこれをサポートするように設定する必要があります。
});

enableApiCors:true：ご利用のバックエンドサービスは、クロスオリジンリクエストとカスタムヘッダー値をサポートする必要があります。サポートしていない場合、次のエラーメッセージに示すようにリクエストは失敗します。

[WDS] Live Reloading enabled.                                              client:52
Access to fetch at 'http://xxx.xxx.xxx.155:9000/api' from origin 'http://127.0.0.1:9000' has been blocked by CORS policy: Response to preflight request doesn't pass    arms.html:1
access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors'
to fetch the resource with CORS disabled.
GET http://xxx.xxx.xxx.155:9000/api net::ERR_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：このパラメーターを true に設定した場合：
- API リクエストとページが同一オリジンの場合、トレース ID が自動的にリクエストヘッダーに追加され、フロントエンドからバックエンドへのトレースが有効になります。
- API リクエストとページが異なるオリジンの場合、enableApiCors も true に設定する必要があります。また、ご利用のバックエンドサービスもクロスオリジンリクエストとカスタムヘッダーをサポートする必要があります。
  
  重要
  すべてのリクエストがバックエンドで動作するように正しく設定されていることを確認してください。設定されていない場合、リクエストは失敗する可能性があります。リクエストが失敗した場合は、上記の Node.js の設定例をご参照ください。
linkType：
- arms (デフォルト)：独自の ARMS プロトコルを使用し、EagleEye で始まる複数のヘッダーを送信します。
- tracing：Jaeger プロトコルを使用し、uber-trace-id ヘッダーを送信します。