녹화는 세션이 끝난 뒤 몇 분(약 4분) 후에 대시보드에 표시됩니다. 사용자가 탭이나 브라우저를 닫거나, 연결이 끊기거나(2분 초과), 2시간을 넘기면(이 경우 새 세션이 시작됩니다) 세션이 종료된 것으로 간주됩니다. 탭마다 새 녹화가 생성되며, 기존 탭을 새로고침해도 새 녹화는 생성되지 않습니다.

이 섹션은 세션 리플레이에서 자주 발생하는 문제를 해결하는 데 도움을 드립니다.

세션 녹화 디버깅을 시작하기 전에, 모든 트래픽을 캡처하고 있는지 확인하세요. Sessions 섹션 옆의 Manage 버튼을 클릭하고 Capture All을 활성화합니다.

또 다른 흔한 실수는 트래커를 두 번 시작하는 것으로, 이 경우 세션이 녹화되지 않습니다. 주로 스크립트 기반 설정에서 npm 패키지 사용으로 전환하는 과정에서 발생하므로, 둘 중 하나만 사용하고 있는지 확인하세요.

설정이 올바른지 확실하지 않다면 브라우저의 검사 도구를 열고 Network 탭에서 사용자의 IP/도메인(OpenReplay Cloud를 사용 중이라면 *.openreplay.com)으로 XHR 요청(“ingest”를 찾아보세요)이 전송되는지 확인하세요.

또 다른 방법은 트래커의 start 콜백을 사용해 시작 시 메시지를 로그로 남기는 것입니다.

const tracker = new OpenReplay({
	projectKey: PROJECT_KEY,
});

tracker.start().then(({sessionID}) => console.log("OpenReplay tracker started with session: ", sessionID))
// OR you can use startCallback method
tracker.start({
	startCallback: ({ sessionID }) => console.log("OpenReplay tracker started with session: ", sessionID)
});
// for snippet, just add startCallback to initOpts

OpenReplay가 녹화를 올바르게 렌더링하려면 앱의 리소스(CSS, 글꼴, 아이콘) 일부를 복사할 수 있도록 공개 접근이 가능해야 합니다. 또한 사이트가 SSL/HTTPS를 사용해야 하며, 그렇지 않으면 트래커가 시작되지 않습니다. 이러한 이유로 트래커 생성자에 inlineCss: 3 옵션을 추가해 스타일시트가 (서버에 중앙 캐시되는 대신) 각 리플레이의 일부로 캡처되도록 하지 않는 한, localhost에서는 세션이 캡처되지 않습니다.

보안상의 이유로 트래커는 SSL(HTTPS)을 사용하는 웹 앱에서만 실행됩니다. 사이트가 HTTP라면 트래커가 시작되지 않습니다.

아래와 비슷한 오류가 표시된다면, 콘텐츠 보안 정책(CSP)이 누락되어 OpenReplay를 시작하지 못한 것입니다. 추가해야 할 정책은 여기를 참고하세요.

광고 차단기 같은 브라우저 확장 프로그램이 녹화 스크립트를 차단하고 있을 수 있습니다. 브라우저의 검사 도구로 요청이 실패하는지 확인하세요. 실패한다면 OpenReplay 백엔드가 설치된 도메인(클라우드 서비스를 사용 중이라면 openreplay.com)에 대한 예외를 추가하세요.

OpenReplay는 지원되지 않는 브라우저에서 실행되면 예외를 발생시킵니다. 지원되는 브라우저 목록은 여기를 참고하세요.

OpenReplay가 리플레이를 재생하려면 CSS 같은 리소스에 접근할 수 있어야 합니다. 실제로 이러한 파일은 OpenReplay 백엔드에서 복사되어 캐시되므로, 웹 앱이 변경된 뒤에도 이전 녹화를 볼 수 있습니다. 따라서 스타일(그리고 아이콘과 글꼴)에 공개적으로 접근할 수 있어야 합니다. 공개되어 있더라도 일부 CDN(CloudFlare 등)은 OpenReplay의 캐시 요청을 봇의 요청으로 간주해 차단하기도 합니다. 이런 경우에는 VM의 소스 IP(오픈 소스 에디션 사용 시), 전용 인스턴스(전용 클라우드 플랜 사용 시), 또는 18.197.95.153 및 18.197.221.118 IP(서버리스 클라우드 플랜 사용 시)를 허용 목록에 추가하세요.

에셋이 제한된 도메인(비공개 또는 보호됨)에 호스팅되어 있다면 OpenReplay가 이를 복사해 리플레이에 사용할 수 없습니다. 두 가지 방법이 있습니다.

• (권장) 트래커 생성자에 inlineCss: 3 옵션을 추가하면 스타일시트가 (서버에 중앙 캐시되는 대신) 각 리플레이의 일부로 캡처됩니다
• 또는 에셋을 공개적으로 접근 가능한 도메인에 복사한 다음, 트래커의 생성자에서 resourceBaseHref 옵션으로 해당 도메인을 지정할 수 있습니다.

동일 출처 iFrame 안에 중첩된 프레임이 있다면, 포함된 모든 프레임에서 CSS 파일을 가리키는 <link> 요소에 절대 경로를 사용하거나, 트래커의 생성자에서 resourceBaseHref 옵션으로 도메인을 지정하세요.

localhost에서 테스트 중이라면 OpenReplay가 사용자의 컴퓨터에 있는 스타일에 접근할 수 없으므로 스타일이 렌더링되지 않습니다. 이 가이드를 따라 문제를 해결하세요.

드물게 리플레이가 비어 있거나 흰 화면으로 표시될 수 있습니다. 페이지는 렌더링되지 않지만 사용자의 마우스 움직임은 볼 수 있습니다. disableStringDict 옵션을 true로 설정한 뒤 새 녹화에서 개선되는지 확인해 보세요. 대부분 이 방법으로 해결됩니다.

프런트엔드 레이어 위에(더 높은 zIndex로) 캔버스를 사용하고 있다면, 녹화된 세션을 리플레이할 때 검은 화면이 나타날 수 있습니다. 웹 API가 아직 알파 채널 캡처를 지원하지 않기 때문입니다. 웹 애플리케이션에서 이런 경우에 해당한다면, 문제가 되는 캔버스 요소에 data-openreplay-hidden HTML 속성을 추가해 세션 녹화에서 완전히 숨기세요.

스타일과 달리 이미지는 OpenReplay에 캐시되지 않고 세션 리플레이 중에 가져옵니다. 따라서 이미지에 공개적으로 접근할 수 있어야 합니다. 이미지가 CDN에 있다면, 이전 세션 녹화를 제대로 리플레이할 수 있도록 이미지의 이전 버전을 유지하세요.

웹 앱에 iframe이 포함되어 있다면 녹화에서 iframe의 콘텐츠를 재생할 수 없습니다. tracker.start()를 포함하면 iframe 안에서도 OpenReplay를 시작할 수 있지만, 이는 별도의 탭으로 간주되어 별도의 녹화로 캡처됩니다.

여러 서브도메인에 걸쳐 있는 사이트는 같은 방문에 대해 여러 세션을 생성합니다. 트래커의 start() 메서드에 sessionHash를 전달하면 이를 하나의 녹화로 연결할 수 있습니다. sessionHash는 쿠키 같은 도메인 간 스토리지에 보관해 두었다가 가져올 수 있습니다.

// Initialize the tracker as you would normally do
import { tracker } from '@openreplay/tracker'

tracker.configure({
  projectKey: PROJECT_KEY
})

// or with class instance:
import OpenReplay from '@openreplay/tracker'

const tracker = new OpenReplay({
	projectKey: PROJECT_KEY
})
...
// Make sure the tracker is stopped when passing subdomains and collect the sessionHash
const sessionHash = tracker.stop(); // This can be saved in cookies or passed through URL (if needed)
...
// Initialize another tracker on the new subdomain with the same projectKey
// then Pass the sessionHash to the newly started session
trackerNewDomain.start({ 
  sessionHash, // This can be retrieved from cookies or URL (if needed)
})

세션을 이어갈 수 없는 경우(존재하지 않거나 이미 종료됨) 트래커가 자동으로 새 세션을 시작합니다.

방문한 페이지가 하나뿐이고 사용자가 다른 페이지로 이동하자마자 끝나는 리플레이에서 이를 확인할 수 있습니다. 주로 싱글 페이지 애플리케이션(SPA)이 아닌 웹사이트에서 발생합니다. 이를 해결하려면 모든 페이지에서 tracker.start()를 호출해야 합니다.

OpenReplay를 셀프 호스팅하지 않고 호스팅 솔루션을 사용하는 경우, OpenReplay 서버로 가는 요청이 차단되어 일부 세션이 녹화되지 않을 수 있습니다. 이는 보통 광고 차단기, VPN 또는 브라우저 확장 프로그램 때문에 발생합니다.

이 과정에 대해 궁금한 점이 있으시면 언제든지 Slack으로 문의해 주세요.