Global Error Handling and Comprehensive Test Coverage

[google-labs-jules]

Implemented a global error handling system by integrating Naive UI's message provider with a centralized ErrorHandler. This includes exposing window.$message via a new GlobalMessage component (lifecycle-safe). Significantly improved test coverage by adding robust unit tests for useChatStore, useAI, and useApi, covering critical paths like message generation, database interactions, and AbortError handling. Also refactored the logger for better extensibility.

---

PR created automatically by Jules for task 10874080585538781198 started by @tt-a1i

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

---

For security, I will only act on instructions from the user who triggered this task.

New to Jules? Learn more at jules.google/docs.

[claude]

PR Review: Global Error Handling and Comprehensive Test Coverage

感谢提交这个 PR！这是一个很好的改进,为项目添加了全局错误处理系统和测试覆盖。以下是详细的审查反馈：

---

✅ 优点

1. 架构改进

• 全局错误处理: 通过 ErrorHandler 类统一管理错误,使用 Naive UI 的 message API 提供用户友好的错误提示
• 生命周期安全: GlobalMessage.vue 组件使用 onMounted 钩子暴露 window.$message,避免了副作用问题
• 测试覆盖显著提升: 新增 363 行测试代码,覆盖核心业务逻辑

2. 错误处理优化

• AbortError 特殊处理: 在 api.ts:98-100 正确处理用户取消请求,避免不必要的错误提示
• 集中化日志: 所有错误通过 ErrorHandler.handle() 统一记录和展示

3. 代码质量

• 测试用例设计合理,包含边界情况和错误场景
• Mock 策略正确,使用 vi.hoisted() 避免提升问题

---

⚠️ 需要改进的问题

1. 严重: 异步竞态条件 (src/utils/error-handler.ts:84-94)

static handle(error: AppError | Error, options?: { silent?: boolean }): AppError {
  // 动态导入 logger 以避免循环依赖
  import('./logger').then(({ logger }) => {
    const appError = ErrorHandler.normalizeError(error)
    logger.error(appError.message, appError.originalError, appError.context)
    if (\!options?.silent) {
      window.$message?.error(appError.userMessage)
    }
  })
  return ErrorHandler.normalizeError(error)
}

问题:

• import('./logger') 是异步的,但返回值立即计算,导致两次调用 normalizeError()
• 如果 window.$message 在动态导入完成前未初始化,用户可能看不到错误提示

建议修复:

static handle(error: AppError | Error, options?: { silent?: boolean }): AppError {
  const appError = ErrorHandler.normalizeError(error)
  
  // 异步记录日志和显示提示
  import('./logger').then(({ logger }) => {
    logger.error(appError.message, appError.originalError, appError.context)
    if (\!options?.silent) {
      window.$message?.error(appError.userMessage)
    }
  })
  
  return appError
}

2. 中等: Logger 扩展性问题 (src/utils/logger.ts:118-122)

private reportError(message: string, error?: unknown, context?: Record<string, unknown>) {
  // 自定义错误上报钩子
  if (typeof window.reportErrorToService === 'function') {
    window.reportErrorToService({ message, error, context })
  }
}

问题:

• 依赖全局 window.reportErrorToService,但没有类型安全保障
• 如果钩子执行失败,没有降级处理

建议:

private reportError(message: string, error?: unknown, context?: Record<string, unknown>) {
  try {
    if (typeof window.reportErrorToService === 'function') {
      window.reportErrorToService({ message, error, context })
    }
  } catch (err) {
    // 防止错误上报本身失败导致应用崩溃
    console.error('[Logger] Failed to report error:', err)
  }
}

3. 中等: 测试 Mock 不完整 (src/api/api.test.ts)

问题:

• 只测试了 generateChat 方法,但 api.ts 还有 7 个其他方法未覆盖
• mockFetch 被 mock 但从未真正验证 fetch 调用

建议:

• 添加 abort() 方法的测试
• 测试网络错误、超时等边界情况

4. 轻微: 类型定义不完整 (src/vite-env.d.ts:8)

reportErrorToService?: (data: { message: string, error?: unknown, context?: Record<string, unknown> }) => void

建议: 使用更具体的类型

reportErrorToService?: (data: {
  message: string
  error?: Error | unknown
  context?: Record<string, unknown>
}) => void | Promise<void>  // 支持异步钩子

5. 轻微: 测试中的时间依赖 (多个测试文件)

await new Promise(resolve => setTimeout(resolve, 0))

问题: 依赖 setTimeout 可能导致测试不稳定

建议: 使用 vi.waitFor() 或 await vi.runAllTimersAsync()

---

🔒 安全考虑

• ✅ 正确处理了 AbortError,防止用户取消操作时的错误泄露
• ✅ 错误消息不包含敏感信息
• ⚠️ window.$message 是全局可访问的,确保不在错误消息中包含 API 密钥或用户隐私数据

---

🚀 性能考虑

• ✅ 动态导入 logger 避免循环依赖,减少初始包大小
• ⚠️ 每次 ErrorHandler.handle() 都动态导入 logger,考虑缓存导入结果
• ✅ 测试 Mock 策略高效,避免实际网络请求

---

📋 测试覆盖

新增测试文件:

• src/api/api.test.ts (60 行) - ✅ 覆盖 AbortError 处理
• src/services/ai.test.ts (121 行) - ✅ 覆盖多模态内容、系统提示
• src/stores/chat.test.ts (151 行) - ✅ 覆盖 CRUD 操作和错误处理
• src/utils/error-handler.test.ts (131 行) - ✅ 覆盖所有公共方法

建议:

• 添加集成测试验证 GlobalMessage + ErrorHandler 的端到端流程
• 添加 E2E 测试验证错误提示在 UI 中正确显示

---

📝 代码风格

• ✅ 符合项目的 TypeScript 规范
• ✅ 遵循 CLAUDE.md 中的中文注释要求
• ✅ 正确使用 Vue 3 Composition API

---

建议的后续改进

1. 性能优化: 缓存 logger 动态导入结果
2. 测试完善: 添加集成测试和 E2E 测试
3. 类型安全: 完善 window.reportErrorToService 的类型定义
4. 文档: 在 CLAUDE.md 中添加错误处理使用指南

---

总结

这是一个高质量的 PR,显著改进了项目的错误处理和测试覆盖。主要关注点是修复异步竞态条件问题,其他都是次要改进。

推荐操作: 修复严重问题后合并 ✅