LogRocket

前端会话回放与产品分析平台，以高质量 Session Replay、Redux 状态追踪与性能洞察为核心，适合产品与工程协同排障。

技术简介说明

LogRocket 是专注于前端用户体验可观测的 SaaS 平台，核心能力是录制真实用户会话（DOM、鼠标、滚动、网络、console），并在出现错误或性能问题时提供「像本地 DevTools 一样」的回放界面。与 Sentry 偏工程错误聚合不同，LogRocket 更强调产品视角：漏斗分析、用户摩擦点、表单放弃率，以及与 Redux/MobX 等状态管理器的深度集成。

工程团队使用 LogRocket 的典型场景是：用户报告「支付按钮点不了」，工程师直接搜索该用户会话，观看回放中的网络失败、console 报错与 Redux action 序列，无需本地复现。其代价是较高的按会话计费与相对较重的 SDK。

基本信息

• 官网：https://logrocket.com
• 文档：https://docs.logrocket.com
• License：商业 SaaS
• SDK 包：logrocket、logrocket-react
• 主要维护者/公司：LogRocket, Inc.
• 运行环境：浏览器、React Native（有限支持）

快速上手

安装

npm install logrocket

React 项目可选：

npm install logrocket-react

最小示例

import LogRocket from 'logrocket'
 
LogRocket.init('your-app/id')
 
// 关联用户（登录后）
LogRocket.identify('user-123', {
  name: 'Jane Doe',
  email: '[email protected]',
  plan: 'pro',
})

React 集成（状态与错误）

import LogRocket from 'logrocket'
import setupLogRocketReact from 'logrocket-react'
 
LogRocket.init('your-app/id')
setupLogRocketReact(LogRocket)

与 Sentry 联合（常见模式）

LogRocket.getSessionURL((sessionURL) => {
  Sentry.configureScope((scope) => {
    scope.setExtra('sessionURL', sessionURL)
  })
})

在 Sentry Issue 中附 LogRocket 会话链接，实现错误与回放互跳。

核心特性

• Session Replay：高保真 DOM 回放，含网络面板与 console。
• Redux / MobX 插件：记录 action/state 变化时间线。
• 性能监控：页面加载、长任务、资源耗时。
• 错误捕获：JS 异常与 console error 标记在回放时间轴。
• 产品分析：漏斗、热力图（视套餐）、用户细分。
• 隐私控制：敏感字段屏蔽、域名过滤、GDPR 工具。
• 团队协作：会话分享链接、评论标注。

适用场景

• 产品+工程需要可视化复现用户问题，而非仅看堆栈。
• 复杂交互（表单、向导、拖拽）难以用传统日志描述的场景。
• 使用 Redux 的中大型 SPA，需要 state 时间线辅助调试。
• 客服支持团队需要「给用户会话链接」协助升级工单。
• 可与 Sentry 等错误平台互补：Sentry 聚合 Issue，LogRocket 深度回放。

技术亮点

• 回放体验行业领先：网络与 console 与 DOM 同步展示，排障效率高。
• 状态管理集成：Redux 时间线在同类产品中突出。
• 产品分析一体：不仅工程排障，也服务 PM 分析转化漏斗。
• identify 用户追踪：快速按用户 ID/邮箱检索会话。

核心概念与架构

LogRocket SDK（页面录制）
      ↓
 压缩会话数据 → LogRocket Cloud
      ↓
 Web 控制台：Sessions / Issues / Analytics
      ↓
 搜索：用户、错误、URL、自定义属性

核心概念

• App ID：项目标识，形如 org/app。
• Session：一次用户访问录制单元，计费核心维度之一。
• identify：将匿名会话关联到已知用户。
• Session URL：可分享的单会话链接。

技术局限与边界

• 成本较高：按录制会话量计费，高流量站点需严格过滤规则。
• SDK 体积与开销：比轻量错误监控更重，可能影响低端设备。
• 隐私合规：录制用户输入需严格屏蔽；受监管行业需法务评估。
• Canvas/WebGL：复杂图形场景回放有限制。
• 非全栈 APM：后端性能需另配 Datadog/New Relic/Sentry Performance。

生态地图

• 核心 SDK：logrocket
• React：logrocket-react
• 集成：Sentry、Intercom、Zendesk、Segment
• 对比：OpenReplay（开源）、FullStory、Hotjar

生态集成

• Sentry：互链 Session URL 与 Issue。
• Redux：logrocket-react 记录 action。
• Segment：可作为 destination 发送识别事件。
• 客服系统：会话链接嵌入 Zendesk 等工单。

开发与工程化

• 生产过滤规则：排除内部用户、bots、健康检查路径。
• 敏感域屏蔽：支付、密码字段 CSS 选择器 block。
• 仅对付费用户 identify：减少匿名会话存储成本。
• 与 Sentry 分工：错误聚合在 Sentry，深度回放跳 LogRocket。

性能与安全

• 性能：录制有 CPU/带宽开销；官方提供 overhead 测量指南。
• 安全：默认屏蔽信用卡等模式；自定义 dom.blockSelector。
• 合规：签署 DPA；欧盟数据驻留选项咨询销售。
• 勿录密钥：禁止在可录制区域展示 API token。

技术对比

最佳实践

1. 与 Sentry 组合：错误告警在 Sentry，详情跳 LogRocket Session。
2. 严格 identify 策略：登录后才 identify，避免匿名会话爆炸。
3. 配置 dom 屏蔽：所有密码、CVV、身份证输入框。
4. 内部流量过滤：员工 IP、staging 域名不录制。
5. 定期审查录制保留策略，符合数据最小化原则。

学习与社区资源

• 文档：https://docs.logrocket.com
• React 集成：https://docs.logrocket.com/docs/react
• Sentry 集成：https://docs.logrocket.com/docs/sentry
• 隐私：https://docs.logrocket.com/docs/privacy
• 博客：https://logrocket.com/blog