feat: 前端统一 Logger 模块 — 接口、双流 Sink、ESLint 规则、测试
This commit is contained in:
45
openspec/changes/add-frontend-logger/tasks.md
Normal file
45
openspec/changes/add-frontend-logger/tasks.md
Normal file
@@ -0,0 +1,45 @@
|
||||
## 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 MessageInstance,warn→message.warning,error→message.error,debug/info 不触发
|
||||
- [x] 2.7 实现 `DefaultLogger`:组合多个 Sink(ConsoleSink + 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 正常输出到 console(AntdMessageSink 映射在 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 堆栈可展开
|
||||
Reference in New Issue
Block a user