Sentry、Bugsnag & Datadog RUM 桥接
将前端 JavaScript 异常直接关联到 MousePlayer 视频会话录制,加快工程与 QA 工作流程。
1. 问题所在:堆栈轨迹无法展示用户上下文
网站出现未处理的 JavaScript 异常或网络崩溃时,Sentry 等错误监控工具会提供枯燥的堆栈轨迹与浏览器 User-Agent 字符串。但工程师仍会问: “用户在崩溃前刚刚点击了哪个按钮?” 或 “表单中输入了什么数据?”
此 MousePlayer 错误跟踪桥接 会将可视化回放 URL 直接关联到错误报告,自动解决这一问题。发生异常时,工程师只需点击 Sentry 或 Bugsnag 仪表板中的一个链接,就能观看用户屏幕的视频录制,精确到崩溃发生的毫秒。
零开销集成: 桥接在 mp.js内作为后台观察程序静默运行。它自动检测错误跟踪 SDK,不增加可测量开销,也不影响 Core Web Vitals。
2. 启用 & 提供商映射
可通过仪表板界面,或通过 SDK 配置对象以编程方式启用错误跟踪桥接。
方法 A:仪表板启用(无代码)
- 登录 MousePlayer 工作区,打开 您的媒体资源。
- 点击目标网站旁的 设置 / 集成 按钮。
- 在集成窗口中,将 Sentry、Bugsnag & Datadog RUM 桥接 切换为
ON。 - 选择提供商(
sentry、bugsnag或datadog),点击 保存更改。
方法 B:手动配置脚本
如果倾向于硬编码配置,请将 error_bridge_active: true 传入 window.mp_config 对象:
3. SDK 技术执行表
根据所选提供商,MousePlayer 自动执行官方 JavaScript SDK 标签设置方法:
| 提供商 | 执行的 JavaScript 方法 | 注入的元数据键 |
|---|---|---|
| Sentry | window.Sentry.setTag(...) |
mouseplayer_session_url |
| Bugsnag | window.Bugsnag.addMetadata('MousePlayer', { ... }) |
session_url |
| Datadog RUM | window.DD_RUM.setGlobalContextProperty(...) |
mouseplayer_session_url |
4. 在错误报告中查找回放
启用后,每当记录前端崩溃,回放 URL 就会立即出现在错误监控仪表板中。
Sentry 问题详情
在 Sentry 项目中打开任意问题,下滚至 标签 区域。可看到名为 mouseplayer_session_url的标签。也可使用查询搜索栏筛选 Sentry 问题: mouseplayer_session_url:*。
Bugsnag 元数据标签页
在 Bugsnag 错误报告中查看底部导航标签页。会出现一个名为 MousePlayer 的新自定义标签页,其中包含可点击的 session_url 超链接。
Datadog RUM 错误探索器
在 Datadog RUM 中,前往任意已记录错误会话,检查 全局上下文 / 属性 JSON 树。URL 索引在 @mouseplayer_session_url下。
此处提及的所有商标均属于各自所有者。MousePlayer 与这些提供商不存在商业关系。