Files
Alfred/openspec/changes/add-frontend-logger/tasks.md

46 lines
3.1 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
## 1. 上下文审查
- [x] 1.1 阅读 design.md确认范围、需求、决策、执行约束和待解决问题
- [x] 1.2 审查后端 `src/server/logger.ts` 的 Logger 接口和实现模式,确保前端镜像的一致性
- [x] 1.3 审查 `eslint.config.js` 当前 rules 结构,确认新增前端 console 禁止规则的位置和写法
## 2. 核心日志模块
- [x] 2.1 新建 `src/web/utils/logger.ts`:定义 `LogLevel` 类型、`Logger` 接口debug/info/warn/error/child/setLevel`Sink` 接口
- [x] 2.2 实现 `ConsoleSink`:按级别映射到 console.log/warn/error前缀 `[Alfred:LEVEL]`data 透传不序列化
- [x] 2.3 实现 `NoopLogger`所有方法空实现child 返回自身,静默丢弃日志
- [x] 2.4 实现 `MemoryLogger`:将日志条目存入 `entries` 数组,用于测试断言
- [x] 2.5 实现 `ConsoleLogger`:组合 ConsoleSink生产环境`import.meta.env.PROD`)屏蔽 debug/info
- [x] 2.6 实现 `AntdMessageSink`:接收 antd MessageInstancewarn→message.warningerror→message.errordebug/info 不触发
- [x] 2.7 实现 `DefaultLogger`:组合多个 SinkConsoleSink + AntdMessageSink支持 `child()` 作用域绑定
## 3. React 集成
- [x] 3.1 新建 `src/web/hooks/use-logger.ts``useLogger()` 内部调用 `App.useApp()` 获取 message 实例,组装 DefaultLogger + ConsoleSink + AntdMessageSink
- [x] 3.2 改造 `src/web/components/ErrorBoundary.tsx``console.error` 替换为 `createConsoleLogger().error()`
## 4. ESLint 规则
- [x] 4.1 在 `eslint.config.js` 新增 `src/web/**/*.{ts,tsx}``no-restricted-syntax` 规则,禁止 `console.*`,排除 `logger.ts`
- [x] 4.2 运行 `bun run lint` 验证规则生效且无其他文件违规
## 5. 测试
- [x] 5.1 新建 `tests/web/utils/logger.test.ts`:测试 ConsoleLogger/MemoryLogger/NoopLogger 的 debug/info/warn/error 级别输出
- [x] 5.2 测试生产环境静默MemoryLogger 在 `isProduction=true` 时 debug/info 不记录
- [x] 5.3 测试 `child()` 作用域:绑定后的 Logger 在日志消息中携带对应键值,嵌套 child 追加(同 key 覆盖)
- [x] 5.4 新建 `tests/web/hooks/use-logger.test.ts`:测试 useLogger 返回含 ConsoleSink 的 Logger 实例warn/error 正常输出到 consoleAntdMessageSink 映射在 logger.test.ts 的 AntdMessageSink describe 中测试)
## 6. 文档
- [x] 6.1 更新 `docs/development/frontend.md`,新增"日志模块"章节Logger 接口、使用方式、notification 红线(仅 warn+error
- [x] 6.2 确认 `docs/development/frontend.md` 新增的日志模块章节包含 notification 红线、使用场景区分和 ErrorBoundary 特殊说明
## 7. 质量门禁
- [x] 7.1 运行 `bun test` 确保所有新增和已有测试通过
- [x] 7.2 运行 `bun run typecheck` 确保零类型错误
- [x] 7.3 运行 `bun run lint` 确保零 lint 违规
- [ ] 7.4 手动验证:在 `src/web/` 非 logger.ts 文件临时写入 `console.log("test")` 确认 ESLint 报错
- [ ] 7.5 手动验证:在浏览器 DevTools 中调用 `logger.error("msg", { error: new Error("test") })` 确认 Error 堆栈可展开