Skip to content

Commit 125eaa3

Browse files
Fiona2016Fiona2016
committed
docs: session replay
1 parent 877c0eb commit 125eaa3

7 files changed

Lines changed: 277 additions & 0 deletions

File tree

‎flashduty/zh/2. RUM/5.会话重放/1. 概览.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: "RUM 会话重放功能概览"
3+
description: "掌握 Flashduty RUM 的会话重放功能，通过重现用户操作路径快速定位问题并优化用户体验。"
4+
date: "2024-05-09T10:00:00+08:00"
5+
url: "https://docs.flashcat.cloud/zh/flashduty/rum/session-replay"
6+
---
7+
8+
## 概述
9+
10+
Flashduty RUM 的 **会话重放功能**（Session Replay）是一款强大的用户行为分析工具，旨在帮助开发者通过重现用户在网站或应用中的操作路径，结合 RUM 性能和异常追踪数据，可直观了解用户体验，快速定位问题根因。
11+
12+
## 核心功能
13+
14+
1. **用户操作录制**：自动记录用户的鼠标点击、页面滚动、表单输入、导航行为等操作，生成直观的会话回放视频。
15+
2. **异常关联**：将会话重放与异常追踪结合，自动关联异常发生时的用户操作和页面状态，帮助快速定位问题触发场景。
16+
3. **交互分析**：提供用户交互时间线，展示用户操作序列、页面加载时间以及关键事件（如错误或网络请求失败）的发生点。
17+
4. **隐私保护**：提供灵活的隐私配置，可屏蔽敏感信息（如表单输入内容）或限制录制范围，确保数据合规性。
18+
19+
## 价值与优势
20+
21+
1. **直观问题定位**：通过可视化回放，快速了解用户遇到问题的具体操作路径，减少排查时间。
22+
2. **提升用户体验**：洞察用户行为模式，发现交互痛点，优化页面设计和功能逻辑。
23+
3. **数据驱动优化**：结合异常数据和用户行为分析，为产品迭代提供可靠的数据支持。
24+
25+
## 使用场景
26+
27+
1. **问题复现**：通过重放用户会话，复现异常发生时的操作场景，快速定位问题根源。
28+
2. **用户行为分析**：分析用户在关键页面（如支付、注册）的行为，优化用户体验和转化率。
29+
3. **调试与优化**：结合异常追踪，识别页面加载慢、交互卡顿等问题，优化前端性能。
30+
4. **客户支持**：通过回放用户会话，快速了解用户反馈的问题，提供更精准的支持。
31+
32+
## 会话重放流程
33+
34+
Flashduty RUM 的会话重放功能分为两个关键阶段：**行为记录与回放**、**问题分析与优化**。
35+
36+
### 1. 行为记录与回放
37+
38+
快速记录用户行为并生成回放是分析的第一步。在回放阶段，录制 SDK 会将当前 dom 和 css 样式打快照，并在用户行为（DOM 变化、鼠标移动、点击、表单输入等）发生时收集对应的事件。通过序列化、压缩、去除敏感信息后进行数据上报。
39+
40+
### 2. 问题分析与优化
41+
42+
Flashduty RUM 提供丰富的行为数据和分析工具，帮助定位问题并优化体验：
43+
44+
#### 核心行为数据
45+
46+
- **用户交互**：点击、滚动、输入、导航等操作的时间线。
47+
- **页面性能**：页面加载时间、资源加载失败、API 调用延迟等。
48+
- **异常上下文**：异常发生时的页面状态、DOM 结构和用户操作。
49+
50+
#### 上下文信息
51+
52+
- **用户环境**：浏览器、设备、操作系统、网络状况。
53+
- **操作路径**：用户在会话中的完整操作序列。
54+
- **页面快照**：异常发生时的页面 DOM 快照。
55+
56+
通过 Flashduty RUM 的可视化回放工具，您可以快速分析用户行为与问题之间的关联：
57+
58+
| 问题类型 | 典型表现 | 可能原因 | 定位方法 |
59+
| ---------------- | -------------------- | -------------------------- | ---------------------- |
60+
| **页面加载慢** | 页面白屏、加载超时 | 资源加载失败、网络延迟 | 查看是否有资源加载异常 |
61+
| **功能失效** | 按钮点击无反应 | 代码逻辑错误、事件绑定问题 | 查看具体行为和异常 |
62+
| **表单提交失败** | 数据未保存、提交失败 | API 响应错误、表单验证问题 | 查看错误和异常详情 |
63+
64+
## 问题分析工具
65+
66+
#### 1.会话回放面板
67+
68+
在播放器中，您可以查看用户的所有操作，包括点击、滚动和输入等，支持快进、回放和 seek 等播放行为控制，帮助开发者直观复现问题场景并精准分析用户行为。
69+
70+
#### 2. 事件与上下文关联
71+
72+
会话回放支持与各类事件（如视图加载、错误、用户行为）关联，允许查看详细的 errors 和 attributes（上下文信息，如设备类型、浏览器版本、地理位置等），方便定位问题根因并进行深入分析。
73+
74+
## 下一步
75+
76+
- [SDK 配置](https://docs.flashcat.cloud/zh/flashduty/rum/session-replay-config)
77+
- [查看会话回放](https://docs.flashcat.cloud/zh/flashduty/rum/session-replay-explorer)
78+
- [了解隐私保护设置](https://docs.flashcat.cloud/zh/flashduty/rum/privacy-settings)

‎flashduty/zh/2. RUM/5.会话重放/2. SDK 配置.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
title: "RUM 会话重放SDK配置"
3+
description: "掌握 Flashduty RUM 的会话重放功能，通过重现用户操作路径快速定位问题并优化用户体验。"
4+
date: "2024-05-09T10:00:00+08:00"
5+
url: "https://docs.flashcat.cloud/zh/flashduty/rum/session-replay-config"
6+
---
7+
8+
## 概述
9+
10+
Flashduty RUM 的会话重放功能集成于 RUM SDK 中，通过简单配置采样比例和隐私规则，即可快速启用重放功能。
11+
12+
## 开启采集
13+
14+
### 自动采集
15+
16+
重放 SDK 已集成至 RUM SDK，配置采样比例便可开启重放功能。
17+
18+
```js
19+
window.FC_RUM.init({
20+
applicationId: "YOUR_APPLICATION_ID",
21+
clientToken: "YOUR_CLIENT_TOKEN",
22+
// ...
23+
sessionReplaySampleRate: 10, // 默认采样率10%
24+
// ...
25+
});
26+
```
27+
28+
::: tip
29+
采样方式：在客户端 sdk 初始化 session 时生成 0-1 之间的随机数，与 `rate/100` 进行大小比较。如落在区间内，则该 session 会作为采集样本，回放数据会在 session 周期内采集与上报。
30+
:::
31+
32+
默认配置采样率后，会在`RUM.init()`执行后开启自动采集。若想手动控制采集时机（如用户登录后再进行数据采集），可先开启手动采集开关，再手动调用 record 方法。
33+
34+
```js
35+
window.FC_RUM.init({
36+
applicationId: "YOUR_APPLICATION_ID",
37+
clientToken: "YOUR_CLIENT_TOKEN",
38+
// ...
39+
sessionReplaySampleRate: 10, // 默认采样率10%
40+
startSessionReplayRecordingManually: true, // 开启手动采集开关
41+
// ...
42+
});
43+
44+
if (userIsShouldRecord()) {
45+
// 如果满足某些条件，可开启回放
46+
window.FC_RUM.startSessionReplayRecording(); // 在调用时再开启数据采集
47+
}
48+
```
49+
50+
开启采集后，可通过`stopSessionReplayRecording()`方法停止采集。
51+
52+
### 强制开启
53+
54+
在某些场景下，即使采样率并未命中，也希望采集该 session 相关数据（如重点监测刚上线的功能，或者捕获某个异常后希望上报后续操作），此时可以通过调用
55+
`startSessionReplayRecording({ force: true })`方法来强制开启重放。
56+
57+
::: warning
58+
注：只有当本次 session 被采样，而 sessionReplay 未被采样的情况下，强制开启才会生效。如果 session 本身并没有被采样，即使强制开启 replay 也无效。
59+
:::
60+
61+
## 关闭采集
62+
63+
如果需要关闭采集功能，将对应的 replay 采样率调整至 0 或者直接去掉该配置项即可。
64+
65+
```js
66+
window.FC_RUM.init({
67+
applicationId: "YOUR_APPLICATION_ID",
68+
clientToken: "YOUR_CLIENT_TOKEN",
69+
// ...
70+
sessionReplaySampleRate: 0, // 关闭重放功能
71+
// ...
72+
});
73+
```
74+
75+
## 工作原理
76+
77+
会话重放 SDK 基于 [rrweb](https://www.rrweb.io/) 实现。
78+
79+
在录制阶段，录制 SDK 会将当前 dom 和 css 样式打快照，并在用户行为（DOM 变化、鼠标移动、点击、表单输入等）发生时收集对应的事件。通过序列化、压缩、去除敏感信息后进行数据上报。
80+
81+
在重放阶段，播放 SDK 会根据快照进行 dom 重建，并在合适的时机将事件行为转换为 dom 变化并进行展示。
82+
83+
在数据上报前，SDK 会提前进行数据压缩，并将该 CPU 密集操作放在 web worker 中执行，不会影响主线程渲染。
84+
85+
SDK 兼容性和 RUM SDK 一致，支持 IE11 以上浏览器。

‎flashduty/zh/2. RUM/5.会话重放/3. 会话查看.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: "查看 RUM 会话重放记录"
3+
description: "掌握 Flashduty RUM 的会话重放功能，通过重现用户操作路径快速定位问题并优化用户体验。"
4+
date: "2024-05-09T10:00:00+08:00"
5+
url: "https://docs.flashcat.cloud/zh/flashduty/rum/session-replay-explorer"
6+
---
7+
8+
## 概述
9+
10+
Flashduty RUM 的会话重放功能通过直观地重现用户操作路径，帮助开发者快速定位问题、分析用户行为并优化产品体验。集成于 RUM SDK 中，只需简单配置即可启用，支持灵活的采样策略和隐私规则设置。会话重放提供强大的播放器和 Devtools 功能，包括操作时间线、异常分析和上下文信息查看，助力开发者高效排查问题并深入了解用户交互细节。
11+
12+
## 会话列表
13+
14+
在「会话重放」菜单中，您可以查看最近的会话记录，默认按时间倒序排列。支持按会话时长、视图数量、行为数量、异常数量等字段排序，并提供丰富的筛选条件（如时间范围、页面、标签等），便于快速定位目标重放记录。
15+
16+
点击任一记录项，将打开播放器面板，分为以下区域：
17+
18+
- **信息展示区**：展示会话的访问时间、起始与结束页面、标签等上下文信息。
19+
- **播放区**：以用户视角重现操作路径，清晰展示用户交互细节。
20+
- **播放控制区**：提供播放控制功能，方便操作。
21+
22+
![会话重放面板](https://docs-cdn.flashcat.cloud/imges/png/13483c539ec8d547556c4dd4242e5493.png)
23+
24+
## 播放器
25+
26+
播放器支持播放、暂停、快进、快退、重播、倍速播放、全屏和 Seek 等功能，并支持快捷键操作，提升使用效率。播放过程中，时间轴上会以不同颜色的图标标记用户行为（Action）和异常（Error），便于快速概览会话中的关键事件。
27+
28+
默认情况下，播放器会自动跳过非活跃片段以提高查看效率。您也可以通过配置关闭此功能，按实际时序完整播放。
29+
30+
![播放器界面](https://docs-cdn.flashcat.cloud/imges/png/67611da3c5ac364f026ee9da9ce55212.png)
31+
![非活跃片段配置](https://docs-cdn.flashcat.cloud/imges/png/02db89ad438312f34fbfcc95e0aa5916.png)
32+
33+
## Devtools
34+
35+
通过「查看全部事件和异常」功能，可进入宽屏模式，查看会话的操作时间线和详细分析。Devtools 包含以下功能：
36+
37+
- **Events Tab**：展示会话中的所有用户操作，支持以下功能：
38+
39+
- 切换相对时间与绝对时间显示。
40+
- 按事件类型筛选（如点击、页面跳转等）。
41+
- 点击具体事件，播放器将自动跳转至对应时间戳。
42+
![事件时间线](https://docs-cdn.flashcat.cloud/imges/png/ac51a75dca75c31b31a21dfa82dd1ac1.png)
43+
44+
- **Error Tab**：列出会话中的所有异常和问题，支持点击跳转至详细错误信息，便于快速定位和分析。
45+
46+
- **Attributes Tab**：展示会话的上下文信息（如设备、浏览器、地理位置等），帮助开发者深入了解问题背景并进行精准定位。

‎flashduty/zh/2. RUM/5.会话重放/4. 隐私保护说明.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: "RUM 会话重放隐私保护"
3+
description: "掌握 Flashduty RUM 的会话重放功能，通过重现用户操作路径快速定位问题并优化用户体验。"
4+
date: "2024-05-09T10:00:00+08:00"
5+
url: "https://docs.flashcat.cloud/zh/flashduty/rum/session-replay-privacy"
6+
---
7+
8+
## 概述
9+
10+
为满足不同场景的隐私需求，会话重放功能内置了灵活的隐私保护策略。通过配置 `sessionReplayPrivacyLevel` 字段，开发者可控制数据采集的敏感度，支持从显示所有文本（除密码外）到完全隐藏页面文本的多种模式，确保用户数据的安全性和合规性
11+
12+
## 隐私策略
13+
14+
会话重放功能通过 `sessionReplayPrivacyLevel` 字段提供灵活的隐私保护配置，确保在采集用户操作数据时兼顾功能性和数据安全。以下为三种主要隐私级别配置及其效果：
15+
:::tip
16+
input 类型为 password 的输入为敏感信息，所有场景都不会收集。
17+
:::
18+
19+
### 显示所有文本（除密码）
20+
21+
配置 `sessionReplayPrivacyLevel: "allow"` 允许采集页面中除密码字段外的所有文本内容，适合需要完整用户交互细节的场景。
22+
23+
```js
24+
window.FC_RUM.init({
25+
applicationId: "YOUR_APPLICATION_ID",
26+
clientToken: "YOUR_CLIENT_TOKEN",
27+
// ...
28+
sessionReplaySampleRate: 10, // 默认采样率10%
29+
sessionReplayPrivacyLevel: "allow",
30+
// ...
31+
});
32+
```
33+
34+
![显示所有文本](https://docs-cdn.flashcat.cloud/imges/png/4cae182c91c7df152cbcf86c2978f443.png)
35+
36+
### 隐藏数据框内容
37+
38+
配置 `sessionReplayPrivacyLevel: "mask-user-input"` 将隐藏用户输入框中的内容（如文本输入、选择框等），但保留页面其他文本，适用于需要保护用户输入隐私的场景。
39+
40+
```js
41+
window.FC_RUM.init({
42+
applicationId: "YOUR_APPLICATION_ID",
43+
clientToken: "YOUR_CLIENT_TOKEN",
44+
// ...
45+
sessionReplaySampleRate: 10, // 默认采样率10%
46+
sessionReplayPrivacyLevel: "mask-user-input",
47+
// ...
48+
});
49+
```
50+
51+
![隐藏数据框内容](https://docs-cdn.flashcat.cloud/imges/png/5c43c6f6196a95334a8b253fa33360c9.png)
52+
53+
### 隐藏页面所有文本
54+
55+
配置 `sessionReplayPrivacyLevel: "mask-all"` 将完全隐藏页面中的所有文本内容，仅保留操作行为和页面结构，适合对数据隐私要求极高的场景。
56+
57+
```js
58+
window.FC_RUM.init({
59+
applicationId: "YOUR_APPLICATION_ID",
60+
clientToken: "YOUR_CLIENT_TOKEN",
61+
// ...
62+
sessionReplaySampleRate: 10, // 默认采样率10%
63+
sessionReplayPrivacyLevel: "mask-all",
64+
// ...
65+
});
66+
```
67+
68+
![隐藏页面所有文本](https://docs-cdn.flashcat.cloud/imges/png/3c123bbf8fd30482da766ab009c16b0e.png)

flashduty/zh/2. RUM/5. 其他/1. 术语说明.md renamed to flashduty/zh/2. RUM/6. 其他/1. 术语说明.md

File renamed without changes.

flashduty/zh/2. RUM/5. 其他/2. 数据收集.md renamed to flashduty/zh/2. RUM/6. 其他/2. 数据收集.md

File renamed without changes.

flashduty/zh/2. RUM/5. 其他/4. 数据安全.md renamed to flashduty/zh/2. RUM/6. 其他/4. 数据安全.md

File renamed without changes.

0 commit comments

Comments
 (0)