PostHog Session Replay — Watch Users Hit Your AI Features

简介

PostHog Session Replay 录用户在应用里的交互 —— 点击、滚动、console 日志、网络请求 —— 像视频一样回放。用户报「AI 给了错答案」时，你回放他完整会话、看他打的 prompt、模型回复、之后做了啥。适合调试 AI 功能可用性的支持和产品团队。兼容 web（JS SDK）、iOS、Android、React Native。装机时间 5 分钟。

启用 session replay

import posthog from "posthog-js";

posthog.init("phc_...", {
  api_host: "https://us.posthog.com",
  session_recording: {
    maskAllInputs: false,    // 录用户打的字（PII 字段单独 mask）
    maskTextSelector: ".pii", // class="pii" 的元素被 mask
    recordCrossOriginIframes: true,
    blockClass: "no-record",  // class="no-record" 的元素被屏蔽
  },
});

posthog.identify("user_42", { plan: "pro" });

捕获 LLM 专属上下文

// 给录像时间线加 LLM 事件标记，回放更丰富
posthog.capture("llm_call_started", {
  model: "claude-3-5-sonnet",
  prompt_length: 1234,
});

const response = await client.chat.completions.create(...);

posthog.capture("llm_call_completed", {
  model: "claude-3-5-sonnet",
  latency_ms: 1830,
  tokens: 450,
  user_satisfied: null,  // 用户反应后更新
});

按 AI 事件过滤录像

PostHog → Session Replays → 过滤：

• 含事件：llm_call_completed（model = claude-3-5-sonnet）
• 并且：30 秒内发生错误
• 并且：用户没点正面反馈按钮

→ 一队坏体验录像供分诊。

隐私优先默认

• 密码 / 信用卡 / 邮箱字段自动 mask
• 用 maskTextSelector / data-private 属性自定义 mask
• 用 blockClass 屏蔽整个元素
• Cookie banner 同意集成（同意后才开始录）

你会发现的

• 用户打字 30 秒后放弃 AI chat
• 用户读完 AI 响应立刻去别处搜（信号：答案不好）
• 特定浏览器/OS 上的崩溃
• 错误追踪器里看不到的 console 错误

FAQ

Q: Session replay 会拖慢站点吗？ A: 可忽略 —— 录制在 Web Worker 里，payload gzip 压缩批量发。典型首屏开销 <50ms，网络 <2KB/分钟。

Q: 用户能选择不被录吗？ A: 能 —— 在设置页或 cookie banner 拒绝后调 posthog.opt_out_capturing()。配置后也尊重 DNT header。

Q: 录像保留多久？ A: 免费档 1 个月，付费档最多 1 年。自托管可配。要长保留又免费就定期通过 API 导出录像。