이것은 뉴렐릭 세션 리플레이 문제를 직접 진단하기 위한 첫 번째 단계입니다.
여기에 나열된 문제를 찾을 수 없다면 언제든지 New Relic 지원팀 에 문의하실 수 있습니다.
UI에서 리플레이가 보이지 않음
문제
세션 리플레이 기능이 활성화되어 있지만 리플레이를 볼 수 없습니다.
해결책
가능한 몇 가지 수정 사항은 다음과 같습니다.
샘플링 속도를 확인하세요. 재생과 오류 모두에 대한 샘플링이 있습니다.
리플레이를 볼 수 있는 권한이 있는지 확인하세요.
Pro 또는 Pro+SPA 버전의 브라우저 에이전트를 사용하고 있는지 확인하세요. 세션 재생은 Lite 브라우저 에이전트에서 작동하지 않습니다.
브라우저 에이전트가 다음 요구 사항을 충족하는지 확인하세요.
- 에이전트 버전 v1.260.0 이상. 지속적으로 개선을 이루고 있으므로 최신 에이전트 버전으로 업그레이드하는 것이 좋습니다.
- 에이전트 유형: Pro 또는 Pro+SPA. 세션 재생은 Lite 브라우저 에이전트에서 작동하지 않습니다.
- 세션 추적이 활성화되었습니다.
최종 사용자의 브라우저는 세션 리플레이를 기록하는 데 필요한 브라우저 수준 API 지원합니다( MutationObserver 에서 호환성 확인).
오류스 인박스(errors inbox) 에서 조회수를 필터링하여 항상 재생이 가능하도록 하세요. 기본적으로 브라우저 이벤트 데이터는 8일간 저장되지만, 실제 데이터 보존 기간은 계정에 따라 다릅니다.
복사/붙여넣기 배포 방법을 사용하는 경우 에이전트 코드를 업데이트했는지 확인하세요.
APM 구현, 배포 방법을 사용하는 경우 세션 리플레이가 자동으로 활성화될 때까지 기다려야 할 수 있습니다. 여전히 데이터가 보이지 않으면 에이전트를 다시 시작해 보세요.
PageView 이벤트 데이터를 삭제하는 경우 세션 리플레이가 UI 에 표시되지 않을 수 있습니다.
리플레이가 올바르게 나타나지 않습니다
문제
리플레이를 볼 수는 있지만 올바르게 나타나지 않습니다.
이는 CSS 파일이 별도의 도메인에서 호스팅되고 CORS(Cross-Origin Resource Sharing) 보안 조치로 인해 에이전트가 CSS 파일에 액세스하지 못하기 때문일 수 있습니다. 필수 스타일 정보가 누락될 수 있으므로 재생이 불완전하거나 부정확할 수 있습니다.
뒤에서 일어나는 일은 다음과 같습니다.
세션 리플레이는 사용자의 DOM 재구축하여 웹사이트의 구조와 시각적 요소를 캡처합니다. 이를 달성하기 위해 에이전트는 CSS 파일에 액세스하여 스타일 정보를 정확하게 파악합니다. 이러한 스타일은 재생 녹화에 직접 내장되므로 재생 중에 원본 CSS 파일을 참조할 필요가 없습니다.
귀하의 CSS 파일이 별도의 도메인에서 호스팅되는 경우 CORS는 당사 에이전트가 해당 파일에 액세스하는 것을 차단할 수 있습니다.
해결책
CSS 파일에 액세스할 수 있도록 하려면 HTML 코드 내의 <link rel="stylesheet"> 요소에 crossorigin="anonymous" 속성을 추가하세요. 이 속성은 브라우저에 특정 CSS 파일에 대한 교차 원본 액세스를 허용하도록 지시하여 브라우저 에이전트가 스타일 정보를 기록하고 통합할 수 있도록 합니다.
다음은 crossorigin="anonymous" 속성을 추가하는 예입니다.
<link rel="stylesheet" href="assets.yoursite.com/styles.css" crossorigin="anonymous">iframe에서 재생이 보이지 않습니다
문제
세션 리플레이 기능이 활성화되어 있지만 iframe 콘텐츠에 대한 재생 데이터를 볼 수 없습니다.
해결책
iframe 시나리오에서 세션 리플레이의 동작은 iframe의 출처와 브라우저 에이전트의 배치에 따라 달라집니다.
웹 페이지가 자식 iframe이 있는 최상위 창으로 구성되어 있다고 가정할 때 다음과 같은 수정이 가능합니다.
동일 출처 iframe:
- 브라우저 에이전트를 최상위 창에 배치하면 세션 리플레이가 창과 iframe을 모두 캡처합니다.
- iframe에 에이전트 에이전트를 배치하면 세션 리플레이는 iframe에 있는 내용만 캡처합니다.
- 브라우저 에이전트를 최상위 창과 iframe 모두에 배치하면 세션 리플레이는 창과 iframe 모두에서 독립적으로 일어나는 일을 캡처하여 두 개의 별도 세션을 생성합니다.
교차 출처 iframe:
- 브라우저 에이전트를 최상위 창에 배치하면 세션 리플레이는 창에 있는 내용만 캡처합니다. 세션 리플레이에서는 iframe이 공백으로 표시됩니다.
- 브라우저 에이전트를 최상위 iframe에 배치하면 세션 리플레이는 iframe에 있는 내용만 캡처합니다.
세션 리플레이는 <frame> 요소와 호환되지 않습니다.