본문으로 건너뛰기

APM 연계 기능 설정

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

필수 조건​

  • 와탭 APM이 설치된 애플리케이션이 필요합니다.

  • 브라우저 모니터링 에이전트에 연계 대상이 되는 AJAX 요청 URL을 설정해야 합니다.

  • 아래 헤더를 HTTP API를 제공하는 서버에서 Access-Control-Allow-Headers 구성 및 설정이 필요할 수 있습니다(중요).

    표. Access-Control-Allow-Headers 구성 및 설정

    정보설명
    x-wtap-poMTID 추적에 사용할 프로젝트 정보
    x-wtap-mstMTID 추적에 사용할 트랜잭션 정보
    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: "{proxy_base_url}",
        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>

  1. 실시간, 과거 데이터 조회가 가능한 AJAX 히트맵에서 클라이언트 레벨에서 발생하는 HTTP 요청을 확인합니다.

    브라우저 대시보드 히트맵

  2. 히트맵을 드래그하여 분석 대상 범위를 정하고 테이블을 확인합니다.

    브라우저 AJAX 분석

    • 클라이언트에서 발생한 AJAX 요청을 사용자 ID, 페이지 URL, AJAX URL 등의 정보를 확인할 수 있고 해당 HTTP 요청에 대해 AP에서 처리된 트랜잭션을 연계하여 확인할 수 있습니다.

      브라우저 AJAX 분석 멀티트랜잭션

    • 노드 클릭 시 해당 화면에서 AP 트랜잭션에 대한 상세 정보를 확인할 수 있습니다.

      액티브 스택

검수 중인 초안 — clio-lua, 2026-10-23 추가
warning
  • 커밋: whatap-front 9c8a9c73733 (MOBILEMON-225, 브라우저 AJAX 분석과 모바일 HTTP 분석의 멀티 트랜잭션 탭이 APM 멀티 트랜잭션 화면을 사용, 작업자 노태경)
  • 상태: 개발자 컨펌 대기.
  • 위 화면 이미지 교체 필요.
  • 최종 머지 직전 본 박스와 이 안내는 제거되고 본문만 남습니다.

AJAX 요청 상세의 멀티 트랜잭션 탭은 APM 트랜잭션 상세의 멀티 트랜잭션 화면과 같은 화면을 사용합니다. 브라우저 요청이 호출 흐름의 시작 노드로 표시되고, 차트 보기와 트리 보기, 표시 설정, 서버 트랜잭션의 DB 호출과 외부 호출 노드를 APM 화면과 같은 방식으로 확인할 수 있습니다.

모바일 앱의 요청을 서버 트랜잭션과 연결하는 방법은 iOS 에이전트 적용 문서를 참조하세요.

최종 수정: