세션 추적: 웹 페이지의 수명 주기 탐색

당사의 Session traces UI 웹페이지의 전체 생활주기 동안 최대 10분 동안 로드 및 블록복합 이벤트에 대한 자세한 타임라인을 제공합니다. 세션 URL 또는 세션 트레이스 ID를 선택한 후 상세한 폭포 시각화 및 히트 맵 개요를 사용하여 지표를 조사하고 다음과 관련된 문제를 식별할 수 있습니다.

페이지 로드 타이밍
개별 자산 로드
사용자 상호작용
AJAX 요청
콜백
세션 중 오류 및 기타 이벤트

문제 및 솔루션 식별

one.newrelic.com > Browser > (select an app) > Session traces 으로 이동: 다음은 세션 트레이스에서 탐색할 수 있는 풍부한 정보의 예입니다.

세션 추적은 다음을 이해하는 데 도움이 됩니다.

문제	이를 수행하려면 세션 추적 데이터를 사용하십시오.
백엔드 문제	요청이 시작된 후 백엔드 활동이 완료되고 DOM 로딩 프로세스가 시작될 때까지 걸리는 시간을 확인하세요.
페이지 로드 타이밍 문제	다음과 같은 질문에 답하는 데 도움이 되는 데이터를 탐색합니다. 사용자의 페이지 로드 경험은 어떻습니까? DOM 처리 또는 AJAX 요청이 완료되는 데 얼마나 걸립니까? 한 페이지 로드가 다른 페이지보다 느린 이유는 무엇입니까? 세션 중 개별 이벤트의 컨텍스트는 무엇입니까?
핵심 웹 바이탈	코어 웹 바이탈 에 영향을 미치는 성능 문제를 식별하려면 다음 페인트 및 최대 내용이 포함된 페인트에 대한 블록복합의 타이밍 세그먼트를 살펴보세요.
자바스크립트 이벤트	다음을 이해하기 위해 JavaScript 및 브라우저 이벤트의 순서를 조사하십시오. 어떤 것이 다른 것보다 더 오래 걸리나요? 각 이벤트는 언제 발생합니까?
오류	오류를 정렬하거나 필터링하여 어떤 패턴이 나타나는지 확인합니다. 예를 들어 다음을 기반으로 오류가 증가하는지 확인할 수 있습니다. 브라우저 유형(Google Chrome, Mozilla Firefox 등) 특정 기기 유형(데스크톱, 태블릿, 모바일)

성능을 사용자 경험에 연결하고 상호 작용을 성능에 연결함으로써 사용자 세션의 모든 이벤트를 볼 수 있는 기능은 문제 영역을 정확히 찾아내고 솔루션을 식별하는 데 도움이 될 수 있습니다. 이 정보를 다른 사람들과 공유하기 위해 퍼머링크를 만들 수도 있습니다.

시작하다

세션 추적 기능을 사용하려면 브라우저 모니터링에 Pro 또는 Pro+SPA 에이전트 유형 을 사용하고 있는지 확인하십시오. 앱에 여러 이름을 사용하는 경우 세션 추적은 가장 구체적인 애플리케이션 에만 보고합니다.

브라우저 모니터링은 Resource Timing API 를 지원하는 브라우저에서만 추적을 무작위로 캡처합니다. 세션 추적은 무작위로 샘플링되어 시간당 90개의 비율로 저장됩니다. 한 번에 최대 500개의 트레이스를 페이징할 수 있습니다.

세션 추적 선택

one.newrelic.com > All capabilities > Browser > (select an app) > Session traces: URL 또는 세션 트레이스 ID로 검색하거나 열을 정렬한 후 링크를 클릭하면 대화형 세션 트레이스 세부 정보를 사용할 수 있습니다.

특정 세션 추적을 선택하려면:

one.newrelic.com > All capabilities > Browser > (select a browser app) > Session traces
으)로 이동합니다.
인덱스를 특정 URL 또는 세션 추적 ID로 제한하려면 검색 창을 사용하십시오.
다른 패턴을 찾으려면 열에서 정렬 순서를 변경하십시오.
세션 추적 링크를 클릭한 다음 세부 정보 페이지를 사용하여 세부 정보로 드릴다운합니다.

더 심층적인 분석을 위해 session, sessionTraceId, largestContentfulPaint 등과 같은 속성을 쿼리할 수도 있습니다. 자세한 내용은 브라우저 모니터링 이벤트 데이터 에 대한 설명서와 데이터 사전을 참조하세요.

세션 세그먼트 정의

New Relic에서 복사/붙여넣기 방법을 사용하여 배포된 앱의 경우 브라우저 모니터링에는 페이지 로드 타이밍 프로세스 의 일부로 웹 앱 및 Network 시간의 대기열 시간이 포함됩니다. 이는 브라우저 모니터링이 서버 측 에이전트에 의존하여 자동 주입을 통해 애플리케이션 값을 브라우저 에이전트에 전달하기 때문입니다.

이 백엔드 시간이 브라우저의 관점에서 어떻게 분류되는지에 대한 자세한 정보를 볼 수 있습니다. 세션 추적은 사용 가능한 모든 네트워크 관련 이벤트에 대해 보고하므로 브라우저가 DNS 조회 및 기타 네트워크 이벤트에 시간을 보내는 방식을 사례별로 확인할 수 있습니다.

각 세그먼트에 대한 측정은 세그먼트가 종료된 세션 시간을 나타냅니다. 예를 들어 Page load 이 6.9s 이면 요청이 시작된 후 6.9초 후에 페이지 로드 이벤트가 완료되었음을 의미합니다.

다음 표에서는 세션 추적의 각 세그먼트에 대해 설명하며 이러한 속성에 대한 자세한 내용은 데이터 사전에 대한 링크를 제공합니다.

세션 세그먼트	설명
백엔드	요청이 시작된 시점부터 백엔드 활동이 완료되고 DOM 로드가 시작된 시점까지의 시간입니다.
DOM 처리	요청이 시작된 시점부터 DOM 처리가 완료된 시점까지의 시간입니다.
페이지 로드	요청이 시작된 시점부터 페이지 로드 이벤트가 시작된 시점까지의 시간입니다.
AJAX 대기 중	요청이 시작된 시점부터 AJAX 활동이 종료된 시점까지의 시간입니다.
첫 번째 상호작용	요청이 시작된 시점부터 마우스 클릭 또는 스크롤과 같은 첫 번째 사용자 활동이 기록된 시점까지의 시간입니다.
다음 페인트와의 상호작용(INP)	코어 웹 바이탈: 웹페이지가 클릭이나 탭과 같은 사용자 동작에 시각적으로 얼마나 빨리 반응하는지 측정합니다.
가장 큰 만족스러운 페인트	Core Web Vitals: 뷰포트에 표시되는 가장 큰 콘텐츠 요소의 렌더링 시간입니다.
지속 기간	세션의 총 지속 시간입니다.

느린 JavaScript 실행 및 다시 그리기

세션 추적은 느리게 실행되고 브라우저의 기본 스레드에서 후속 호출 실행을 차단하는 JavaScript 코드의 콜백을 식별하는 데 도움이 됩니다. 이러한 호출은 브라우저가 사용자 작업에 대한 응답으로 페이지를 빠르게 다시 그릴 수 있도록 빠르게 실행되어야 합니다.

세션 추적은 33ms보다 긴 모든 콜백을 강조 표시합니다. 빠른 연속으로 호출되는 경우(예: requestAnimationFrame 루프 내부) 33ms보다 긴 콜백은 프레임 속도를 초당 30프레임 미만으로 줄입니다. 이 속도는 사용자에게 느린 것처럼 보입니다.