Zod 在 Chrome 最新版本中的错误显示问题解析

问题背景

Zod 是一个流行的 TypeScript 模式验证库，近期有开发者报告在 Chrome 125.0.6422.77 (arm64, macOS) 版本中，Zod 错误信息无法正常显示的问题。这个问题特别出现在与 Redux Toolkit Query 结合使用时，错误对象在控制台输出时显示为空白。

技术分析

经过深入调查，发现问题根源在于 Chrome 最新版本对错误对象 message 属性的处理方式发生了变化。具体表现为：

1. 属性检测机制变更：Chrome 125 开始，控制台在显示错误对象时，似乎不再调用 getter 方法获取 message 属性值，而是直接检查对象自身属性。由于 ZodError 的 message 是通过 getter 实现的，导致 Chrome 认为该错误没有消息内容。

2. 继承关系影响：常规 Error 对象的 message 是实例属性，而 ZodError 选择通过 getter 动态生成消息内容。这种实现差异在 Chrome 新版本中导致了显示不一致。

3. 浏览器兼容性：该问题仅出现在 Chrome 125+ 版本，旧版 Chrome 和其他浏览器（如 Safari 和 Firefox）均能正常显示错误信息。

解决方案探讨

针对这一问题，社区提出了几种解决方案：

1. 修改 ZodError 实现：建议将 message 从 getter 改为常规属性，在构造函数和修改 issues 时更新 message 值。这种改动能确保所有浏览器都能正确识别错误消息。

2. 手动日志处理：在捕获 ZodError 时，显式调用 error.message 或 error.toString() 进行日志输出。这种方法虽然有效，但需要在每个错误处理点添加额外代码。

3. 全局错误拦截：对于 Redux Toolkit Query 等框架，可以通过中间件统一处理 ZodError，确保错误信息被正确记录。

最佳实践建议

对于使用 Zod 进行数据验证的开发者，建议：

1. 版本兼容性检查：在关键验证逻辑中添加浏览器版本检测，对 Chrome 125+ 采用特殊处理。

2. 错误处理封装：创建统一的错误处理工具函数，确保所有 ZodError 都能被正确记录。

3. 长期解决方案：关注 Zod 官方更新，等待对错误显示机制的正式修复。

总结

这次事件提醒我们，即使是成熟的工具库也可能因为运行环境的变化而出现兼容性问题。作为开发者，我们需要：

• 保持对依赖库和运行环境变化的关注
• 实现健壮的错误处理机制
• 在关键验证逻辑中添加防御性代码

通过理解问题本质和采用适当的解决方案，可以确保应用在各种环境下都能提供清晰的错误反馈，这对调试和维护至关重要。