mcpField
E
error-tracking-nextjs

error-tracking-nextjs

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

关于 error-tracking-nextjs

为 Next.js 应用添加 PostHog 错误跟踪的技能，提供初始化、异常捕获和源码映射等实施指导，并强调保留现有错误处理。

主要功能

  1. 01指导配置 PostHog 错误跟踪
  2. 02建议启用异常自动捕获
  3. 03捕获边界和已捕获的错误
  4. 04指导上传源码映射
  5. 05提供 Next.js 专项建议

适用场景

  1. 01为 Next.js 应用添加错误跟踪
  2. 02捕获全局处理器遗漏的错误
  3. 03借助源码映射还原堆栈跟踪

安装

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

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

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

包含的文件

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

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

详细介绍

Next.js 的 PostHog 错误跟踪

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

参考文件

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

请查阅文档，了解 API 详情和框架特定模式。

关键原则

  • 环境变量：始终使用环境变量存储 PostHog 密钥和主机 URL。切勿将它们硬编码。
  • 最小改动：在现有错误处理旁添加错误跟踪。不要替换或重构现有的错误处理代码。
  • 优先启用自动捕获：在 SDK 初始化时启用异常自动捕获，然后再添加手动捕获。
  • 源映射：上传源映射，让堆栈跟踪指向原始源代码，而不是压缩后的代码包。
  • 在边界处手动捕获：对于未传递到全局处理器的错误，请在错误边界和 catch 块中使用 captureException()。

框架指南

  • 对于 Next.js 15.3 及更高版本，在 instrumentation-client.ts 中初始化 PostHog 是最简单的配置方式
  • 对于功能标志，请使用 useFeatureFlagEnabled() 或 useFeatureFlagPayload() 钩子——它们会自动处理加载状态和外部同步
  • 在用户操作发生的事件处理程序中添加分析捕获，而不是在响应状态变化的 useEffect 中添加
  • 不要使用 useEffect 转换数据——应在渲染期间计算派生值
  • 不要使用 useEffect 响应用户事件——应将相关逻辑放在事件处理程序本身中
  • 不要使用 useEffect 串联状态更新——应在事件处理程序中一并计算所有相关更新
  • 不要使用 useEffect 通知父组件——应在事件处理程序中调用父级回调，并同时调用 setState
  • 要在 prop 变化时重置组件状态，请将 prop 作为组件的 key 传入，而不是使用 useEffect
  • useEffect 仅用于与外部系统同步（非 React 小部件、浏览器 API、网络订阅）

评论

支持 Markdown