APM 연계 기능 설정

브라우저에서 발생한 HTTP 요청을 백엔드 트랜잭션과 연결할 수 있습니다. 연결하면 프런트엔드 지표와 백엔드 및 인프라 성능 정보를 함께 조회할 수 있어, 실제 사용자가 겪는 지연과 오류의 원인을 빠르게 파악하고 이해할 수 있습니다.

필수 조건

와탭 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://devote.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 요청에 대해 AP에서 처리된 트랜잭션을 연계하여 확인할 수 있습니다.
- 노드 클릭 시 해당 화면에서 AP 트랜잭션에 대한 상세 정보를 확인할 수 있습니다.

필수 조건​

브라우저 에이전트 설정​

필수 조건

브라우저 에이전트 설정