Sentry

全栈应用可观测性平台，提供错误监控、性能追踪、Session Replay、日志与分布式追踪，是前端 RUM 领域最广泛采用的方案之一。

精选工具错误监控RUM性能监控Session Replay

Sentry 是覆盖前端、移动端、后端、Edge 的统一可观测平台，提供 JavaScript 异常捕获、Core Web Vitals 性能追踪、Session Replay 与分布式追踪，大幅缩短从告警到根因的定位时间。

Sentry

全栈应用可观测性平台，提供错误监控、性能追踪、Session Replay、日志与分布式追踪，是前端 RUM 领域最广泛采用的方案之一。

技术简介说明

Sentry 最初是错误聚合服务，现已演进为覆盖前端、移动端、后端、Edge 的统一可观测平台。对前端团队而言，它同时提供 JavaScript 异常捕获、Core Web Vitals 与自定义性能 span、Session Replay（类视频会话回放）、结构化日志，以及与后端 trace 关联的分布式追踪能力。

Sentry 的核心价值在于上下文关联：当用户报错时，你可以在同一界面看到错误堆栈、发生前的 Replay、相关网络请求、面包屑（breadcrumbs）、发布版本与环境标签，大幅缩短从告警到根因的定位时间。@sentry/nextjs、@sentry/react 等官方 SDK 对主流框架提供开箱即用的自动埋点。

截至 2026 年，Sentry JavaScript SDK 已发展到 v8/v9/v10 系列，基于 OpenTelemetry 重构了性能监控模型，Replay 包体积经 tree-shaking 优化减少约 20 KB，并支持 AI 驱动的 Replay 摘要等新产品能力。

基本信息

官网：https://sentry.io
GitHub：https://github.com/getsentry/sentry-javascript
License：MIT（SDK）；SaaS 为商业服务
最新版本：JavaScript SDK v10.x（2026）
主要维护者/公司：Functional Software, Inc.（Sentry）
GitHub Stars：约 8,000+（sentry-javascript monorepo）
npm 周下载量：@sentry/browser 约 500 万+
运行环境：浏览器、Node.js、React Native、Next.js、Electron 等

快速上手

安装（Next.js）

npx @sentry/wizard@latest -i nextjs

或手动安装：

npm install @sentry/nextjs

最小示例（React / 浏览器）

import * as Sentry from '@sentry/react'
 
Sentry.init({
  dsn: 'https://<key>@o<org>.ingest.sentry.io/<project>',
  environment: import.meta.env.MODE,
  release: '[email protected]',
  tracesSampleRate: 0.1,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration({
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
})

手动捕获与上下文

Sentry.setUser({ id: '123', email: '[email protected]' })
Sentry.setTag('feature', 'checkout')
 
try {
  riskyOperation()
} catch (error) {
  Sentry.captureException(error)
}

性能追踪（自定义 span）

Sentry.startSpan({ name: 'fetchProducts', op: 'http.client' }, async () => {
  const res = await fetch('/api/products')
  return res.json()
})

核心特性

错误监控：未捕获异常、Promise rejection、框架错误边界集成。
性能监控（APM）：基于 OpenTelemetry 的 span 模型，自动 instrument fetch、路由、LCP 等。
Session Replay：DOM 与用户交互回放，默认隐私脱敏（mask text/media）。
分布式追踪：前后端 trace 关联，在 Replay 时间轴查看对应 span。
Release & Source Maps：按版本聚合问题，上传 source map 还原堆栈。
面包屑：自动记录点击、导航、console、XHR 等事件链。
告警与 Issue 工作流：分配、去重、回归检测、Slack/Jira 集成。
AI Replay 摘要：自动生成会话关键步骤摘要（需开启 Generative AI 功能）。

适用场景

生产环境需要 7×24 错误告警与趋势分析的团队。
Next.js / React SPA 需要性能 + 错误 + Replay 一体化可观测。
全栈应用需要前后端 trace 串联排查慢请求与 API 错误。
需要按 release 对比稳定性、做发布门禁的 CI/CD 流程。
对隐私合规有要求但希望保留足够调试上下文的产品（可配置脱敏规则）。

技术亮点

框架 SDK 成熟：@sentry/nextjs 深度集成 App Router、Server Components、Edge。
OpenTelemetry 统一模型：v8+ 性能数据与行业标准对齐，便于导出或混合观测栈。
Replay 与 Trace 联动：时间轴上直接跳转 trace 详情，减少工具切换。
采样与成本控制：tracesSampleRate、replaysSessionSampleRate 等精细控制配额。
自托管选项：Sentry 开源核心可私有部署（功能与 SaaS 有差异）。

核心概念与架构

数据流

应用 SDK（browser/node/nextjs）
      ↓
 事件：error / transaction(span) / replay / log
      ↓
 Sentry Ingest（按 DSN 路由）
      ↓
 处理：聚合、符号化（source map）、指纹去重
      ↓
 Issue / Performance / Replay 界面 + 告警

核心概念

DSN：项目数据接入地址，含公钥与组织信息。
Issue：按指纹聚合的错误群组。
Span / Trace：性能监控单元，v8+ 统一为 OTel span 树。
Release：部署版本标识，关联 commit 与 source map。
Sample Rate：采样率，控制性能与 Replay 数据量与费用。

技术局限与边界

成本随流量增长：高 PV 站点性能与 Replay 采样需精细调优，否则账单显著上升。
Replay 非真正视频：基于 DOM 快照与事件重建，Canvas/WebGL 场景有限制。
SDK 体积：完整功能（tracing + replay）gzip 后约 24–30 KB+，需按功能裁剪 integrations。
国内访问：SaaS ingest 延迟与合规需评估，部分团队采用自托管或代理。
PII 风险：Replay 与 breadcrumbs 可能捕获敏感信息，必须配置 mask/block 规则。

生态地图

浏览器：@sentry/browser
框架：@sentry/react、@sentry/nextjs、@sentry/vue、@sentry/sveltekit
移动端：@sentry/react-native、sentry-cocoa、sentry-android
后端：@sentry/node、@sentry/python 等
构建：@sentry/webpack-plugin、@sentry/vite-plugin（source map 上传）
关联：web-vitals、OpenTelemetry、GitHub、Jira、Slack

生态集成

Next.js：Wizard 生成 instrumentation.ts、sentry.client.config.ts 等。
web-vitals：可结合自定义 beforeSend 上报 CWV 或使用 Sentry 性能 span。
CI/CD：构建时上传 source map 与 release；部署后创建 Sentry release。
LogRocket / Datadog：部分团队 Sentry 管错误，其他平台管 RUM，需注意重复采样。
自托管：Docker + Kafka/ClickHouse 等（运维成本高）。

开发与工程化

分环境 DSN 与 sample rate：开发 100% 采样，生产降低 tracesSampleRate。
Release 与 commit 关联：SENTRY_RELEASE 环境变量 + CI 上传 source map。
错误边界：React Sentry.ErrorBoundary 捕获渲染错误并展示 fallback。
过滤噪音：ignoreErrors、denyUrls 过滤浏览器扩展与第三方脚本错误。
Replay 隐私：maskAllText、blockSelector 屏蔽支付、表单等敏感区域。

性能与安全

性能：Replay 在 Web Worker 压缩，设计目标是对主线程影响最小；仍建议生产采样而非 100% 全录。
安全：DSN 为公开客户端密钥，需配合 server-side 鉴权；禁止在 SDK 中硬编码服务端 secret。
合规：欧盟用户注意数据驻留与 DPA；Replay 默认脱敏，医疗/金融需额外审计配置。
数据保留：按套餐设置事件与 Replay 保留期，避免无限存储。

技术对比

维度	Sentry	Datadog RUM	LogRocket
错误监控	极强（核心）	强	强
Session Replay	强	有	极强（核心）
全栈 APM	强	极强	弱
开源/自托管	可自托管	否	否
前端 SDK 成熟度	极高	高	高
定价	按事件量	按主机/RUM 会话	按会话
适合	全栈错误+性能	企业统一观测	前端回放调试

最佳实践

生产环境分层采样：错误 100% 上报，trace 与 replay 按 1%–10% 采样。
务必上传 Source Map：否则生产堆栈不可读，Issue 价值大减。
Replay 仅错误会话全采：replaysOnErrorSampleRate: 1.0 + 低 replaysSessionSampleRate。
用 Release 做发布对比：新版本 error rate 上升立即回滚。
配置 PII 脱敏：支付页、登录表单 block + mask。
关联用户 ID：Sentry.setUser 便于客服与工程协同，避免放密码/token。
定期清理 ignore 列表：避免真实问题被误过滤。

学习与社区资源

官方文档：https://docs.sentry.io
Next.js 指南：https://docs.sentry.io/platforms/javascript/guides/nextjs
Session Replay：https://docs.sentry.io/product/session-replay
SDK 迁移（v8）：https://docs.sentry.io/platforms/javascript/migration
GitHub：https://github.com/getsentry/sentry-javascript
博客：https://blog.sentry.io