Sentry Blog
·
Next.js 可观察性缺口及其解决方案
💡
原文英文，约2500词，阅读约需9分钟。
📝
内容提要
Next.js在生产环境中的可观察性存在缺口，尤其是错误信息不够详细。Sentry可以通过手动仪器化和配置，捕捉服务器端异常、数据库查询和水合错误。使用Sentry的HTML差异工具可以更好地调试水合错误。对于服务器操作，需要手动包装以确保追踪完整性，日志和指标不受采样限制，确保获取所有数据。
🎯
关键要点
- Next.js在生产环境中缺乏可观察性，错误信息不够详细。
- Sentry可以通过手动仪器化和配置捕捉服务器端异常、数据库查询和水合错误。
- 使用Sentry的HTML差异工具可以更好地调试水合错误，显示服务器和客户端渲染的DOM差异。
- 服务器操作需要手动包装以确保追踪完整性，使用withServerActionInstrumentation来连接客户端和服务器的追踪。
- 日志和指标不受采样限制，确保获取100%的数据，适用于不能容忍数据缺失的情况。
- 数据库查询通过ORM默认不可见，需添加数据库客户端集成以显示实际SQL查询。
- AI代理监控可以追踪模型的令牌使用情况和成本，帮助识别费用来源。
❓
延伸问答
Next.js的可观察性缺口主要表现在哪些方面？
Next.js在生产环境中缺乏详细的错误信息，错误可能在一个层面上出现但源于另一个层面，数据库查询被ORM抽象隐藏。
如何使用Sentry捕捉Next.js中的服务器端异常？
可以通过手动仪器化和配置Sentry来捕捉服务器端异常、数据库查询和水合错误。
水合错误在Next.js中如何调试？
使用Sentry的HTML差异工具可以查看服务器和客户端渲染的DOM差异，从而帮助调试水合错误。
为什么Next.js的生产错误信息不够有用？
Next.js在生产构建中故意剥离了服务器端失败的错误详细信息，以避免泄露敏感信息，这使得调试变得困难。
如何确保Next.js中的日志和指标不受采样限制？
在Sentry的初始化文件中添加enableLogs: true，可以确保获取100%的日志和指标数据。
如何在Next.js中监控AI代理的费用和使用情况？
通过Vercel AI SDK集成，Sentry可以捕捉每个模型的令牌使用情况和费用分解。
➡️
