LogRocket #

什么是 LogRocket？ #

LogRocket 是一个专注于前端应用的监控平台，提供会话回放、错误追踪、性能监控等功能。它就像飞机的"黑匣子"，记录用户在应用中的每一次操作，让开发者能够像看电影一样回放用户遇到的问题。

核心定位 #

text

┌─────────────────────────────────────────────────────────────┐
│                        LogRocket                             │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  会话回放    │  │  错误追踪    │  │  性能监控    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  网络请求    │  │  控制台日志  │  │  用户分析    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

LogRocket 的优势 #

优势	说明
会话回放	像看电影一样回放用户操作过程
错误追踪	完整的错误上下文和堆栈信息
性能监控	Core Web Vitals 等关键指标
网络请求	完整的请求/响应记录
状态管理	Redux/Vuex 状态追踪
隐私保护	支持敏感信息屏蔽

文档结构 #

本指南按以下结构组织，循序渐进地帮助你掌握 LogRocket：

1. 入门基础 #

主题	描述	文档链接
LogRocket 简介	LogRocket 的定义、特点、历史与应用场景	intro.md
安装与配置	各平台安装配置、框架集成	installation.md
基础使用	用户识别、事件追踪、日志记录	basics.md

2. 核心功能 #

主题	描述	文档链接
会话回放	DOM 录制、用户行为分析、问题复现	session-replay.md
性能监控	Core Web Vitals、页面加载、资源分析	performance.md
错误追踪	JavaScript 错误、Promise 拒绝、资源加载失败	error-tracking.md

3. 高级应用 #

主题	描述	文档链接
高级特性	状态管理集成、自定义事件、隐私配置	advanced.md
最佳实践	项目集成、团队协作、性能优化	best-practices.md

学习路径 #

入门阶段（LogRocket 新手） #

了解 LogRocket 的基本概念和优势
搭建 LogRocket 环境
掌握用户识别和事件追踪
学会使用会话回放功能
理解错误追踪的基本用法

进阶阶段（LogRocket 熟练） #

深入理解会话回放原理
掌握性能监控指标
配置错误追踪规则
集成状态管理工具
实现隐私保护配置

高级阶段（LogRocket 专家） #

自定义监控方案
性能优化实践
团队协作流程
API 集成开发
企业级部署

LogRocket vs 其他监控工具 #

特性	LogRocket	Sentry	FullStory	Hotjar
会话回放	✅	✅	✅	✅
错误追踪	✅	✅	⚠️	❌
性能监控	✅	✅	⚠️	❌
网络请求	✅	⚠️	✅	❌
状态管理	✅	❌	❌	❌
价格	付费	免费/付费	付费	免费/付费

快速开始 #

安装 #

bash

npm install logrocket --save

初始化 #

javascript

import LogRocket from 'logrocket';

LogRocket.init('your-app-id/app-name');

用户识别 #

javascript

LogRocket.identify('user-123', {
  name: 'John Doe',
  email: 'john@example.com'
});

事件追踪 #

javascript

LogRocket.track('Purchase Completed', {
  productId: 'prod-123',
  price: 99.99
});

核心概念 #

Session（会话） #

用户从进入网站到离开的整个过程，包含所有交互记录。

Recording（录制） #

会话的录制文件，可以回放查看。

Issue（问题） #

被检测到的问题，如 JavaScript 错误、性能问题等。

Event（事件） #

用户操作或系统事件，如点击、导航、网络请求等。

常见应用场景 #

1. Bug 复现与调试 #

text

传统方式：
用户报告 Bug → 尝试复现 → 查看日志 → 猜测原因 → 修复

LogRocket 方式：
收到错误告警 → 查看会话回放 → 看到完整操作过程 → 立即定位

2. 性能优化 #

查看页面加载时间分布
分析资源加载瀑布图
找出慢 API 请求
检查 JavaScript 执行时间

3. 用户体验分析 #

用户在某个页面停留时间
用户操作路径分析
表单填写行为分析
功能使用情况统计

4. 客户支持 #

客服通过用户 ID 搜索会话
直接观看用户操作过程
快速定位问题原因
提升支持效率

资源推荐 #

LogRocket 官方网站：最权威的 LogRocket 文档
LogRocket 博客：技术文章和教程
LogRocket GitHub：SDK 源码
LogRocket 文档：详细 API 文档

更新日志 #

2026-03-29：创建初始版本，包含完整的 LogRocket 学习大纲

继续探索本指南，逐步掌握 LogRocket 前端监控技术，从新手成长为前端监控专家！