Zod库在Chrome最新版本中错误信息显示异常的深度解析

问题背景

近期在使用Zod库进行数据验证时，开发者们发现了一个奇怪的现象：在Chrome 125.0.6422.77（arm64，macOS）版本中，ZodError的错误信息无法正常显示，控制台输出的错误对象看起来是"空白"的。这个问题特别容易在使用Redux Toolkit Query或TanStack/React-Query等状态管理库时出现。

问题本质分析

经过深入调查，这个问题实际上源于Chrome 125版本对错误对象控制台显示逻辑的修改。具体表现为：

1. 错误信息显示机制变化：Chrome 125开始对通过getter定义的message属性处理方式发生了变化，不再自动显示这类属性的值
2. ZodError的特殊实现：ZodError类中message属性是通过getter方法实现的，而非直接赋值
3. 继承关系的影响：虽然ZodError继承自Error类，但重写了message属性的获取方式

技术细节剖析

在Zod库的源码中，ZodError的实现采用了以下方式：

get message() {
    return JSON.stringify(this.issues, util.jsonStringifyReplacer, 2);
}

这种实现方式在Chrome 125之前的版本中工作正常，但在新版本中，控制台输出错误对象时不再自动调用getter方法来显示message内容。相比之下，直接通过console.log(error.message)或error.toString()仍然可以正常显示错误信息。

解决方案探讨

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

1. 直接访问message属性：在捕获错误后，显式地访问error.message进行输出
2. 使用toString()方法：调用error.toString()可以绕过Chrome的新限制
3. 中间件拦截方案：在使用Redux等状态管理库时，可以通过中间件专门处理ZodError
4. 源码修改建议：将message属性改为常规属性，在构造函数和修改issues时更新它

最佳实践建议

对于开发者而言，在当前阶段可以采取以下措施：

1. 在调试时，使用console.log(error.message)替代直接输出error对象
2. 在错误处理逻辑中，优先访问message属性而非依赖控制台的自动显示
3. 关注Zod库的官方更新，等待可能的修复版本
4. 对于关键业务逻辑，考虑添加额外的错误信息提取和日志记录机制

总结

这个问题揭示了JavaScript中错误处理机制与浏览器实现细节之间的微妙关系。作为开发者，理解错误对象的内部结构和浏览器对其的显示逻辑，对于高效调试至关重要。虽然这是一个特定版本的浏览器与特定库之间的兼容性问题，但它提醒我们在错误处理时要考虑多种输出方式，确保关键信息在任何环境下都能被正确捕获和显示。