This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
使用 PostHog
编辑页面
安装和配置 PostHog 以进行产品分析、会话回放和错误跟踪的指南。
PostHog 是一个产品分析平台,提供会话回放、功能标志和错误跟踪。
EAS CLI 集成会自动完成标准的 PostHog React Native 设置:安装 SDK、创建 PostHog 组织和项目,以及配置你的环境变量。你也可以手动设置它,并且其余部分可保持本指南不变。
3 requirements
3 requirements
1.
注册一个 Expo 账户。
2.
npm install -g eas-cli 全局安装 EAS CLI。3.
创建一个 Expo 项目,并使用 eas init 将其链接到 EAS。
你将学到什么
本指南涵盖将 PostHog 集成到你的 Expo 项目中:
安装并配置 PostHog
1
运行 connect 命令
在你的项目目录中运行以下命令:
此命令会:
- 提示你选择 PostHog 区域(US 或 EU)。该区域会设置你的数据驻留位置,并且在连接后无法更改。
- 为你创建一个 PostHog 组织和项目;如果你之前已经连接过,则会重用现有的组织和项目。如果你的邮箱已经有 PostHog 账户,
connect会打开浏览器请求你批准关联,然后继续执行。 - 询问要设置哪些功能:Analytics、Session replay 和 Error tracking 的多选项,默认全部启用。
- 如果你启用了 error tracking,会提示你粘贴一个 PostHog personal API key。请在 PostHog 的 Settings → Personal API keys 中使用 “Source map upload” 预设创建一个。(在非交互模式下,请通过
--posthog-cli-api-key传入。) - 安装 PostHog SDK 和所需的 Expo 模块(如果你保留该功能,还会安装 session-replay 包)。
- 将
posthog-react-native/expo配置插件添加到你的应用配置中。该插件会为 PostHog 的 SDK、session replay 和错误符号化所依赖的原生模块完成接线。它会为你编辑一个静态的 应用配置 文件,但无法编辑动态应用配置,因此它会打印出插件条目供你手动添加。 - 将
EXPO_PUBLIC_POSTHOG_API_KEY和EXPO_PUBLIC_POSTHOG_HOST写入 .env.local,并写入你在 Production、Preview 和 Development 环境中的 EAS 环境变量。启用 error tracking 后,它还会将个人 API key 以POSTHOG_CLI_API_KEY(使用敏感可见性)保存,并保存公开的POSTHOG_CLI_PROJECT_ID和POSTHOG_CLI_HOST。
重新运行 connect 是安全的:它会重用你现有的组织和项目,并在覆盖环境变量前提示你确认。
2
将你的应用包裹在 <PostHogProvider> 中
在你的根布局文件中(使用 Expo Router 时为 src/app/_layout.tsx),用 <PostHogProvider> 包裹你的应用,并从命令写入的环境变量中读取密钥。有关所有选项(包括 error-tracking autocapture),请参阅 PostHog React Native 文档。
3
4
验证配置
添加一个临时按钮来捕获测试事件,运行你的开发构建,然后点击它:
import { Button } from 'react-native'; import { usePostHog } from 'posthog-react-native'; // 在组件内部 const posthog = usePostHog(); <Button title="发送测试事件" onPress={() => posthog?.capture('test_event')} />
打开你的 PostHog 项目(根据你的区域,在 https://us.posthog.com 或 https://eu.posthog.com),并确认事件已到达。
错误追踪
如果你启用了错误追踪,PostHog 会对两种独立的内容进行符号化处理,并且它们需要分别配置:
- JavaScript 源映射:用于 JS/TS 异常,包括 Hermes 字节码。参见源映射。
- 原生调试符号:用于原生 Android 和 iOS 崩溃(ProGuard/R8 映射和 dSYM)。可选。参见原生崩溃符号化。
源映射
源映射会让 JavaScript 堆栈跟踪(包括 Hermes 字节码)指向你的原始源码,而不是压缩后的输出。
首先,设置注入,使每个 bundle 都带有上传标记。将以下内容添加到项目根目录中的 metro.config.js(如果文件不存在就创建一个):
如果你已经自定义了 Metro 配置(例如使用 NativeWind 或在 monorepo 中),请对 getPostHogExpoConfig 返回的 config 对象进行修改,而不是自己调用 getDefaultConfig。
PostHog 的 CLI 使用 connect 设置的 POSTHOG_CLI_* 环境变量进行身份验证。如果要从你自己的机器上传,请改为运行 posthog-cli login。
在 EAS Build 中,posthog-react-native/expo 配置插件会在 Android(Gradle)和 iOS(Xcode)构建阶段自动上传源映射,因此无需额外运行命令。
在 EAS Update 中,空中更新只包含 JavaScript,因此每次更新后只需上传其源映射(原生符号在构建时固定)。安装 PostHog 的 CLI,然后每次导出一个平台并上传其映射:
dist 是 EAS Update 默认的输出目录。每次上传只导出一个平台:PostHog 会上传原生(Hermes)源映射,因此 dist 中的 Web bundle 不会被处理。
使用 EAS Workflows 自动上传
EAS Build 会将源映射作为原生构建的一部分上传,因此构建工作流无需额外配置。对于更新,请使用 eas update 发布,然后在该更新导出的 dist 目录上运行 eas/posthog_upload_sourcemaps 函数。
一个完整的工作流,用于发布更新并上传同一次导出的源映射。
原生崩溃符号化
可选。原生崩溃(不同于 JavaScript 异常)需要在构建时上传原生调试符号。posthog-react-native/expo 插件在 EAS Build 中启用后即可执行此操作:
这只是端到端所需的三个组成部分之一:构建时符号上传(上文)、在你的提供商中进行原生崩溃自动捕获,以及你在 PostHog 项目中的异常自动捕获设置。完整配置请参见 PostHog 的原生崩溃自动捕获。
发布标记
通过从 expo-updates 和 expo-constants 注册超级属性,将每个捕获的事件关联到生成它的更新、项目和账户:
import { useEffect } from 'react'; import Constants from 'expo-constants'; import * as Updates from 'expo-updates'; import { usePostHog } from 'posthog-react-native'; function ReleaseTagger() { const posthog = usePostHog(); useEffect(() => { posthog?.register({ 'eas/update_id': Updates.updateId, 'eas/channel': Updates.channel, 'eas/runtime_version': Updates.runtimeVersion, 'eas/project_id': Constants.expoConfig?.extra?.eas?.projectId, 'eas/account': Constants.expoConfig?.owner, }); }, [posthog]); return null; }
在 <PostHogProvider> 中渲染 <ReleaseTagger />。之后的每次 capture() 都会携带这些属性,因此你可以在 PostHog 中按 eas/update_id 筛选或分组事件。只有当你的应用配置设置了 owner 时,eas/account 才有值。eas/update_id 和 eas/channel 仅在 release 和 preview 构建中设置。在 Expo Go 和开发构建中,它们的值为 null,因此这些构建产生的事件不会携带它们。
标准 EAS 属性
PostHog 可以识别这些 eas/ 名称。它会在每个名称旁显示 Expo 徽标,并将带有标识符的属性链接到 expo.dev 上对应的页面。每个值的来源取决于事件是在你的应用中触发,还是在工作流中触发:
ReleaseTagger 代码片段会从 expo-updates 和 expo-constants 设置应用内的值。在工作流中,通过 eas/posthog_capture_event 设置相同的名称:eas/account、eas/project_id 和 eas/workflow_id 分别来自 account、app 和 workflow 上下文,每个作业都可以读取这些上下文。构建和更新字段来自构建或更新作业的输出。配方展示了具体用法。eas/update_id 在应用中是单个更新 ID,在工作流中则是更新组 ID;一次发布会生成一组特定于平台的更新。两者都会在 expo.dev 上打开对应更新。
功能标志
一旦提供程序设置完成,功能标志即可工作,无需额外配置。请参阅 PostHog 的 React Native 功能标志 和引导加载,以避免应用启动时进行一次网络往返。
与 EAS Workflows 一起使用
EAS Workflows 可以从 CI 流程中与 PostHog 进行交互。你可以发送事件、创建注释、推出功能标志、根据实时指标控制发布流程,以及将源映射作为工作流步骤上传。这些步骤会自动读取 connect 设置的 EXPO_PUBLIC_POSTHOG_* 和 POSTHOG_CLI_* 环境变量。有关每个步骤的完整输入参考,请参阅 EAS Workflows 语法参考中的 PostHog 函数。
从标记部署开始,逐步实现受控发布、自动熔断开关和需审批的发布,并提供配方参考以便快速查找。
管理集成
之后可使用以下命令来管理该集成:
dashboard 会打开你关联的 PostHog 项目。disconnect 仅会移除 Expo 端的关联。你的 PostHog 组织、项目和数据都会保留不变。
手动设置
connect 是标准 PostHog React Native 设置的快捷方式。要手动进行设置,请遵循 PostHog 的 React Native 安装指南,然后设置 EXPO_PUBLIC_POSTHOG_API_KEY 和 EXPO_PUBLIC_POSTHOG_HOST(以及用于源映射的 POSTHOG_CLI_* 变量)。按照步骤 2 所示,将你的应用包裹在 <PostHogProvider> 中。关于源映射,请参见源映射。
故障排查
没有事件到达
确认 EXPO_PUBLIC_POSTHOG_API_KEY 已设置在构建所使用的环境配置文件中。请注意,disabled: __DEV__ 会阻止来自开发构建的事件,因此请在预览或生产构建中进行测试(或暂时移除它)。如果在 connect 写入环境变量时开发服务器已经在运行,请执行完整重载(不是 Fast Refresh),以便应用获取新的 EXPO_PUBLIC_* 值。
会话回放不起作用
会话回放需要开发构建,因为它无法在 Expo Go 中工作。如果你的项目使用持续原生生成,请在本地使用 npx expo run:android 或 npx expo run:ios 创建一个,或者使用 eas build --profile development。
源映射无法进行符号化
确认你的 metro.config.js 已使用 getPostHogExpoConfig 包裹(参见源映射),并且已设置 POSTHOG_CLI_* 环境变量(启用错误跟踪时,connect 会添加这些变量)。对于空中更新,请确保在 eas update 之后运行了 posthog-cli hermes upload --directory dist。
'你已经有一个 PostHog 账户'
如果你的邮箱已经有一个 PostHog 账户,connect 会打开浏览器,请求你批准将其链接到 Expo,然后继续。请在它打开的浏览器标签页中批准该请求。如果你拒绝了或关闭了标签页,请重新运行 connect。