跳至主内容
Flashduty
博客

浏览器 RUM 监控是什么？能看到什么，看不到什么

浏览器 RUM 用页面里的 JavaScript SDK 采集真实用户的加载耗时、LCP/INP/CLS、接口耗时和报错。本文讲它采集什么、与拨测和 APM 的区别、有哪些盲区和性能开销。

Flashduty 产品团队

浏览器 RUM 监控是什么？能看到什么，看不到什么

浏览器 RUM（Real User Monitoring，真实用户监控）是嵌在网页里的一段 JavaScript SDK。真实用户访问页面时，它在用户的浏览器里记录页面加载耗时、核心 Web 指标（LCP、INP、CLS）、每个接口和静态资源的耗时、抛出的 JavaScript 错误、用户的点击，以及阻塞主线程的长任务。这些事件按会话归组，带上浏览器、设备、系统、地域和版本号，分批上报到后端供查询。它回答的是“真实用户实际遇到了什么”，这是本地测试和服务端监控都给不出的。

SDK 采集哪些数据

Flashduty 的 Web SDK 采集六类事件。每个事件都带有 view.url、browser.name、device.type、geo.country、env、version 等默认属性，所以任何指标都能按页面、浏览器、地域或版本拆开看。

事件内容
会话一次访问：首个和最后一个页面、是否录制了回放
视图一个页面或路由：Navigation Timing、LCP、INP、CLS、FCP
资源每张图片、脚本、样式表和 XHR/fetch 请求的耗时与状态
错误未捕获异常、控制台错误、网络故障，以及业务代码手动上报的错误
操作点击、表单提交，以及用 addAction 发送的自定义操作
长任务阻塞主线程、可能造成页面卡顿的 JavaScript 任务

完整字段见 Web SDK 数据收集。

原始事件之外，后端还会把相似的错误聚合成一个 Issue，标出影响了多少用户、首次出现在哪个版本。每次发版上传对应的 SourceMap 后，index-q2_vQxih.js:134:36624 这样的压缩堆栈会还原成源文件、函数和行号，上传方法见 源码映射。

RUM 和拨测、APM 的区别

拨测（Synthetic Monitoring）按固定频率，从固定节点运行脚本化的浏览器或 HTTP 请求。没有用户访问时它照样运行，凌晨三点站点挂了也能发现，也适合作为发版前后对比的稳定基线。但它只覆盖写进脚本的路径，用的是拨测节点的网络和机器。

RUM 正好相反。它依赖真实流量，没人访问的页面就没有数据。换来的是覆盖用户实际使用的所有浏览器版本、手机型号、运营商和地域，包括测试时没想到的组合。比如 LCP 只在中低端安卓机加移动网络下变慢，这类问题只有 RUM 能发现。

APM 和分布式追踪从服务端开始。它们能告诉你接口耗时 80 ms，但看不到用户因为一个脚本阻塞渲染而等了 3 秒。浏览器 RUM 可以把两边接起来：在 allowedTracingUrls 里配置 API 域名，SDK 会给这些请求加上 W3C traceparent 请求头，在 RUM 里看到一个慢请求时就能打开对应的后端链路。配置见 分布式追踪。

关心可用性和用户体验的团队，通常不止用其中一种。RUM 替代不了“全站挂了就呼人”的健康检查。

浏览器 RUM 看不到的情况

了解盲区比了解功能列表更有用。

  • 未被采样的会话。 sessionSampleRate 按会话决定是否采集，未命中的会话什么都不上报，错误也不报。采样率 20% 时，五个出错的用户里有四个你看不到。Web SDK 0.3.0 起可以用 sessionOnError 补采出错的会话，各种方案见 采样最佳实践。
  • SDK 初始化之前发生的事。 用 npm 包或 CDN 异步方式接入时，初始化前触发的错误、资源和操作会漏掉。CDN 同步方式放在 <head> 最前面可以全部捕获，代价是阻塞页面加载。
  • 装了广告拦截插件的用户。 部分插件会拦截 SDK 或它的上报请求，这部分会话在数据里直接缺失。
  • 浏览器 API 的差异。 长任务只在 Chromium 内核浏览器上报，Firefox 和 Safari 对 Web 指标的支持不完整。标准版 SDK 不支持 IE，IE 9 到 11 只能用精简的 legacy 版本，只采集无堆栈的未捕获错误、页面加载时间、视图、手动上报的操作与错误。详见 Web SDK 兼容性。
  • 服务端内部。 RUM 能看到请求慢了或返回了 500，服务端为什么这样，要看日志、指标和链路。

SDK 对页面性能的影响

Flashduty 在 Web SDK 性能影响 中公开了基准测试。典型业务页面开启 RUM、资源和长任务采集时（p50）：

指标SDK 带来的增量
SDK 体积gzip 后 50.0 KB
初始化耗时7.8 ms
首屏 FCP+24 ms
10 秒交互窗口内的主线程 CPU+36 ms
每个会话窗口的上报体积30.5 KB

开销大的是会话重放。普通页面增量很小，但在大表格页面上，同一套基准测得 CPU 增加 757 ms、上报约 1.7 MB。sessionReplaySampleRate 应保持在较低水平（文档建议 1 到 10），只在排查问题的页面临时调高。

上报是分批的：批次满 50 条事件或 16 KB、距上次上传满 30 秒、页面卸载时都会触发发送，优先用 Beacon API，关闭标签页时最后一批数据也不会丢。

在 Flashduty 中接入浏览器 RUM

  1. 在 RUM 控制台创建一个 Web 应用，复制 Application ID 和 Client Token。
  2. 安装 SDK。用 npm：npm install @flashcatcloud/browser-rum，在入口文件调用 flashcatRum.init()；没有构建流程的项目用 CDN 代码片段。
  3. 初始化时填写 service、env 和 version。有了版本号，Issue 才能标出“首次出现在哪个版本”，SourceMap 也才能对上。
  4. 选择采样率。文档建议测试环境 100，中小流量生产环境 50 到 100，大流量生产环境 10 到 30。
  5. 打开浏览器开发者工具，确认有发往 browser.flashcat.cloud/api/v2/rum 的请求。数据通常在 2 到 5 分钟内出现在控制台。

完整代码和全部初始化参数见 Web SDK 接入指南。

错误聚合成 Issue 后，可以按应用开启告警。Issue 告警可以投递到 Flashduty 协作空间，按协作空间的分派策略通知值班人；也可以通过 Webhook 推送到你自己的接收地址。只有投递到协作空间才需要开通 On-call。后续链路的一个实际例子是 从用户报错到修复 PR 用了 8 分钟：AI SRE 根据 RUM 提供的会话、版本和还原后的堆栈定位到了问题代码。

除 Web 外，Flashduty RUM 还提供 iOS、Android、鸿蒙、Flutter、React Native、Electron 和微信小程序 SDK，数据模型一致。控制台界面见 RUM 产品页。

相关阅读