LogRocket 会话回放 #
什么是会话回放？ #
会话回放是 LogRocket 的核心功能，它记录用户在应用中的所有操作，让你可以像看电影一样回放用户的操作过程。
text
┌─────────────────────────────────────────────────────────────┐
│ 会话回放原理 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 传统录屏 vs LogRocket 会话回放： │
│ │
│ 传统录屏： │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 录制整个屏幕为视频 │ │
│ │ ❌ 文件体积大（MB 级别） │ │
│ │ ❌ 无法搜索内容 │ │
│ │ ❌ 无法查看网络请求 │ │
│ │ ❌ 隐私问题严重 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ LogRocket 会话回放： │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 记录 DOM 变化和用户交互 │ │
│ │ ✅ 文件体积小（KB 级别） │ │
│ │ ✅ 可搜索、可过滤 │ │
│ │ ✅ 关联网络请求和日志 │ │
│ │ ✅ 支持隐私屏蔽 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
会话回放的工作原理 #
DOM 录制技术 #
text
┌─────────────────────────────────────────────────────────────┐
│ DOM 录制原理 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 1. 初始快照 │
│ - 页面加载时记录完整 DOM 结构 │
│ - 记录所有 CSS 样式 │
│ - 记录资源引用（图片、字体等） │
│ │
│ 2. 变化追踪 │
│ - 使用 MutationObserver 监听 DOM 变化 │
│ - 记录属性变化 │
│ - 记录节点增删 │
│ - 记录文本内容变化 │
│ │
│ 3. 用户交互 │
│ - 鼠标移动和点击 │
│ - 键盘输入 │
│ - 滚动事件 │
│ - 表单操作 │
│ │
│ 4. 重放 │
│ - 重建初始 DOM │
│ - 按时间顺序应用变化 │
│ - 模拟用户交互 │
│ │
└─────────────────────────────────────────────────────────────┘
数据结构 #
javascript
{
"type": "FullSnapshot",
"timestamp": 1705702800000,
"data": {
"node": {
"type": 1,
"tagName": "div",
"attributes": { "id": "app" },
"childNodes": [...]
}
}
}
{
"type": "IncrementalSnapshot",
"timestamp": 1705702801000,
"data": {
"source": 0,
"adds": [
{
"parentId": 1,
"node": {
"type": 1,
"tagName": "button",
"attributes": { "class": "btn" }
}
}
]
}
}
会话回放界面 #
主界面组成 #
text
┌─────────────────────────────────────────────────────────────┐
│ LogRocket 回放界面 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 工具栏 │ │
│ │ [播放/暂停] [进度条] [速度] [全屏] [分享] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 回放区域 │ │
│ │ │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ 用户操作画面重现 │ │ │
│ │ │ │ │ │
│ │ └─────────────────────────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────┬─────────────────────────────────────┐ │
│ │ 事件时间线 │ 事件详情 │ │
│ ├───────────────┼─────────────────────────────────────┤ │
│ │ 10:30:01 │ 点击事件 │ │
│ │ 10:30:02 │ 网络请求: GET /api/users │ │
│ │ 10:30:03 │ 控制台: User data loaded │ │
│ │ 10:30:05 │ ❌ 错误: TypeError │ │
│ └───────────────┴─────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
时间线事件类型 #
text
┌─────────────────────────────────────────────────────────────┐
│ 时间线事件类型 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 🖱️ 用户交互 │
│ - 点击 │
│ - 输入 │
│ - 滚动 │
│ - 拖拽 │
│ │
│ 🌐 网络请求 │
│ - XHR/Fetch 请求 │
│ - 请求状态码 │
│ - 响应时间 │
│ │
│ 📝 控制台日志 │
│ - log/info/warn/error │
│ - 日志内容 │
│ │
│ ❌ 错误事件 │
│ - JavaScript 错误 │
│ - 未捕获的 Promise 拒绝 │
│ - 资源加载失败 │
│ │
│ 🔀 路由变化 │
│ - URL 变化 │
│ - 页面导航 │
│ │
│ 📊 状态变化 │
│ - Redux action │
│ - Vuex mutation │
│ - 状态快照 │
│ │
└─────────────────────────────────────────────────────────────┘
会话搜索与过滤 #
按用户搜索 #
text
┌─────────────────────────────────────────────────────────────┐
│ 用户搜索 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 搜索条件： │
│ - 用户 ID │
│ - 用户邮箱 │
│ - 用户名 │
│ │
│ 使用场景： │
│ - 客服查找特定用户的会话 │
│ - 分析 VIP 用户的行为 │
│ - 追踪问题用户的操作 │
│ │
└─────────────────────────────────────────────────────────────┘
按事件搜索 #
text
┌─────────────────────────────────────────────────────────────┐
│ 事件搜索 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 搜索条件： │
│ - 错误类型 │
│ - 事件名称 │
│ - URL 路径 │
│ - 网络请求 │
│ │
│ 示例： │
│ - 错误包含 "TypeError" │
│ - URL 包含 "/checkout" │
│ - 请求状态码 = 500 │
│ │
└─────────────────────────────────────────────────────────────┘
按时间范围搜索 #
text
┌─────────────────────────────────────────────────────────────┐
│ 时间范围搜索 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 时间范围： │
│ - 最近 1 小时 │
│ - 最近 24 小时 │
│ - 最近 7 天 │
│ - 自定义范围 │
│ │
│ 使用场景： │
│ - 查看最新发布后的问题 │
│ - 分析特定时间段的问题 │
│ - 对比不同时段的用户行为 │
│ │
└─────────────────────────────────────────────────────────────┘
高级过滤 #
javascript
// 使用 LogRocket API 进行高级搜索
// 在控制台中使用搜索语法
// 搜索特定错误
error.message:"Cannot read property"
// 搜索特定 URL
url:"/checkout"
// 搜索特定用户
user.email:"john@example.com"
// 组合搜索
error.message:"TypeError" AND url:"/dashboard"
// 排除搜索
NOT user.email:"test@example.com"
会话分析技巧 #
1. 错误关联分析 #
text
┌─────────────────────────────────────────────────────────────┐
│ 错误关联分析 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 步骤： │
│ │
│ 1. 在错误列表中找到目标错误 │
│ 2. 点击错误查看详情 │
│ 3. 点击"查看会话"跳转到错误发生时刻 │
│ 4. 回放错误发生前的用户操作 │
│ 5. 分析网络请求和状态变化 │
│ │
│ 分析要点： │
│ - 错误发生前的用户操作 │
│ - 错误发生时的网络请求状态 │
│ - 错误发生时的应用状态 │
│ - 是否有控制台警告 │
│ │
└─────────────────────────────────────────────────────────────┘
2. 用户行为分析 #
text
┌─────────────────────────────────────────────────────────────┐
│ 用户行为分析 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 分析维度： │
│ │
│ 1. 页面停留时间 │
│ - 用户在页面停留多久 │
│ - 是否快速离开 │
│ │
│ 2. 交互频率 │
│ - 点击次数 │
│ - 表单填写情况 │
│ - 滚动深度 │
│ │
│ 3. 操作路径 │
│ - 用户访问了哪些页面 │
│ - 操作顺序是什么 │
│ - 是否有反复操作 │
│ │
│ 4. 困惑行为 │
│ - 多次点击同一元素 │
│ - 快速来回滚动 │
│ - 表单反复修改 │
│ │
└─────────────────────────────────────────────────────────────┘
3. 性能问题分析 #
text
┌─────────────────────────────────────────────────────────────┐
│ 性能问题分析 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 分析要点： │
│ │
│ 1. 页面加载 │
│ - 白屏时间 │
│ - 首次渲染时间 │
│ - 资源加载时间 │
│ │
│ 2. 网络请求 │
│ - 慢请求识别 │
│ - 请求失败 │
│ - 请求瀑布图 │
│ │
│ 3. 交互响应 │
│ - 点击后响应时间 │
│ - 输入延迟 │
│ - 动画流畅度 │
│ │
└─────────────────────────────────────────────────────────────┘
隐私保护 #
敏感数据屏蔽 #
javascript
LogRocket.init('your-app-id/app-name', {
dom: {
inputSanitizer: (el, value) => {
if (el.type === 'password') {
return '';
}
if (el.name === 'creditCard' || el.id === 'card-number') {
return '****';
}
if (el.name === 'ssn') {
return '***-**-****';
}
return value;
},
textSanitizer: true
}
});
网络请求过滤 #
javascript
LogRocket.init('your-app-id/app-name', {
network: {
requestSanitizer: (request) => {
if (request.url.includes('/api/auth/login')) {
if (request.body) {
const body = JSON.parse(request.body);
body.password = '[REDACTED]';
request.body = JSON.stringify(body);
}
return request;
}
if (request.url.includes('/api/payment')) {
return null;
}
return request;
},
responseSanitizer: (response) => {
if (response.url.includes('/api/user/sensitive')) {
return null;
}
return response;
}
}
});
完全屏蔽特定元素 #
html
<div data-private>
这里的内容不会被记录
</div>
<input data-private type="text" />
text
┌─────────────────────────────────────────────────────────────┐
│ 隐私屏蔽规则 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 自动屏蔽： │
│ - type="password" 的输入框 │
│ - 带有 data-private 属性的元素 │
│ │
│ 手动配置： │
│ - inputSanitizer: 过滤输入内容 │
│ - textSanitizer: 过滤文本内容 │
│ - requestSanitizer: 过滤请求 │
│ - responseSanitizer: 过滤响应 │
│ │
│ 建议屏蔽的敏感信息： │
│ - 密码 │
│ - 信用卡号 │
│ - 身份证号 │
│ - 社会安全号 │
│ - API 密钥 │
│ - Token │
│ │
└─────────────────────────────────────────────────────────────┘
会话分享 #
分享会话链接 #
text
┌─────────────────────────────────────────────────────────────┐
│ 会话分享 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 分享方式： │
│ │
│ 1. 分享整个会话 │
│ - 点击"分享"按钮 │
│ - 复制会话链接 │
│ - 发送给团队成员 │
│ │
│ 2. 分享特定时间点 │
│ - 在时间线上定位 │
│ - 分享带时间戳的链接 │
│ - 接收者直接跳转到该时刻 │
│ │
│ 3. 嵌入到工单系统 │
│ - 集成 Jira、Zendesk 等 │
│ - 自动附加会话链接 │
│ - 方便开发人员查看 │
│ │
└─────────────────────────────────────────────────────────────┘
与团队协作 #
javascript
// 在代码中获取会话 URL
const sessionUrl = LogRocket.sessionURL;
// 发送到错误追踪系统
fetch('/api/errors', {
method: 'POST',
body: JSON.stringify({
error: error.message,
stack: error.stack,
logrocketUrl: sessionUrl
})
});
会话回放最佳实践 #
1. 问题复现流程 #
text
┌─────────────────────────────────────────────────────────────┐
│ 问题复现流程 │
├─────────────────────────────────────────────────────────────┤
│ │
│ Step 1: 收到错误告警 │
│ ↓ │
│ Step 2: 在 LogRocket 中找到对应会话 │
│ ↓ │
│ Step 3: 跳转到错误发生时刻 │
│ ↓ │
│ Step 4: 回放错误发生前的操作 │
│ ↓ │
│ Step 5: 分析网络请求和状态 │
│ ↓ │
│ Step 6: 定位问题根因 │
│ ↓ │
│ Step 7: 修复并验证 │
│ │
└─────────────────────────────────────────────────────────────┘
2. UX 优化流程 #
text
┌─────────────────────────────────────────────────────────────┐
│ UX 优化流程 │
├─────────────────────────────────────────────────────────────┤
│ │
│ Step 1: 识别问题页面 │
│ - 高跳出率页面 │
│ - 低转化率页面 │
│ - 用户反馈问题 │
│ ↓ │
│ Step 2: 查看相关会话 │
│ - 随机抽样用户会话 │
│ - 关注用户行为模式 │
│ ↓ │
│ Step 3: 分析用户行为 │
│ - 停留时间 │
│ - 交互路径 │
│ - 困惑行为 │
│ ↓ │
│ Step 4: 提出改进方案 │
│ - 优化交互流程 │
│ - 改进页面布局 │
│ - 增强引导提示 │
│ ↓ │
│ Step 5: 验证改进效果 │
│ - A/B 测试 │
│ - 对比改进前后数据 │
│ │
└─────────────────────────────────────────────────────────────┘
3. 客户支持流程 #
text
┌─────────────────────────────────────────────────────────────┐
│ 客户支持流程 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 传统流程： │
│ 用户报告问题 → 客服询问详情 → 用户描述 → 技术调查 │
│ 耗时：数小时到数天 │
│ │
│ LogRocket 流程： │
│ 用户报告问题 → 客服查找会话 → 观看回放 → 快速定位 │
│ 耗时：数分钟 │
│ │
│ 最佳实践： │
│ 1. 让用户提供用户 ID 或邮箱 │
│ 2. 在 LogRocket 中搜索该用户的最近会话 │
│ 3. 快速定位问题发生时刻 │
│ 4. 如需技术介入，分享会话链接 │
│ │
└─────────────────────────────────────────────────────────────┘
会话数据保留 #
数据保留策略 #
text
┌─────────────────────────────────────────────────────────────┐
│ 数据保留策略 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 不同套餐的保留时间： │
│ │
│ Free: 7 天 │
│ Starter: 30 天 │
│ Professional: 90 天 │
│ Enterprise: 自定义 │
│ │
│ 建议： │
│ - 定期导出重要会话 │
│ - 对关键问题创建永久链接 │
│ - 集成到工单系统保存关联 │
│ │
└─────────────────────────────────────────────────────────────┘
下一步 #
现在你已经掌握了会话回放的使用方法，接下来学习 性能监控 了解如何监控和分析应用性能！
最后更新：2026-03-29