RUM 分析看板

概述

Flashduty RUM 分析看板提供了开箱即用的可视化仪表板，自动采集并分析用户会话、性能、资源、错误等多维度数据，助力您全面洞察应用真实运行状况，快速定位性能瓶颈与异常问题，持续优化用户体验。

分析看板主要包含 4 个分析维度：概览、性能分析、异常分析、资源分析

1. 概览 — 关键指标一目了然

概览模块聚焦于应用多维度的核心指标，主要内容包括：

流量指标：监控 PV（页面浏览量）、UV（独立访客数）、会话数，帮助您把握整体访问趋势。

用户分布：结合地理位置、设备类型等信息，洞察用户来源与活跃区域。

健康与性能指标：突出显示三个浏览器性能指标：最大内容绘制、首次输入延迟和累积布局移位。

异常与错误：统计各类型错误率，快速发现潜在风险点，保障应用稳定性。

2. 性能分析 — 全面掌控应用体验

性能分析模块专注于应用加载与交互体验的全链路监控，主要内容包括：

页面性能：监控 FCP、LCP、CLS、FCP 等页面加载核心指标的趋势与样本分布。

长任务：长动画帧渲染更新延迟超过 50 毫秒的情况。

XHR 和 Fetch 请求：分析 XHR 和 Fetch 接口的加载性能，定位慢接口。

静态资源：分析静态资源的加载耗时，定位应用加载时的性能瓶颈。

有关显示数据的更多信息，请参阅RUM 浏览器数据收集。

3. 异常分析 — 快速定位与诊断错误

异常分析模块为您提供全方位的错误监控与诊断能力，它的主要内容有：

页面错误率：发生错误最多的页面，帮助您定位优先需要关注的页面。

热门 issue：影响用户最多的 issue 排行，帮助您定位优先关注的问题。如果您需要了解 issue 聚合策略，可以查看异常聚合。

代码错误：分类展示错误类型。如果您需要深入挖掘，请参阅错误跟踪以调查关键的前端错误并了解新错误何时出现。

接口和资源错误：监控哪些接口和静态资源产生的错误最多。

4. 资源分析 — 精细化资源优化

资源分析模块可帮助您确定哪些资源对您的应用程序影响最大：

资源排行：监控加载最多与最重的资源，识别优化重点。

资源加载时序：监控浏览器 SDK 收集的资源耗时趋势（DNS 解析、TCP 连接、加载耗时等）。

XHR 和 Fetch 请求：区分不同请求类型、方法、和错误状态码的分布趋势。

第三方资源：资源地址（host）与当前页面地址（host）不匹配的资源被识别为第三方资源。

常见问题

为什么部分资源的大小或时序数据为 0？

连接复用 (Keep-Alive)：当资源请求采用 keep-alive 方式保持连接时，DNS 查询和 TCP 连接过程只会在首次请求时发生，后续请求复用同一连接，因此相关数据可能未被记录或为 0。

跨域加载资源：如果资源是以跨域的方式加载，且未配置相关头部信息，浏览器无法采集完整的性能数据。这是导致数据缺失的主要原因。

浏览器兼容性：极少数情况下，某些浏览器可能不支持 Performance API，导致无法获取资源相关的性能数据。

为什么部分资源的`resource_status`为 0？

跨域加载资源：如果资源以跨域方式加载，且未设置跨域访问权限，浏览器将无法获取资源状态信息。

浏览器兼容性：某些浏览器可能不支持 Performance API，导致相关数据无法采集（极少见）。

如何解决跨域资源的数据缺失？

支持采集跨域资源的时序数据

在跨域资源的 HTTP 响应头中添加 Timing-Allow-Origin

Timing-Allow-Origin: *

有关 CORS 的更多信息，请参阅 MDN Web 文档中的Resource Timing API。

支持采集跨域资源的状态码

在跨域资源的 HTTP 响应头中添加 Access-Control-Allow-Origin

Access-Control-Allow-Origin: *

在引用资源的 HTML 标签中添加 crossorigin="anonymous"，如：

有关详细信息，请参阅 MDN Web 文档中的Access-Control-Allow-Origin 标头和crossorigin 属性。

如何采集用户信息

登录态用户识别：对于需要用户登录的应用（如 SaaS 产品、会员系统、电商平台等），您可以参考用户标识采集

设备指纹识别：对于无登录态的应用（如企业官网、营销页面、公开内容平台等），推荐您基于浏览器特征、设备信息等多维数据生成稳定的指纹并上报用户标识

分析看板

概述#

1. 概览 — 关键指标一目了然#

2. 性能分析 — 全面掌控应用体验#

3. 异常分析 — 快速定位与诊断错误#

4. 资源分析 — 精细化资源优化#

常见问题#

为什么部分资源的大小或时序数据为 0？#

为什么部分资源的resource_status为 0？#

如何解决跨域资源的数据缺失？#

如何采集用户信息#

概述