mcpField
E
error-tracking-react

error-tracking-react

github.com/posthog开发76110 次安装今天更新
代码仓库

关于 error-tracking-react

为 React 应用添加 PostHog 错误跟踪提供开发指导，适用于负责前端监控与分析接入的开发者。内容涵盖异常捕获、源码映射和 React 事件处理建议。

主要功能

  1. 01启用异常自动捕获
  2. 02在错误边界手动捕获异常
  3. 03上传源码映射
  4. 04在用户事件处理器中记录分析
  5. 05提供告警和问题管理参考

适用场景

  1. 01为 React 应用接入错误监控
  2. 02捕获未传播到全局处理器的异常
  3. 03还原压缩代码中的错误堆栈
  4. 04在用户操作发生时记录分析事件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/posthog/skills --skill error-tracking-react

安装后在 Claude Code 中输入/error-tracking-react确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
alerts.md
assigning-issues.md
fingerprints.md
monitoring.md
react.md
upload-source-maps.md

详细介绍

React 错误跟踪

此技能可帮助你为 React 应用添加 PostHog 错误跟踪。

参考文件

  • references/react.md - React 错误跟踪安装文档
  • references/fingerprints.md - 指纹文档
  • references/alerts.md - 发送错误跟踪告警文档
  • references/monitoring.md - 监控和搜索问题文档
  • references/assigning-issues.md - 将问题分配给队友的文档
  • references/upload-source-maps.md - 上传源映射文档

请参阅文档，了解 API 详情和针对特定框架的模式。

关键原则

  • 环境变量：始终使用环境变量来配置 PostHog 密钥和主机 URL。切勿将它们硬编码。
  • 尽量少改动：在现有错误处理逻辑的基础上添加错误跟踪。不要替换或重构现有的错误处理代码。
  • 优先启用自动捕获：在 SDK 初始化时启用异常自动捕获，然后再添加手动捕获。
  • 源映射：上传源映射，让堆栈跟踪能够解析到原始源代码，而非压缩后的代码包。
  • 在边界处手动捕获：对于不会传播到全局处理程序的错误，请在错误边界和 catch 块中使用 captureException()。

框架指南

  • 对于功能标志，请使用 useFeatureFlagEnabled() 或 useFeatureFlagPayload() 钩子——它们会自动处理加载状态和外部同步
  • 在用户执行操作的事件处理程序中添加分析捕获，而不是在响应状态变化的 useEffect 中添加
  • 不要使用 useEffect 转换数据——应在渲染期间计算派生值
  • 不要使用 useEffect 响应用户事件——应将逻辑放在事件处理程序本身中
  • 不要使用 useEffect 链式更新状态——应在事件处理程序中一并计算所有相关更新
  • 不要使用 useEffect 通知父组件——应在事件处理程序中调用 setState 的同时调用父组件的回调
  • 要在属性变化时重置组件状态，请将该属性作为组件的 key 传入，而不是使用 useEffect
  • useEffect 仅用于与外部系统同步（非 React 小组件、浏览器 API、网络订阅）

评论

支持 Markdown