You need to enable JavaScript to run this app.
文档中心
应用性能监控全链路版

应用性能监控全链路版

复制全文
下载 pdf
使用指南
会话回放
复制全文
下载 pdf
会话回放
WebPro 端监控支持集成 DataFinder 中的会话回放功能,提供 JS 错误、白屏等故障事件的操作过程回放,还原问题发生现场。本文为您介绍如何使用会话回放功能。​
说明​
【公测】WebPro 会话回放和 DataFinder 会话回放功能目前均处于公测状态,且 WebPro 会话回放目前仅支持在华北 2 (北京) 地域使用。​
背景信息​
DataFinder 为您提供会话回放功能,支持 7 × 24 小时静默录制 Web 界面、用户操作、网络请求、控制台及错误日志等多轨内容,详细记录用户体验数据,用于更为精细的分析用户行为。更多详细说明参见:会话回放。​
WebPro 应用集成会话回放插件后,将在每次会话开始时同时录屏,默认为 JS 错误或白屏故障提供录屏上报。支持通过 filter 参数配置添加其他错误事件,例如:静态资源错误、longtask。​
前提条件​
已经联系 DataFinder 技术支持人员购买并开通会话回放功能,否则无法正常接入 WebPro 的会话回放功能。​
使用限制​
  • 基于使用场景和合规考虑,WebPro 会话回放功能目前处于测试阶段,无法保证与其他功能一致的稳定性,需要您评估风险并主动集成对应的 WebPro 插件才能使用,请勿用于稳定性要求较高的应用。​
  • 会话回放基于 DOM 录制工作原理,类似开源 rrweb,请根据您业务的具体场景评估是否满足隐私合规条件。​
  • WebPro 会话回放插件底层引用了 DataFinder 会话回放的 SDK,为避免重复录屏和重复计费,接入 WebPro 会话回放插件后请勿重复接入 Datafinder 会话回放 SDK。​
操作步骤​
步骤一:集成会话回放插件​
通过 SDK 接入 WebPro 应用时,在项目最开始的位置插入以下代码,集成会话回放插件。WebPro SDK 接入的完整步骤参见:WebPro SDK 接入。​
​
import { sessionReplayPlugin } from '@apmplus/integrations/sessionReplay'​
browserClient('init', {​
aid: 0, // APMPlus 应用的 aid,number 类型。​
token: 'xxxxxxxxx', // APMPlus 应用的 AppToken,string 类型。​
integrations: [sessionReplayPlugin({​
token: 'yyyyyyy', // DataFinder 会话回放接入时的 APP Key。​
})],​
})​
​
步骤二:查看会话回放​
当发生对应错误事件后,携带录屏 ID 的事件将出现在会话回放页签。此时,可参考以下步骤查看会话回放和错误相关详细信息。​
  1. 登录 客户端监控。​
  1. 单击目标应用页签中的 WebPro 端监控,前往 WebPro 监控管理页面。​
  1. 在左侧菜单栏选择 全部功能 > 数据探索,单击目标错误页签,例如:JS Errors、Blank Screen。​
​​​
  1. 单击目标事件,前往事件详情页的 会话回放 页签,即可查看会话回放和错误相关详细信息。​
​​​
​
序号​
功能​
说明​
1​
会话录屏​
回放录制的页面视频。单击左下角播放按钮顺序播放或拖动进度条调整播放位置。此外,单击录屏右下角按钮,支持倍速、字幕、热力图和切换全屏功能。​
2​
控制台信息​
会话过程中控制台打印的详细信息。​
3​
网络信息​
会话过程中发生的网络请求信息详情。​
4​
事件列表​
会话过程中发生的事件列表,单击目标事件,将录屏将快速定位到当前事件发生位置,与此同时,页面右下角支持查看当前事件详情。​
此外,勾选 是否只展示错误与 longtask 事件,支持快速筛选问题事件。​
5​
事件详情​
单击目标事件,将在页面右下角显示当前事件的详细信息。​
​
若已经同时接入 DataFinder Web JS SDK,还可以前往 DataFinder 的会话回放页面,查看到同一份关联了 Finder 行为分析数据的录屏。​
说明​
WebPro 会话回放插件底层引用了 DataFinder 会话回放的 SDK,为避免重复录屏和重复计费,接入 WebPro 会话回放插件后请勿重复接入 Datafinder 会话回放 SDK。​
​​​
常见问题​
  1. 为什么本地接入会话回放插件,测试时发现 CSS 样式丢失?​
  • 符合预期。会话回放基于 DOM 录制原理,要求播放器能访问到您 HTML 中的 CSS 文件。但本地开发环境测试时,CSS 往往是临时打包的产物,平台无法正常获取。因此,建议您前往业务预发环境进行测试,以确保静态资源在线上可访问。​
  1. 为什么接入会话回放插件后,部分事件并没有携带录屏 ID,且数据探索中对应事件的详情页也不会显示会话回放页签?​
  • 错误发生时间早于录屏发生时间或会话持续时间超长时,可能存在部分事件没有携带录屏 ID 的情况,此时,对应事件详情页也不会显示会话回放页签。例如:用户访问了网页后切换页签,将会话隐藏到后台,过两天重新打开的情况。​
最近更新时间:2026.02.10 16:25:44
这个页面对您有帮助吗?
有用
有用
无用
无用