根据日志分析,我发现了"首次启动会话UI白屏"问题的根本原因:
问题诊断报告:首次启动会话UI白屏
核心问题:前端-后端初始化时序不匹配
从日志可以看到明显的时序问题:
09:12:42 - 3个客户端连接 (健康检查阶段)
09:12:44-46 - 所有客户端因健康检查失败断开
09:12:48 - 新客户端 "0HNKOV6RANA8E" 连接
09:12:49 - 订阅会话 "857c72fd..." with 0 historical messages ← 白屏时间点
09:12:53 - 取消订阅
09:12:54 - 再次订阅 (仍在尝试获取内容)
09:13:07 - 取消订阅
09:13:15 - 再次订阅
...
09:13:27 - Claude Code 健康检查成功 ← 后端终于就绪
09:13:28 - 新会话创建,内容开始正常显示
问题分析
| 时间阶段 |
状态 |
影响 |
| 09:12:00-09:13:27 |
Claude Code 健康检查失败 |
后端AI服务未就绪 |
| 09:12:42-09:12:46 |
多客户端连接后断开 |
前端过早尝试连接 |
| 09:12:49-09:13:15 |
0 historical messages |
会话数据尚未加载 |
根因分析
问题本质:前端 UI 在后端服务完全就绪之前就已经尝试渲染会话内容。
具体表现:
- 健康检查延迟:Claude Code CLI 需要约 19秒 才完成首次健康检查
- 过早订阅:前端在 09:12:49 就订阅会话,但后端到 09:13:27 才健康
- 历史消息缺失:订阅时显示
0 historical messages,UI 没有内容可渲染 → 白屏
验证证据
当后端就绪后(09:13:27),后续会话正常:
09:13:28 - Session created successfully
09:13:29 - subscribed to session with 0 historical messages (firstSubscription: True)
→ 但此时后端已健康,新会话能正常工作
解决方案建议
短期临时方案(用户操作):
- 启动后等待约 20-30 秒再打开会话
- 如果白屏,关闭并重新打开会话
技术改进建议(开发团队):
| 优化方向 |
具体建议 |
| 前端延迟加载 |
添加后端就绪状态检查,显示"正在初始化..."加载页面 |
| 增加超时提示 |
当后端未就绪时,显示明确的等待提示而非白屏 |
| 历史消息缓存 |
前端在订阅失败时自动重试,而非显示空白 |
| 健康检查预热 |
后端在启动时预热 Claude Code,减少首次检查延迟 |
时序图
启动时间轴:
├── 09:12:00 应用启动
├── 09:12:17 Claude Code 开始健康检查
├── 09:12:42 前端尝试连接 ← 过早!
├── 09:12:44 健康检查失败,连接断开
├── 09:12:48 前端重新连接
├── 09:12:49 尢试订阅会话 → 0条历史消息 → 白屏!
├── ... 反复订阅/取消订阅 (无内容)
├── 09:13:27 Claude Code 健康检查成功 ← 后端就绪!
└── 09:13:28+ 会话正常工作
总结:这是一个典型的**竞态条件(Race Condition)**问题。前端在后端服务完全初始化之前就尝试渲染内容,导致显示空白。关闭后重新打开时,后端已经就绪,所以能正常显示。
根据日志分析,我发现了"首次启动会话UI白屏"问题的根本原因:
问题诊断报告:首次启动会话UI白屏
核心问题:前端-后端初始化时序不匹配
从日志可以看到明显的时序问题:
问题分析
0 historical messages根因分析
问题本质:前端 UI 在后端服务完全就绪之前就已经尝试渲染会话内容。
具体表现:
0 historical messages,UI 没有内容可渲染 → 白屏验证证据
当后端就绪后(09:13:27),后续会话正常:
解决方案建议
短期临时方案(用户操作):
技术改进建议(开发团队):
时序图
总结:这是一个典型的**竞态条件(Race Condition)**问题。前端在后端服务完全初始化之前就尝试渲染内容,导致显示空白。关闭后重新打开时,后端已经就绪,所以能正常显示。