性能监控与 Session Replay：全栈集成与边界

基于 Sentry 8.x · 核于 2026-08

速查

• Performance（性能监控）：Sentry 扩展能力——SDK 自动埋点（前端 fetch/XHR、后端 DB 查询/HTTP），记录 span 耗时组成 trace，定位慢请求。
• trace + span：一次请求的完整链路（trace）由多个 span（每个操作段，如 fetch、DB query）组成，与 OpenTelemetry 模型兼容。
• 与错误关联：同一 trace 的错误 + 慢链路放一起看——错误发生在哪个慢 span，根因定位更准。
• 采样：性能 trace 默认采样（tracesSampleRate: 0.2 上报 20%），错误事件默认全采（错误稀有）。
• Session Replay：录制用户操作的 DOM 快照 + 网络 + 控制台 + Redux 状态，像看视频回放现场，排查「无法复现」错误。
• 隐私保护：Replay 可配置遮罩（mask）敏感输入（密码/手机号），不上传明文；可白名单/黑名单 DOM 节点。
• 前后端通用 SDK：JS/TS、React/Vue/Angular/Next.js、Python、Java、Go、Rust、Flutter、React Native、Swift、Kotlin、Electron——一个平台看全栈。
• 跨端 trace 关联：前端请求带 sentry-trace 头，后端 SDK 接力传播 trace_id，错误可在 Sentry 关联同一请求的前后端链路。
• 与专用 APM 的边界：Sentry Performance 是「错误优先、性能附赠」，深度（服务拓扑/调用链分析）不及 SkyWalking/Datadog APM——重型 APM 场景仍需专用工具。

一、Performance：性能监控

Sentry 的 Performance 通过 SDK 自动埋点采集 trace：

自动埋点

// @sentry/react 自动埋点：
//   - 页面加载（page load/navigation）
//   - fetch/XHR 请求（每个请求一个 span）
//   - React 组件渲染（component render耗时，可选）
//   - Vue 组件生命周期（@sentry/vue）

// @sentry/nextjs 自动埋点：
//   - 服务端渲染（getServerSideProps/SSR）
//   - API routes
//   - 客户端导航

// 后端（sentry-python）自动埋点：
//   - HTTP 请求处理（Django/Flask/FastAPI 中间件）
//   - DB 查询（SQLAlchemy/Django ORM）
//   - Redis 操作、Celery 任务

trace 与 span 模型

trace（一次请求的完整链路，唯一 trace_id）
├─ span: HTTP GET /api/order       （总请求，1200ms）
│  ├─ span: DB query SELECT ...     （350ms）
│  ├─ span: Redis GET user:123      （15ms）
│  └─ span: HTTP call payment-svc   （700ms）← 慢 span

• 慢 span 定位：trace 里耗时最长的 span 是瓶颈（如上例的 payment-svc 调用 700ms）。
• OpenTelemetry 兼容：Sentry 的 trace/span 模型与 OTel 一致，可互转——可与 Jaeger/Tempo 互通。

性能与错误关联

• 同一 trace 若有错误，Sentry 在 trace 视图标红出错 span——一眼看到「错误发生在哪个操作」。
• 典型场景：用户报「下单失败」→ Sentry 找到该 trace → 看到错误发生在 payment-svc 调用 span → 定位到后端支付服务异常。

性能采样

Sentry.init({
  tracesSampleRate: 0.2,              // 20% 请求采性能 trace
  // 或动态采样
  tracesSampler: (samplingContext) => {
    if (samplingContext.transactionContext.name === "/api/health") return 0;  // 健康检查不采
    if (samplingContext.parentSampled) return true;                            // 跟随父 trace
    return 0.2;
  },
});

• 采样必要：性能 trace 量大（每个请求一个），全采成本高；错误事件稀有且重要，默认全采不采样。

二、Session Replay：会话回放

Session Replay 录制用户操作的现场，是排查「无法复现」错误的利器：

录制内容

• DOM 快照：记录 DOM 变化序列（mutation observer），回放时重建 DOM 演变——像看用户操作的视频。
• 网络请求：fetch/XHR 的请求与响应（可配置只存元数据或含 body）。
• 控制台日志：console.log/error/warn。
• 状态（可选）：Redux/Vuex/Pinia 状态变化（需插件）。
• 用户交互：鼠标移动轨迹、点击位置、输入（按配置遮罩）。

回放体验

用户报错 → Sentry 找到该错误的 event
→ 关联的 Replay（报错前后的会话录制）
→ 像看视频一样回放：
   - 看到 DOM 变化（点了哪个按钮、弹了什么）
   - 看到网络请求（请求了什么、响应是什么）
   - 看到控制台报错（完整 stack）
   - 看到用户输入（敏感字段遮罩成 ***）

隐私保护

Sentry.init({
  replaysSessionSampleRate: 0.1,       // 常规会话 10% 录制
  replaysOnErrorSampleRate: 1.0,       // 报错会话 100% 录制
  // 遮罩配置
  maskAllText: true,                   // 遮罩所有文本
  blockAllMedia: true,                 // 屏蔽媒体（视频/图片）
  // 或精细配置
  mask: [".sensitive-input"],          // 遮罩指定选择器
  block: [".private-section"],         // 完全屏蔽（不录制）
});

• 默认遮罩：SDK 默认遮罩密码框、隐藏输入内容，不上传明文敏感数据。
• 合规：GDPR/隐私场景配置 maskAllText + blockAllMedia，确保不上传 PII（个人身份信息）。

Replay 的限制

• 仅 SaaS 完整支持：self-hosted Sentry 的 Replay 受限（需特定版本 + 配置）。
• 性能开销：录制有 DOM 监听开销，配采样率控制（不要 100% 录常规会话）。
• 跨域 iframe：跨域 iframe 内的 DOM 无法录制（同源策略）。

三、前后端全栈集成

Sentry SDK 覆盖主流语言与框架，一个平台看全栈：

端	SDK	典型用法
React	@sentry/react	ErrorBoundary 组件 + 自动 unhandledrejection
Vue	@sentry/vue	errorHandler + 自动 unhandledrejection
Angular	@sentry/angular	ErrorHandler + 依赖注入
Next.js	@sentry/nextjs	前后端一体（SSR + 客户端）
Nuxt	@sentry/nuxt	Vue + Nitro 服务端
Node.js	@sentry/node	Express/Fastify/Koa/NestJS 中间件
Python	sentry-sdk	Django/Flask/FastAPI 集成
Java	sentry-java	Spring Boot starter
Go	sentry-go	http.Handler 中间件
Rust	sentry-rust	panic hook
Flutter	sentry-flutter	FlutterError + Zone
React Native	@sentry/react-native	JS + 原生崩溃
iOS	sentry-cocoa	NSSetUncaughtExceptionHandler
Android	sentry-java (Android)	Thread.setDefaultUncaughtExceptionHandler
Electron	@sentry/electron	主进程 + 渲染进程

跨端 trace 关联

浏览器（@sentry/react）发请求到后端（sentry-python）：
  前端 trace_id = abc123
  → fetch /api/order，带 header: sentry-trace: abc123-xxx
  → 后端 SDK 读 header，接力 trace_id = abc123
  → 同一 trace 在 Sentry 关联前后端 span
  → 一个 trace 视图看完整链路：前端按钮点击 → 后端 DB 查询

• sentry-trace header：前端 SDK 自动在 fetch/XHR 加 sentry-trace 头，后端 SDK 解析后传播 trace_id，实现跨端关联。
• 与 OTel 兼容：这套 trace 传播与 W3C Trace Context（traceparent 头）一致。

四、与专用 APM 的边界

Sentry Performance 与专用 APM（SkyWalking/Datadog APM/New Relic）相比：

维度	Sentry Performance	专用 APM
核心定位	错误优先，性能附赠	性能/调用链为主
服务拓扑	基础	强（自动服务依赖图）
调用链分析	trace 视图	强（聚合统计、对比）
指标监控	弱（无 PromQL）	强（自定义指标/告警）
错误追踪	强（核心主场）	弱（多为日志检索）
成本	中	高（Datadog 按主机收费）

• 选 Sentry Performance：错误优先（错误追踪是核心），性能监控够用即可，预算有限，团队全栈。
• 选专用 APM：性能深度分析是核心需求（服务拓扑、调用链聚合、自定义指标），大型微服务架构。

两者常并存：Sentry 管错误，APM 管性能与拓扑。

下一步

掌握了 Sentry 的错误追踪、性能监控与 Session Replay 后，可看本叶参考（SDK 集成速查、Source Map 命令、易错点），或横向看其他可观测性工具——Prometheus（指标）、ELK Stack（日志）、Grafana（可视化）、Jaeger（追踪）。