APM 連携機能の設定

ブラウザで発生した HTTP リクエストをバックエンドトランザクションと関連付けることができます。
連携すると、フロントエンド指標とバックエンドおよびインフラの性能情報を合わせて確認でき、実際のユーザーが経験する遅延やエラーの原因を迅速に把握し理解することができます。

必要条件

Whatap APM がインストールされたアプリケーションが必要です。
ブラウザモニタリングエージェントで連携対象となる AJAX リクエスト URL を設定する必要があります。
以下のヘッダーは、HTTP API を提供するサーバー側で
Access-Control-Allow-Headers の構成と設定が必要となる場合があります(重要)。

表. Access-Control-Allow-Headers の構成と設定

情報説明
x-wtap-po MTID 追跡に使用するプロジェクト情報
x-wtap-mst MTID 追跡に使用するトランザクション情報
x-wtap-sp1 ページ URL 関連情報の設定

情報	説明
x-wtap-po	MTID 追跡に使用するプロジェクト情報
x-wtap-mst	MTID 追跡に使用するトランザクション情報
x-wtap-sp1	ページ URL 関連情報の設定

ブラウザエージェント設定

連携して追跡する HTTP リクエスト URL を指定します。
ブラウザモニタリングエージェントのインストールスクリプトの config に以下のように設定します。

インストールスクリプトオプション tracingAjaxUrls に、追跡対象の AJAX URL を文字列配列として登録します。

traceSampleRate でマルチトランザクション生成比率を設定できます。

<script>
(function (w, h, _a, t, a, b) {
w = w[a] = w[a] || {
    config: {
    projectAccessKey: "xxxxxxxxxxxxx-xxxxxxxxxxxxx-xxxxxxxxxxxxx",
    pcode: 1,
    sampleRate: 100,
    proxyBaseUrl: "https://rumote.whatap-browser-agent.io/",
    traceSampleRate: 50,
    tracingAjaxUrls: ['http://dev.whatap.io/yard/api/flush', 'http://devote.whatap.io/', /^https?:\/\/localhost(:\d+)?(\/.*)?$/]
    },
};
a = h.createElement(_a);
a.async = 1;
a.src = t;
t = h.getElementsByTagName(_a)[0];
t.parentNode.insertBefore(a, t);
})(window, document, 'script', '${front_rum_url}', 'WhatapBrowserAgent', '');
</script>

リアルタイムおよび過去データを確認できる AJAX ヒットマップで、クライアント側で発生する HTTP リクエストを確認します。
ヒットマップをドラッグして分析対象範囲を指定し、テーブルを確認します。
- クライアント側で発生した AJAX リクエストのユーザー ID、ページ URL、AJAX URL などを確認でき、該当 HTTP リクエストが APM で処理されたトランザクションと連携して確認できます。
- ノードをクリックすると、その画面で APM トランザクションの詳細情報を確認できます。

必要条件​

ブラウザエージェント設定​

必要条件

ブラウザエージェント設定