bug: Trace tree view elements overlap when collapsing/expanding nested spans

在 Langfuse(云版)的 trace 详情页,查看带有嵌套 spans/observations 的 trace(例如包含多个子工具调用的父 span)时,用户执行展开和折叠操作后,UI 元素发生渲染错乱,文本重叠到相邻行。

bug: Trace tree view elements overlap when collapsing/expanding nested spans

bug: Trace tree view elements overlap when collapsing/expanding nested spans

快速结论:该问题主要出现在 Langfuse trace 详情页的 new “Fast (Preview)” 树形视图中,展开/折叠嵌套 span 时,子 span 的行标签、标记和持续时间文本会互相重叠,导致树状图不可读。优先尝试关闭 “Fast (Preview)” 选项,回退到旧版渲染器。

问题场景

在 Langfuse(云版)的 trace 详情页,查看带有嵌套 spans/observations 的 trace(例如包含多个子工具调用的父 span)时,用户执行展开和折叠操作后,UI 元素发生渲染错乱,文本重叠到相邻行。

报错原文

When viewing a trace in the trace detail page, collapsing and expanding nested spans/observations causes UI elements to overlap and render on top of each other. Text from different span rows bleeds into adjacent rows, making the trace tree unreadable.

原因分析

该问题很可能是 trace2 重构(PR #10647#10665)中的回归缺陷。新的树形视图使用 @tanstack/react-virtual 实现虚拟化渲染,并采用了动态高度估算,但在展开/折叠状态变更后,高度测量值未能及时更新,导致重叠。此问题与动态行高修复 PR #10620 有关,可能是尚未覆盖的边缘情况。

环境排查

  • Langfuse 环境:Langfuse Cloud(云版),已确认在”Fast (Preview)”模式下复现。
  • SDK 版本:langfuse Python SDK v4.0.0(仅记录,不影响前端渲染)
  • Trace ID 示例:1628dd963c70fad22c1239e2fd1e4409

解决步骤

  1. 打开存在问题的 trace 详情页。
  2. 在页面中查找并关闭 “Fast (Preview)” 选项(切换为旧版渲染器)。
  3. 旧版渲染器已包含来自 PR #10620 的动态行高修复,可有效解决重叠/裁剪问题。
  4. 如果必须使用新版渲染器,请关注 langfuse 后续发布修复此回归缺陷的版本更新。

验证方法

关闭 “Fast (Preview)” 后,在同一个 trace 下重复展开和折叠嵌套 spans 操作,观察各 span 标签、标记和持续时间文本是否正常显示,不再出现重叠或文字相互渗入的情况。

参考来源

langfuse/langfuse #12773

GamsGo AI

AI 工具推荐

想把多个 AI 模型放在一个入口?

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型,适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接:通过此链接购买,我可能获得佣金,不影响你的价格。

celebrityanime
celebrityanime
文章: 12596

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注