AJAX 히트맵

Asynchronous JavaScript and XML(AJAX)는 비동기 방식으로 데이터를 교환하며 웹 페이지를 업데이트하는 기술입니다. AJAX는 전체 페이지를 다시 로드하지 않고 페이지 일부만 업데이트하는 좀 더 복잡한 웹페이지를 만들 수 있게 해줍니다. 또한 AJAX를 사용하면 웹페이지 일부를 다시 불러들이는 동안에도 코드가 계속 실행되어, 비동기식으로 작업할 수 있습니다.

AJAX는 사용자 경험을 개선하고 서버로의 요청을 줄이는 등의 장점을 가지고 있습니다. 그러나 AJAX는 브라우저에서 실행되는 JavaScript 코드로 구현되기 때문에 다음과 같은 이유에서 모니터링이 필요합니다.

• AJAX 요청이 제대로 처리되는지 확인해야 합니다.

• AJAX 요청으로 인한 성능 저하를 파악해야 합니다.

• 네트워크 지연, 다운로드 시간 등을 포함해 사용자 체감 성능을 파악해야 합니다.

브라우저 모니터링에서 제공하는 AJAX 히트맵 메뉴에서는 시간에 따른 AJAX 이벤트의 응답 시간을 히트맵 차트로 확인할 수 있습니다. 또한 각 이벤트에 대한 상세 정보를 조회할 수 있습니다. 제공하는 정보는 다음과 같습니다.

• AJAX 이벤트 구간별 세부 시간 정보

• AJAX 요청 URL 및 호출 페이지 정보 등

• 에러 메시지 및 상태 코드

기본 화면 안내

AJAX 히트맵

시간에 따른 AJAX 이벤트의 응답 시간을 분포도 차트로 표현하는 위젯입니다.

• 가로축은 AJAX 이벤트의 종료 시간입니다.

• 세로축은 AJAX 이벤트의 경과 시간입니다.

• 하늘색 → 파란색 → 남색 순으로 정상 AJAX 이벤트를 표현합니다.

• 노란색 → 주황색 → 빨간색 순으로 에러 발생 AJAX 이벤트를 표현합니다. 에러 AJAX 이벤트는 상태 코드가 0이거나 400 이상인 경우입니다. 상태 코드가 0이면 브라우저에서 서버 쪽으로 요청이 전달되지 않은 경우입니다.

AJAX 히트맵 AI 분석

옵션바 오른쪽 끝의 AI 분석 버튼을 클릭하면 히트맵의 분포를 WhaTap AI가 읽고 분석 결과를 알려 줍니다. 페이지 단위가 아니라 개별 요청 단위로 분석하므로, 어떤 엔드포인트가 느린지 좁힐 때 활용할 수 있습니다. 버튼은 아이콘만 표시되며 마우스를 올리면 이름을 툴팁으로 확인할 수 있습니다.

• 영역을 선택하지 않은 경우: 조회한 구간의 히트맵 전체를 읽고 확인이 필요한 시간대와 응답 시간 구간을 제안합니다.

• 영역을 드래그한 경우: 선택한 영역에 포함된 AJAX 이벤트를 분석해 느려진 원인 후보를 제시합니다. 선택 영역은 버튼 왼쪽에 표시되며, 표시된 항목의 X 아이콘을 클릭하면 선택을 해제할 수 있습니다.

• 에러만 보기를 적용한 상태에서 실행하면 그 조건이 분석에도 함께 적용됩니다.

• 조회 구간에 이벤트가 없으면 버튼이 비활성 상태가 되며, 마우스를 올리면 선택한 기간에 데이터가 없습니다. 사유를 확인할 수 있습니다.

노트

AI 분석의 공통 동작과 분석에 사용하는 데이터 범위는 다음 문서를 참고하세요.

AJAX 목록

AJAX 히트맵 차트의 일부 영역을 드래그하면, 드래그한 영역의 AJAX 이벤트 목록과 상세 정보를 확인할 수 있는 AJAX 분석 창이 나타납니다.

다음은 테이블의 컬럼 항목에 대한 설명입니다.

• AJAX URL: AJAX 이벤트 URL

• 시작 시간: AJAX 요청을 시작한 시간

• 경과 시간: AJAX 이벤트 완료까지의 소요 시간

• 페이지 URL: AJAX 이벤트를 호출한 페이지의 URL

• 상태 코드: AJAX 이벤트의 응답 상태 코드

• 에러 메시지: 상태 코드가 0 또는 400 이상인 경우 AJAX 응답값(statusText)

  노트

  상태 코드가 0 또는 400 이상인 AJAX 이벤트는 목록에서 빨간색으로 표시됩니다.

• 브라우저: 최종 사용자가 사용한 브라우저의 종류

노트

컬럼 추가 버튼을 이용해 추가할 수 있는 컬럼 항목에 대한 자세한 내용은 다음 문서를 참조하세요.

AJAX 이벤트 상세 정보 확인하기

AJAX 분석 창에서 각 항목을 선택하면 상세 내용을 조회할 수 있는 AJAX 정보 창이 화면 오른쪽에 나타납니다.

AJAX 이벤트를 불러오는 과정 중 구간별 소요 시간을 그래프 차트로 제공합니다. 이를 통해 AJAX 로드 과정 중 느린 구간을 파악하고 개선하는 데 활용할 수 있습니다.

에러가 발생한 AJAX 목록만을 확인하려면 AJAX 정보 창의 왼쪽 위에 전체 선택 상자에서 에러를 선택하세요.

AJAX 정보

AJAX 이벤트의 속성 정보를 확인할 수 있습니다. AJAX 요청 URL, 최종 사용자의 접속 환경, 접속 페이지 정보, 사용자 ID, 세션 ID, 클라이언트 IP 등의 정보를 조회할 수 있습니다.

노트

와탭은 클라이언트와 관련한 정보를 기본 저장합니다.

AJAX 타이밍 정보

AJAX 이벤트를 불러오는 과정을 다음 단계로 구분하고, 구간별 소요 시간을 파악할 수 있습니다.

• 리다이렉션 시간: 브라우저가 AJAX 요청 시 리다이렉션에 소요한 시간

• 캐싱 시간: 브라우저가 캐시된 AJAX 리소스를 검색하는 데 소요한 시간

• DNS 탐색: 브라우저가 AJAX 요청 도메인을 조회하는데 소요한 시간

• 연결 시간: AJAX 요청 대상 서버와 TCP 연결을 설정하는데 소요된 시간

• SSL 시간: SSL/TLS 핸드셰이크를 완료하는 데 소요된 시간

• 요청 대기 시간: 브라우저의 HTTP 요청 시작 시간부터 서버가 요청을 수신하고 응답을 시작하는 시간까지 소요된 시간으로, 서버 영역의 트랜잭션 처리 시간이 이 구간에 포함됩니다.

• 다운로드 시간: 브라우저가 서버로부터 AJAX 응답 값을 다운로드하는 데 소요한 시간

사용자 세션 분석

사용자 세션을 기준으로 웹 페이지와 상호 작용하면서 발생시킨 이벤트 및 에러 등을 시간순으로 확인할 수 있습니다. 사용자 세션 분석에 대한 자세한 내용은 다음 문서를 참조하세요.

세션 리플레이

사용자가 웹 사이트에서 수행하는 모든 이벤트를 기록하고 재생할 수 있는 기능을 제공합니다. 세션 리플레이 기능을 통해 클릭, 스크롤, 입력, 페이지 전환 등의 사용자 행동을 재현할 수 있습니다. 이를 통해 사용자는 실제로 웹사이트와 어떻게 상호 작용하는지 정확히 파악할 수 있습니다.

• 타임라인 조작이 가능하므로, 이벤트를 클릭하면 세션 리플레이 플레이어의 타임라인이 해당 이벤트 시점으로 이동합니다.

• 상세 아이콘을 클릭하면 우측 드로워를 통해 이벤트 상세정보가 표시됩니다.

노트

참고 문서

• 에이전트 옵션을 통해 세션 리플레이 기능을 적용하는 방법은 다음 문서를 참고하세요.

• 세션 리플레이 기능 사용에 대한 자세한 내용은 다음 문서를 참고하세요.

AJAX 목록 필터링하기

AJAX 목록을 대상으로 검색어를 입력하고 일치하는 대상을 필터링할 수 있습니다. 원하는 조회 기준을 선택한 다음 검색어를 입력하세요. 엔터키를 누르거나 버튼을 선택하면 필터링된 결과를 확인할 수 있습니다.

필터링을 위해 선택할 수 있는 조회 기준은 다음과 같습니다.

• AJAX URL
• 페이지 URL
• 브라우저
• 운영체제
• 디바이스
• 클라이언트 IP
• 사용자 ID

테이블 컬럼 설정하기

AJAX 목록에서 테이블 헤더 컬럼을 감추거나 원하는 항목을 추가할 수 있습니다. 컬럼 순서를 변경할 수도 있습니다. 컬럼 설정 버튼을 선택하세요.

노트

• 설정을 완료한 다음에는 확인 버튼을 선택해야 설정 사항이 테이블에 반영됩니다.

• 검색란에 텍스트를 입력해 원하는 컬럼 항목을 검색할 수 있습니다. 입력한 텍스트와 매칭되는 컬럼 항목만 표시됩니다.

컬럼 추가하기

목록에서 테이블 헤더 컬럼으로 추가할 항목을 선택하세요. 모든 항목을 추가하려면 전체 선택을 선택하세요. 추가할 수 있는 컬럼 항목은 다음과 같습니다.

컬럼 이름	설명
클라이언트 IP	최종 사용자가 사용한 기기의 IP 주소
AJAX 중단	브라우저 레벨에서 AJAX 요청을 중단한 경우 true로 표시
유저 에이전트	브라우저 에이전트가 수집한 최종 사용자의 유저 에이전트 문자열
크기	AJAX 응답값에 대한 용량, 압축이 해제된 실제 용량을 의미
국가	최종 사용자가 위치한 국가 코드
도시	최종 사용자가 위치한 도시 이름
다운로드 시간	브라우저가 서버로부터 AJAX 응답 값을 다운로드하는 데 소요한 시간
디바이스	최종 사용자가 사용한 기기의 종류
리다이렉션 시간	브라우저가 AJAX 요청 시 리다이렉션에 소요한 시간
사용자 ID	임의로 부여한 최종 사용자의 ID
세션 ID	최종 사용자의 세션 ID
연결 시간	AJAX 요청 대상 서버와 TCP 연결을 설정하는데 소요된 시간
요청 대기 시간	브라우저의 HTTP 요청 시작 시간부터 서버가 요청을 수신하고 응답을 시작하는 시간까지 소요된 시간
브라우저	최종 사용자가 사용한 브라우저의 종류
운영체제	최종 사용자가 사용한 기기의 운영체제 종류
종료 시간	AJAX 이벤트 종료 시간
캐싱 시간	브라우저가 캐시된 AJAX 리소스를 검색하는 데 소요한 시간
페이지 타이틀	브라우저로 접속한 HTML 페이지의 제목(title)
DNS 탐색	브라우저가 AJAX 요청 도메인을 조회하는데 소요한 시간
SSL 시간	SSL/TLS 핸드셰이크를 완료하는 데 소요된 시간
유효 연결 유형	브라우저가 페이지를 접속한 후에 측정한 네트워크 성능
유효 대역폭	Mbps 단위의 다운링크(downlink) 속도로, 초당 25킬로비트 단위로 반올림한 값
Delivery Type	리소스가 전달되는 방법(예, cache 또는 navigational-prefetch)
RTT	왕복 시간(RTT)으로 네트워크 요청을 시작한 다음 응답을 받는데 걸리는 시간(밀리초 단위)

노트

와탭은 클라이언트와 관련한 정보를 기본 저장합니다.

컬럼 삭제하기

목록에서 삭제할 컬럼 항목의 체크 박스를 선택 해제하세요. 또는 목록에서 삭제할 항목의 오른쪽에 버튼을 선택하세요.

컬럼 순서 변경하기

목록에 순서를 변경할 항목을 드래그해서 원하는 위치로 이동할 수 있습니다.

설정 사항 초기화하기

변경 사항을 모두 취소하고 초기화하려면 초기화 버튼을 선택하세요.