故障排除
针对 Session Replay 特定问题的故障排除
重放与我的应用程序不匹配
有几种情况会导致重放缓冲播放与您的应用程序外观不匹配。如果您遇到这种情况,以下是一些常见原因及解决方案。
- 您可能正在使用不受支持和/或已弃用的元素,例如
<frame>
(请注意,这与<iframe>
不同)。 - 该元素可能被 隐私配置 阻止(默认情况下,具有类名
sentry-block
或属性data-sentry-block
的元素将被阻止)。
- 复杂的 CSS 选择器可能存在边缘情况,导致样式破坏。如果您遇到此问题,请在 GitHub 上提交问题。
我的 `canvas` 元素没有被捕获
Canvas 在 SDK 版本 >= 7.98.0
中得到支持。请参阅 Canvas 设置文档 以开始使用 Canvas 录制。
如果您使用的是支持的 SDK 版本,但 canvas
元素仍然没有被捕获,请检查您的 canvas
中是否加载了来自外部来源的图像或视频。任何未通过 CORS 批准的来源加载的数据都被认为是不安全的,在尝试使用重放 Canvas 集成时会抛出 SecurityError
。要解决此问题,请为您的图像或视频设置 crossorigin="anonymous"
。这将允许从外部来源加载的图像像从当前来源加载一样在 canvas
中使用。有关跨域访问的更多信息,请参阅 CORS 文档。
重放正在减慢我的 `canvas` 性能
集成需要启用 preserveDrawingBuffer
以从 3D 和 WebGL 画布导出图像。这可能会对画布性能产生负面影响。如果您的画布应用程序因启用 preserveDrawingBuffer
而受到影响,您需要 启用手动快照 并在重新绘制循环中调用 snapshot()
方法。
我在查看重放时,自定义的 CSS/图像/字体/媒体没有显示
重放“视频”实际上是您网站上 HTML 的类似视频的重现。这意味着您网站使用的所有外部资源(CSS/图像/字体)将由相应的 <style>
、<img>
和 <video>
标签渲染。请将 sentry.io
添加到您的 CORS 策略中,以便托管在 sentry.io 上的 iframe 可以获取并显示这些资源。
请注意,只有静态且公开托管的视频(例如,src="./my-video.mp4"
)可以被 Replay 捕获。流式视频等不受支持。
由于 浏览器限制,包含带有链接到您域名的 <use>
标签的 SVG 无法从其他来源访问,即使您已将 sentry.io
添加到您的 CORS 策略中。这是一个已知问题,我们正在努力解决。
为什么我看到的愤怒点击比预期多或少?
如果用户在 7 秒阈值之前停止等待网站响应,您可能会看到的愤怒点击比预期少。这就是为什么您确实看到的愤怒点击问题非常有价值,因为至少连续点击 3 次并在至少 7 秒内继续等待网站响应的用户很可能非常沮丧。
您也可能看到比预期更多的愤怒点击来自不会触发 DOM 变更或页面滚动的按钮(如“打印”和“下载”按钮)。SDK 无法可靠地检测下载或打印是否已启动,因此即使按钮实际上不是“无效”的,也可能会生成慢点击。对于这些情况,您可以使用 slowClickIgnoreSelectors
配置 SDK - 详见 配置。
例如,要忽略应用程序中下载链接的无效和愤怒点击检测:
Sentry.replayIntegration({
slowClickIgnoreSelectors: [
".download",
// Any link with a label including "download" (case-insensitive)
'a[label*="download" i]',
],
});
为什么我看不到完整的 HTTP 请求体或所有头信息?
默认情况下,Replay 会捕获应用程序中所有发出的 fetch 和 XHR 请求的基本信息。这包括 URL、请求和响应体大小、方法和状态码。 目的是限制收集私有数据的可能性。您可以 配置 SDK 以捕获请求体和额外的头信息。
另一个原因可能是格式不支持。我们只捕获基于文本的请求体,包括 JSON、XML、FormData 等数据类型。任何捕获的请求体将被截断为 150k 字符。当我们识别请求体为 JSON 时,我们将尝试在保持有效 JSON 的前提下进行截断。字节、文件或媒体类型的请求体不会被捕获。
更多关于此功能的详细信息可以在 配置页面 中找到。
SDK 使我的网站变慢了。
如果您在网站上遇到性能下降的问题,首先请确保您使用的是最新版本的 SDK,该版本包含最新的错误修复和性能改进。
我们已经确定了两个可能导致性能下降的主要原因,并因此添加了多个性能退化防护措施。这两个原因是具有大量突变的网站(请参阅下面的条目了解更多)和大型控制台消息。
为了缓解这些问题,SDK 版本 7.54.0 将 截断控制台消息 并在页面上有大量突变的情况下禁用 Replay 录制。
如果您在使用最新版本的 SDK 时遇到任何问题,我们希望听到您的反馈。请打开一个 GitHub issue 并描述您的情况。
使用 Session Replay 增加了我的应用程序包大小。
由于浏览器环境的复杂性,Session Replay 需要大量的代码才能正常工作。尽管启用 Session Replay 会为您的应用程序包增加大约 50 KB(压缩后)的大小,但我们认为其带来的好处将超过成本。
我们一直在努力减少包大小。此外,您可以根据具体使用情况采取一些措施来减少 Session Replay 的大小。详见 Tree Shaking 获取更多信息。
我看到消息:“检测到大量突变 (N)。这可能会减慢 Replay SDK 并影响您的客户。”
Sentry SDK 通过几种不同的方式尽量减少潜在的 性能开销。例如,通过跟踪发生的 DOM 突变数量并在检测到大量变化时禁用录制。无论是否安装了 Session Replay,大量同时发生的突变都会减慢网页的速度,但当发生大量突变时,Replay 客户端可能会因为记录每个变化而进一步减速。
如果您在观看重放时看到“检测到大量突变”的消息,这意味着您的页面可能需要优化。例如,包含数千个条目的下拉列表可以重构为虚拟化行,只在 DOM 中渲染可见的行。另一种潜在的解决方案是分页显示结果,并在用户滚动时加载更多数据。SDK 提供了一个 配置项,允许您在停止录制前配置突变限制。
iframe 中的文本未被遮罩
我们的遮罩逻辑不会应用于使用 srcdoc
属性提供的 iframe 内容,而是通过 src
加载的内容。
要隐藏此内容,请按照我们在 Session Replay 隐私 文档中的描述阻止 iframe。
我的浏览器扩展中的重放功能无法工作
这不是一个支持的使用场景。Replay 包是为在网站上运行而设计的,而不是通过浏览器扩展或其他机制加载的外部脚本。实际上,Sentry 的 Session Replay 产品可以帮助开发人员发现第三方 Chrome 扩展导致的难以调试或重现的网站问题。
Apollo GraphQL Client 网络请求的响应数据未被捕获
每当查询完成时,Apollo Client 会通过 AbortController
发送中止信号,以清理并取消所有正在进行的查询。 当这种情况发生时,Replay 无法捕获响应体,因为请求在 Replay 能够访问响应之前就被视为已中止。
为了避免这种情况,可以通过配置您自己的中止信号来禁用 Apollo Client 的这种行为:
const abortController = new AbortController();
const httpLink = createHttpLink({
// ... other options
fetchOptions: {
signal: abortController.signal, // overwrite the default abort signal
},
});
通过这种配置,Replay 能够捕获来自 Apollo Client 请求的响应体。
`console` 调用触发重放录制
使用 captureConsoleIntegration
可能会导致重放像触发异常一样进行录制。您可以使用 beforeErrorSampling
来避免这种行为。
点击错误地被记录为无效点击或愤怒点击
在某些情况下(例如点击按钮播放音频片段),Sentry 会错误地将点击记录为无效点击(注意:愤怒点击是无效点击的一个子集)。作为解决方法,您可以使用 slowClickIgnoreSelector
配置选项来忽略特定选择器的无效点击。
如果您想完全关闭 愤怒点击问题,可以通过进入 Sentry 的 设置 页面,点击“项目”,并选择您想要禁用愤怒点击的项目。从这里,在 "PROCESSING" 标题下选择 "Replays" 并关闭 "Create Rage Click Issues" 选项。