> ## 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.

# 异常追踪

> 掌握 Flashduty RUM 的异常追踪功能，快速发现并解决网站问题。

Flashduty RUM（Real User Monitoring）是一款强大的用户体验监控工具，专注于帮助开发者快速发现并解决网站和应用中的问题，确保系统稳定性和用户体验的流畅性。它通过自动捕获各类异常信息，并提供详细的上下文数据，让您能够精准定位问题根源，及时采取措施进行修复。

## 核心功能

<CardGroup cols={2}>
  <Card title="异常追踪" icon="bug">
    自动捕获 JavaScript 异常、网络请求失败、资源加载异常等各类问题，并提供详细的错误堆栈信息和上下文数据
  </Card>

  <Card title="异常上报" icon="upload">
    支持自动错误捕获和手动错误上报两种方式，允许您记录业务逻辑中的已处理错误，并附加上下文信息
  </Card>

  <Card title="异常聚合" icon="layer-group">
    将相似的异常事件归类为同一个 Issue，减少重复告警，帮助开发团队更高效地识别和处理问题
  </Card>

  <Card title="源码映射" icon="code">
    通过上传 SourceMap 文件，将压缩后的代码映射到原始源代码，直接定位到原始代码的具体位置
  </Card>
</CardGroup>

## 价值与优势

| 优势           | 描述                                 |
| ------------ | ---------------------------------- |
| **提高问题解决效率** | 快速定位问题根源，减少故障排查时间，提高开发和运维团队的工作效率   |
| **优化用户体验**   | 及时发现并解决影响用户体验的问题，提升用户满意度和忠诚度       |
| **降低业务风险**   | 避免因系统故障导致的业务损失，保障业务的稳定运行           |
| **提供数据支持**   | 详细的异常数据和上下文信息为业务决策提供有力支持，帮助您不断优化产品 |

## 使用场景

<AccordionGroup>
  <Accordion title="前端开发调试">
    在开发过程中，快速定位和解决 JavaScript 代码中的错误，提高开发效率。
  </Accordion>

  <Accordion title="生产环境监控">
    实时监控生产环境中的异常情况，及时发现并处理潜在问题，保障系统的稳定性。
  </Accordion>

  <Accordion title="用户体验分析">
    了解用户在使用过程中遇到的问题，针对性地改进产品，提升用户体验。
  </Accordion>
</AccordionGroup>

## 异常追踪流程

Flashduty RUM 的异常追踪分为两个关键阶段：**问题发现** 和 **问题定位**。

<Steps>
  <Step title="问题发现">
    快速发现异常问题的触发点是诊断的第一步。Flashduty RUM 提供以下方式帮助您识别问题：

    * **数据分析**：通过**分析看板**的「异常」Tab，查看错误率、异常类型等数据趋势
    * **告警通知**：通过在应用中开启告警，与**协作空间**联动，可在异常发生时及时感知
    * **主动巡检**：在**异常追踪**模块观察异常趋势，如 JavaScript 错误、网络错误等
  </Step>

  <Step title="问题定位">
    Flashduty RUM 提供丰富的异常数据和上下文信息，帮助您精准定位问题根因。
  </Step>
</Steps>

### 核心异常数据

| 异常类型          | 说明                 |
| ------------- | ------------------ |
| JavaScript 错误 | 运行时错误、语法错误等        |
| 网络请求错误        | API 调用失败、超时等       |
| 资源加载错误        | 图片、脚本等资源加载失败       |
| 框架相关错误        | React、Vue 等框架的组件错误 |

### 上下文信息

* **用户环境**：浏览器类型、设备型号、操作系统
* **错误堆栈**：详细的调用栈信息
* **会话时间线**：触发错误的操作路径

### 问题分类与定位

| 问题类型              | 典型表现       | 可能原因            | 关键指标       |
| ----------------- | ---------- | --------------- | ---------- |
| **JavaScript 错误** | 功能失效、控制台报错 | 代码逻辑错误、浏览器兼容性问题 | 错误率、错误类型   |
| **网络请求错误**        | 请求超时、连接中断  | API 响应慢、网络质量差   | 请求延迟、连接成功率 |
| **资源加载错误**        | 图片/脚本加载失败  | CDN 配置错误、资源路径错误 | 资源加载失败率    |
| **框架相关错误**        | 组件渲染失败     | 组件逻辑错误、状态管理问题   | 组件错误率      |

## 问题定位工具

<Tabs>
  <Tab title="错误分析面板">
    通过错误分析面板，您可以查看聚合后的 Issue 列表、错误趋势和详细信息。

    <Frame>
      <img src="https://docs-cdn.flashcat.cloud/imges/png/7eaffcd3d631d03ffb553f8956ff94ac.png" alt="错误分析面板" />
    </Frame>
  </Tab>

  <Tab title="源码映射">
    上传 SourceMap 后，可以直接在堆栈信息中查看原始源代码位置。

    <Frame>
      <img src="https://docs-cdn.flashcat.cloud/imges/png/551f3fdc7eef25ac2888f71db87b9f69.png" alt="源码映射" />
    </Frame>
  </Tab>
</Tabs>

<Tip>
  问题解决后，可在系统中流转 Issue 状态，并持续关注异常数据的变化趋势。
</Tip>

## 下一步

<CardGroup cols={2}>
  <Card title="异常上报" icon="upload" href="/zh/rum/error-tracking/erro-reporting/web">
    了解异常上报规则和方式
  </Card>

  <Card title="异常查看" icon="eye" href="./error-viewing">
    查看和分析异常详情
  </Card>

  <Card title="源码映射" icon="code" href="./source-mapping">
    配置源码映射提升调试效率
  </Card>

  <Card title="异常聚合" icon="layer-group" href="./error-aggregation">
    了解异常聚合机制
  </Card>
</CardGroup>