> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flashcat.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# Web

> 本文档详细介绍 Flashduty RUM 分析看板的功能和使用方法

## 概述

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

分析看板主要包含以下四个分析维度：

<CardGroup cols={2}>
  <Card title="概览" icon="gauge">
    关键指标一目了然
  </Card>

  <Card title="性能分析" icon="bolt">
    全面掌控应用体验
  </Card>

  <Card title="异常分析" icon="bug">
    快速定位与诊断错误
  </Card>

  <Card title="资源分析" icon="database">
    精细化资源优化
  </Card>
</CardGroup>

## 概览

<Frame caption="RUM 分析看板 - 概览">
  <img src="https://docs-cdn.flashcat.cloud/images/png/644c1920abde554209568685cda0ea78.png" alt="RUM 分析看板概览" />
</Frame>

概览模块聚焦于应用多维度的核心指标：

| 指标类型        | 说明                                              |
| ----------- | ----------------------------------------------- |
| **流量指标**    | 监控 PV（页面浏览量）、UV（独立访客数）、会话数，把握整体访问趋势             |
| **用户分布**    | 结合地理位置、设备类型等信息，洞察用户来源与活跃区域                      |
| **健康与性能指标** | 显示核心 Web 指标：LCP（最大内容绘制）、FID（首次输入延迟）、CLS（累积布局偏移） |
| **异常与错误**   | 统计各类型错误率，快速发现潜在风险点                              |

## 性能分析

<Frame caption="RUM 分析看板 - 性能分析">
  <img src="https://docs-cdn.flashcat.cloud/images/png/4a996a5bf76addc6776ffb3865832a35.png" alt="RUM 性能分析" />
</Frame>

性能分析模块专注于应用加载与交互体验的全链路监控：

* **页面性能**：监控 FCP、LCP、CLS 等页面加载核心指标的趋势与样本分布
* **长任务**：[长动画帧](https://developer.chrome.com/docs/web-platform/long-animation-frames#long-frames-api)渲染更新延迟超过 50 毫秒的情况
* **XHR 和 Fetch 请求**：分析接口的加载性能，定位慢接口
* **静态资源**：分析静态资源的加载耗时，定位应用加载时的性能瓶颈

<Tip>
  有关显示数据的更多信息，请参阅 [数据收集](/zh/rum/others/data-collection)。
</Tip>

## 异常分析

<Frame caption="RUM 分析看板 - 异常分析">
  <img src="https://docs-cdn.flashcat.cloud/images/png/0f684c005cecff6e87d84aceb4ceb1ef.png" alt="RUM 异常分析" />
</Frame>

异常分析模块提供全方位的错误监控与诊断能力：

* **页面错误率**：发生错误最多的页面，帮助您定位优先需要关注的页面
* **热门 Issue**：影响用户最多的 Issue 排行，详见 [异常聚合](/zh/rum/error-tracking/error-aggregation)
* **代码错误**：分类展示错误类型，详见 [异常追踪](/zh/rum/error-tracking/overview)
* **接口和资源错误**：监控哪些接口和静态资源产生的错误最多

## 资源分析

<Frame caption="RUM 分析看板 - 资源分析">
  <img src="https://docs-cdn.flashcat.cloud/images/png/5b0bfbf8b4aec4418e26d0e158b8d80c.png" alt="RUM 资源分析" />
</Frame>

资源分析模块帮助您识别对应用影响最大的资源：

* **资源排行**：监控加载最多与最重的资源，识别优化重点
* **资源加载时序**：监控资源耗时趋势（DNS 解析、TCP 连接、加载耗时等）
* **XHR 和 Fetch 请求**：区分不同请求类型、方法和错误状态码的分布趋势
* **第三方资源**：资源地址（host）与当前页面地址（host）不匹配的资源被识别为第三方资源

### 流量分布

流量分布模块帮助您分析自有资源与第三方资源的请求情况，识别外部依赖对应用性能的影响。

该模块包含以下三个部分：

| 部分       | 说明                                                                           |
| -------- | ---------------------------------------------------------------------------- |
| **资源列表** | 按域名（Host）聚合展示资源的请求数量、P90/P50 耗时、请求成功率和资源提供商类别（自有资源或第三方）。支持按域名正则筛选和按资源提供商类别筛选 |
| **耗时趋势** | 以折线图展示自有资源与第三方资源的 P90 耗时对比趋势，帮助您判断第三方资源是否拖慢了整体加载速度                           |
| **流量占比** | 以饼图展示各第三方域名的请求量占比，直观了解流量在第三方服务间的分布情况                                         |

<Tip>
  您可以在资源列表中点击全屏按钮查看更详细的数据，并通过排序功能快速定位耗时最长或请求量最大的域名。
</Tip>

## 常见问题

<AccordionGroup>
  <Accordion title="为什么部分资源的大小或时序数据为 0？">
    可能有以下原因：

    1. **连接复用 (Keep-Alive)**：当资源请求采用 keep-alive 方式保持连接时，DNS 查询和 TCP 连接过程只会在首次请求时发生，后续请求复用同一连接

    2. **跨域加载资源**：如果资源以跨域方式加载且未配置相关头部信息，浏览器无法采集完整的性能数据（主要原因）

    3. **浏览器兼容性**：极少数情况下，某些浏览器可能不支持 Performance API
  </Accordion>

  <Accordion title="为什么部分资源的 resource_status 为 0？">
    1. **跨域加载资源**：如果资源以跨域方式加载且未设置跨域访问权限，浏览器将无法获取资源状态信息

    2. **浏览器兼容性**：某些浏览器可能不支持 Performance API（极少见）
  </Accordion>

  <Accordion title="如何解决跨域资源的数据缺失？">
    **1. 采集跨域资源的时序数据**

    在跨域资源的 HTTP 响应头中添加：

    ```
    Timing-Allow-Origin: *
    ```

    详见 MDN 文档 [Resource Timing API](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API/Resource_timing#cross-origin_timing_information)。

    **2. 采集跨域资源的状态码**

    在跨域资源的 HTTP 响应头中添加：

    ```
    Access-Control-Allow-Origin: *
    ```

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

    ```html theme={null}
    <img src="https://static.example.com/logo.png" crossorigin="anonymous" />
    ```

    详见 MDN 文档 [Access-Control-Allow-Origin](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Reference/Headers/Access-Control-Allow-Origin) 和 [crossorigin 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/crossorigin)。
  </Accordion>

  <Accordion title="如何采集用户信息？">
    **登录态用户识别**

    对于需要用户登录的应用（如 SaaS 产品、会员系统、电商平台等），参考 [用户会话](/zh/rum/sdk/web/advanced-config#用户会话)。

    **设备指纹识别**

    对于无登录态的应用（如企业官网、营销页面等），推荐基于浏览器特征、设备信息等多维数据生成稳定的指纹并上报用户标识。
  </Accordion>
</AccordionGroup>