会话录制问题
会话结束几分钟(约 4 分钟)后,录制内容会出现在仪表板中。当用户关闭标签页或浏览器、断开连接(超过 2 分钟)或超过 2 小时(此时会开始一个新会话)时,会话即被视为已结束。每个标签页都会生成一个新的录制,而重新加载现有标签页则不会触发新的录制。
本节旨在帮助您排查会话回放中的常见问题。
回放未显示在列表中
Section titled 回放未显示在列表中在开始调试会话录制之前,请确保您正在捕获所有流量。点击 Sessions 部分中的 Manage 按钮并启用 Capture All。
另一个常见错误是将 tracker 启动了两次,这会导致会话无法被录制。这种情况通常发生在开发者从基于脚本的设置迁移到使用 npm 包时,因此请确保您只使用其中一种方式。
如果您不确定设置是否正确,请打开浏览器的检查器,查看 Network 标签页,看看是否有向您的 IP/域名(如果您使用的是 OpenReplay Cloud,则为 *.openreplay.com)发出的 XHR 请求(查找 “ingest”)。
另一种方法是使用 tracker 的启动回调,并在启动时记录一条消息。
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
在 localhost 中测试
Section titled 在 localhost 中测试OpenReplay 需要公开访问权限来复制您应用的部分资源(CSS、字体和图标),以便正确渲染录制内容。您的站点还必须使用 SSL/HTTPS,否则 tracker 将不会启动。出于这些原因,除非您应用此变通方法,否则会话将不会在 localhost 中被捕获。
站点未使用 HTTPS
Section titled 站点未使用 HTTPS出于安全原因,tracker 仅在使用 SSL (HTTPS) 的 Web 应用上运行。如果您的站点使用的是 HTTP,tracker 将不会启动。
缺少 CSP
Section titled 缺少 CSP如果您看到类似下面的错误,则说明 OpenReplay 由于缺少内容安全策略而无法启动。请参阅此处以了解需要添加的策略。

OpenReplay 被阻止
Section titled OpenReplay 被阻止录制脚本可能被浏览器扩展(例如广告拦截器)阻止。使用浏览器的检查器检查请求是否失败。如果是,请为安装了 OpenReplay 后端的域名(如果您使用的是云服务,则为 openreplay.com)添加例外。
由于浏览器不受支持
Section titled 由于浏览器不受支持当 OpenReplay 在不受支持的浏览器中运行时,会抛出异常。请参阅此处以了解受支持的浏览器列表。
回放无法正确渲染
Section titled 回放无法正确渲染OpenReplay 需要访问资源(例如您的 CSS)才能使回放正常工作。事实上,这些文件会被我们的后端复制并缓存,这样即使您的 Web 应用发生了更改,您也能查看旧的录制内容。这就是为什么您必须确保您的样式(以及图标和字体)是可公开访问的。如果您的资源托管在受限域名(私有或受保护)上,那么 OpenReplay 将无法复制并在回放中使用它们。您可以将它们复制到一个可公开访问的域名,然后使用 resourceBaseHref 选项在 tracker 的构造函数 中指定该域名。
如果您的同源 iFrame 包含嵌套框架,请确保在每个嵌入的框架中使用绝对路径(在指向您的 CSS 文件的 <link> 元素中),或者使用 resourceBaseHref 选项在 tracker 的构造函数 中指定域名。
如果您在 localhost 中进行测试,样式将不会被渲染,因为 OpenReplay 无法访问它们(它们位于您的本地计算机上)。请遵循本指南来解决此问题。
在极少数情况下,回放可能显示为空白(或白色)。虽然页面不会被渲染,但您仍然可以看到用户鼠标的移动。请尝试将 disableStringDict 选项设置为 true,看看这是否对新的录制有帮助。这通常可以解决该问题。
如果您在前端层之上使用了 canvas(具有更高的 zIndex),您可能会在回放已录制的会话时注意到黑屏。这是因为 Web API 目前还不允许我们捕获 alpha 通道。如果您的 Web 应用存在这种情况,请为有问题的 canvas 元素添加 data-openreplay-hidden HTML 属性,以将其从会话录制中完全隐藏。
图片未显示
Section titled 图片未显示与样式不同,图片不会被 OpenReplay 缓存,而是在会话回放期间被检索。因此,它们应该是可公开访问的。如果它们位于 CDN 上,请确保保留图片的旧版本,以便您能够正确回放旧的会话录制。
Iframe
Section titled Iframe如果您的 Web 应用包含 iframe,那么您将无法将其内容作为录制的一部分进行回放。您仍然可以通过包含 tracker.start() 在 iframe 内启动 OpenReplay,但它将被视为一个单独的标签页,这意味着它将被捕获到一个单独的录制中。
回放在子域名之间被破坏
Section titled 回放在子域名之间被破坏分布在多个子域名上的站点会为同一次访问生成多个会话。您可以通过将 sessionHash 传递给 tracker 的 start() 方法将它们拼接成单个录制。sessionHash 可以保存下来,然后从您的跨域存储(例如 cookie)中检索。
// 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)
})
如果无法继续该会话(不存在或已结束),tracker 将自动启动一个新会话。
回放不完整
Section titled 回放不完整这可以在仅访问了一个页面、并在用户导航到另一个页面后立即结束的回放中发现。这通常发生在非单页应用 (SPA) 的网站上。要解决此问题,必须在每个页面上调用 tracker.start()。
如果您不是自托管 OpenReplay,而是使用我们的托管解决方案,那么某些会话可能未被录制,因为对我们服务器的请求可能被阻止。这通常是由广告拦截器、VPN 或浏览器扩展引起的。