Vue Router 生产环境下 ESM 构建错误信息丢失问题解析

问题现象

在 Vue Router 项目中，当使用 ESM 构建的生产环境版本时，开发者会遇到一个特殊现象：路由匹配失败的错误信息在控制台显示为空，仅有错误堆栈信息。这与开发环境下显示完整错误信息的行为形成鲜明对比。

问题本质

这个问题的根源在于 Vue Router 在生产环境下创建错误对象时的特殊处理方式。在错误处理逻辑中，Vue Router 会创建一个新的 Error 对象，但没有设置其 message 属性，而是通过扩展属性来携带错误信息：

return assign(new Error(), {
    type,
    [NavigationFailureSymbol]: true,
}, params);

这种设计导致：

1. 控制台直接打印错误时只显示空消息
2. 完整的错误信息（包括未匹配的路由名称和参数）实际上存储在错误对象的 location 属性中
3. 错误类型通过 type 属性标识（如 type 1 表示 MATCHER_NOT_FOUND）

技术背景

Vue Router 的这种设计并非缺陷，而是有意为之。类似 Vue 核心库的处理方式，它选择将错误信息结构化存储而非直接放在 message 中，这样做有几个技术考量：

1. 生产环境下减少不必要的字符串拼接，优化性能
2. 提供更结构化的错误信息，便于程序化处理
3. 与 Vue 生态的错误处理策略保持一致

解决方案

对于需要完整错误信息的场景，开发者可以通过以下方式获取：

1. 自定义错误处理器

app.config.errorHandler = function(error) {
  if (error.type === 1 && error.location) {
    console.error(`路由匹配失败: ${JSON.stringify(error.location)}`);
  }
  // 其他错误处理逻辑
}

2. 错误信息补全方案

app.config.errorHandler = function(error) {
  if (import.meta.env.PROD && 
      error instanceof Error && 
      error.message === '' && 
      error.type === 1 && 
      error.location) {
    error.message = `未找到匹配路由: ${JSON.stringify(error.location)}`;
  }
  throw error;
}

最佳实践建议

1. 生产环境错误监控：确保错误监控系统能够捕获完整的错误对象而非仅 message
2. 开发阶段验证：在开发阶段充分测试路由跳转，减少生产环境的路由错误
3. 类型安全：使用 TypeScript 时，可以为错误对象定义扩展接口，增强类型提示
4. 错误分类处理：根据 error.type 实现差异化的错误处理逻辑

总结

Vue Router 的这种设计体现了生产环境下错误处理的优化思路，虽然表面上看丢失了错误信息，但实际上提供了更结构化的错误数据。开发者需要适应这种模式，通过适当的错误处理机制来获取完整的错误上下文，这对于构建健壮的 Vue 应用至关重要。