Skip to content

[0.1.0-beta.45]启动后首次打开会话白屏 #11

@Iceorigin

Description

@Iceorigin

根据日志分析,我发现了"首次启动会话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 在后端服务完全就绪之前就已经尝试渲染会话内容。

具体表现:

  1. 健康检查延迟:Claude Code CLI 需要约 19秒 才完成首次健康检查
  2. 过早订阅:前端在 09:12:49 就订阅会话,但后端到 09:13:27 才健康
  3. 历史消息缺失:订阅时显示 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)**问题。前端在后端服务完全初始化之前就尝试渲染内容,导致显示空白。关闭后重新打开时,后端已经就绪,所以能正常显示。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions