브라우저 모니터링의 세션 추적은 최대 10분 동안 웹 페이지의 전체 수명 주기 동안 로드 및 상호 작용 이벤트에 대한 자세한 타임라인을 제공합니다. 페이지 로드 타이밍, 개별 자산 로드, 사용자 상호 작용, AJAX 요청, 콜백, 오류 및 기타 이벤트는 자세한 폭포수 시각화, 히트 맵 개요 및 해당 세션과 관련된 강조 표시된 메트릭 및 문제를 포함하는 대화형 타임라인에 나타납니다.
문제 및 솔루션 식별
세션 추적은 다음을 이해하는 데 도움이 됩니다.
- DOM 로드 시간, AJAX 요청이 완료될 때까지 기다리는 시간, 사용자와 페이지 상호작용 등 사용자가 페이지 로드 를 경험하는 방식
- New Relic 지표가 최종 사용자의 경험을 반영하는 방법
- JavaScript 및 브라우저 이벤트의 순서는 다른 것보다 오래 걸리며 각 이벤트가 발생하는 경우
- 병목 현상이 발생하는 위치 및 원인
- 세션 중 개별 이벤트에 대한 컨텍스트를 제공하여 한 페이지 로드가 다른 페이지보다 느릴 수 있는 이유
성능을 사용자 경험에 연결하고 상호 작용을 성능에 연결함으로써 사용자 세션의 모든 이벤트에 대한 이 상세하고 직관적인 시각화는 문제 영역을 정확히 찾아내고 솔루션을 쉽게 식별하는 데 도움이 될 수 있습니다.
요구 사항
브라우저 세션 추적 기능을 사용하려면 다음 요구 사항을 충족해야 합니다.
- Pro 또는 Pro+SPA 에이전트 유형 필요
- 에이전트 버전 은 브라우저 모니터링을 지원해야 합니다.
- 앱에 여러 이름을 사용하는 경우 세션 추적은 가장 구체적인 애플리케이션 에만 보고합니다.
브라우저는 Resource Timing API 를 지원하는 브라우저에서만 추적을 무작위로 캡처합니다.
세션 추적 선택
세션 추적 인덱스는 선택한 앱에 대한 시간 선택기 선택을 기반으로 가장 최근의 추적을 나열합니다. 세션 추적은 무작위로 샘플링되어 시간당 90개의 비율로 저장됩니다.
한 번에 최대 500개의 트레이스를 페이징할 수 있습니다. 또한 다음을 포함하여 속성별로 목록을 정렬하고 검색할 수 있습니다.
- 쿼리 문자열 매개변수가 제거된 전체 URL
- 브라우저 유형
- 날짜/시간에 시작됨
- 페이지 로드 시간
one.newrelic.com > Browser > (앱 선택) > Session traces : 브라우저 색인에서 세션 추적을 선택할 수 있습니다.
특정 세션 추적을 선택하려면:
- one.newrelic.com 으로 이동하여 Browser > (앱 선택) > 세션 추적을 클릭합니다 .
- 다른 날짜 또는 기간의 세션 추적을 찾으려면 시간 선택기 를 사용하십시오.
- 인덱스를 특정 유형의 추적으로 제한하려면 검색 창을 사용하십시오.
- 자세한 정보를 보려면 세션 추적의 링크를 선택하십시오.
세션 추적 세부정보 보기
세션 추적 세부 정보 페이지는 추적에 대한 요약 정보, 타이밍 세부 정보가 포함된 히트 맵 및 탐색할 수 있는 이벤트 폭포를 제공합니다. 색상으로 구분된 범례는 웹 페이지의 수명 주기 동안 페이지 로드 이벤트를 식별합니다.
복사/붙여넣기 방법을 사용하여 배포된 앱의 경우 브라우저 모니터링에는 페이지 로드 타이밍 프로세스 의 일부로 웹 앱 및 네트워크 시간의 대기열 시간이 포함됩니다. 이는 브라우저가 서버 측 에이전트에 의존하여 자동 주입을 통해 애플리케이션 값을 브라우저 에이전트에 전달하기 때문입니다.
이 "백 엔드" 시간이 브라우저의 관점에서 어떻게 구분되는지에 대한 자세한 정보를 볼 수 있습니다. 세션 추적은 사용 가능한 모든 네트워크 관련 이벤트에 대해 보고하므로 브라우저가 DNS 조회 및 기타 네트워크 이벤트에 시간을 보내는 방법을 사례별로 확인할 수 있습니다.
one.newrelic.com > Browser > (앱 선택) > Session traces> (추적 선택): 브라우저의 세션 추적 세부 정보를 사용하여 최종 사용자의 웹 페이지 세션 동안 이벤트를 검사하고 문제를 식별합니다.
세션 추적을 탐색하려면 이벤트 스택을 수직으로 스크롤하여 폭포형 차트를 탐색하거나 개별 이벤트를 선택하여 세부 정보를 봅니다.
원하는 경우... | 이게 ... |
|---|---|
이 세션 추적에 대한 웹 페이지 보기 | 추적 링크를 선택합니다. |
특정 시간으로 이동 | 히트 맵에서 시간 표시기 또는 이벤트를 선택합니다. |
개별 이벤트에 대한 세부 정보 보기 | 폭포수 차트에서 이벤트를 선택합니다. 해당하는 경우 여기에서 전체 세부정보 보기 를 선택합니다. |
세션 추적에서 위치 변경 | 히트 맵을 클릭하거나 폭포 차트를 수직으로 스크롤합니다. |
전체 추적 확대 또는 축소 | 더하기를 선택하십시오 또는 마이너스 히트 맵 아래에 있는 아이콘. |
세션 추적 정보 공유 | 양식, 티켓, 이메일 등에 붙여넣을 퍼머링크 를 만드세요. |
세션 세그먼트 정의
중요한 세션 추적 측정은 세션 추적 페이지의 오른쪽 상단 모서리에 표시됩니다. 처음 4개의 측정값은 세션에서 세그먼트가 종료된 시간을 나타냅니다. 예를 들어 Page Load 이 0.202s 이면 요청이 시작된 후 0.202초 후에 페이지 로드 이벤트가 완료되었음을 의미합니다.
세션 세그먼트 | 설명 |
|---|---|
백엔드 | 요청이 시작된 시점부터 백엔드 활동이 완료되고 DOM 로드가 시작된 시점까지의 시간입니다. |
DOM 처리 | 요청이 시작된 시점부터 DOM 처리가 완료된 시점까지의 시간입니다. |
페이지 로드 | 요청이 시작된 시점부터 페이지 로드 이벤트가 시작된 시점까지의 시간입니다. |
AJAX 대기 중 | 요청이 시작된 시점부터 AJAX 활동이 종료된 시점까지의 시간입니다. |
첫 번째 상호작용 | 요청이 시작된 시점부터 마우스 클릭이나 스크롤과 같은 첫 번째 사용자 활동이 기록된 시점까지의 시간입니다. |
지속 기간 | 세션의 총 지속 시간입니다. |
느린 JavaScript 실행 및 다시 그리기
세션 추적은 느리게 실행되고 브라우저의 기본 스레드에서 후속 호출 실행을 차단하는 JavaScript 코드의 콜백을 식별하는 데 도움이 됩니다. 이러한 호출은 브라우저가 사용자 작업에 대한 응답으로 페이지를 빠르게 다시 그릴 수 있도록 빠르게 실행되어야 합니다.
세션 추적은 33ms보다 긴 모든 콜백을 강조 표시합니다. 빠른 연속으로 호출되는 경우(예: requestAnimationFrame 루프 내부) 33ms보다 긴 콜백은 프레임 속도를 초당 30프레임 미만으로 줄입니다. 이 속도는 사용자에게 느린 것처럼 보입니다.