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