Browser Hang on Multi-Component Update

问题场景

用户在 Gradio Blocks 应用中定义了一个 gr.Button，其 click 事件回调一次性返回多个组件的更新，包括一个 Markdown、一个较小的汇总 Dataframe、一个 DownloadButton 和一个更大的原始数据 Dataframe。Python 后端日志显示执行很快完成，但浏览器标签页在前端渲染阶段卡死，出现 “Page Unresponsive” 警告，第二个 datatable 始终不显示，“processing” 动画也可能卡住或消失。

用户还提到，如果把其中一个 Dataframe 替换为 HTML 组件并直接放入 <table> 标签，问题依然存在，说明触发条件不一定局限于 Dataframe 组件本身，而更可能与多组件同时更新有关。

报错原文

Uncaught (in promise) RangeError: Set maximum size exceeded
    at Set.add (<anonymous>)
    at Batch.ondiscard (index-B0zdmtA4.js:1582:27)
    at svelte_internal_client.js:1235:11
    at update_reaction (index-B0zdmtA4.js:4986:16)
    at update_effect (index-B0zdmtA4.js:5171:18)
    at #traverse_effect_tree (index-B0zdmtA4.js:1361:6)
    at Batch.process (index-B0zdmtA4.js:1281:30)
    at flush_effects (index-B0zdmtA4.js:1698:10)
    at Batch.flush (index-B0zdmtA4.js:1431:4)
    at Batch.revive (index-B0zdmtA4.js:1572:8)

原因分析

根据 Issue 中评论的分析，可能原因是 Gradio 将 4 个组件的更新批量合并到一次 Svelte 事务中，Svelte 5 的细粒度响应式系统需要在一个 Set 中跟踪所有相关 effect。当更新涉及复杂组件时，每个组件会产生大量细粒度订阅，批量累积的 effect 数量可能超过 JavaScript Set 在 V8 中的最大容量（讨论中提及约 16.7 百万条），从而触发 Set maximum size exceeded。

评论中进一步推测，问题发生在 Svelte 5 的 Batch.ondiscard 调用 Set.add 时，即在 process() 排空队列之前，丢弃或暂存的 effect 数量已经过大。需要强调，这是 Issue 讨论中的根因推测，并非维护者确认的最终结论；同时用户已反馈替换 Dataframe 为 HTML table 后仍会复现，因此不能把所有责任归到 Dataframe 组件。

环境排查

• 确认 Gradio 版本是否为 6.7.0，以及 gradio-client 是否为 2.2.0。
• 确认 Python 版本是否为 3.12.8。
• 确认 numpy 是否为 2.4.2、pandas 是否为 3.0.1。
• 确认操作系统与硬件，例如 macOS 15.7.4、Apple M3 Pro 36 GB；其他平台是否复现 Issue 中未确认。
• 确认浏览器控制台是否出现同一条 RangeError: Set maximum size exceeded 堆栈。
• 确认该 click 事件是否在同一批次中更新多个组件，尤其是同时更新两个 Dataframe 与 DownloadButton 的场景。
• 尝试将其中一个 Dataframe 换成 HTML <table>，观察是否仍复现，以判断是否与特定组件有关。

解决步骤

1. 先用最小复现脚本确认问题：在 Gradio 6.7.0 下，让一个按钮 click 事件同时输出 Markdown、两个 Dataframe 和一个 DownloadButton 的更新，观察浏览器是否卡死。
2. 打开浏览器 DevTools Console，检查是否出现 RangeError: Set maximum size exceeded 以及 Batch.ondiscard 相关堆栈，确认与 Issue 中报错一致。
3. 确认 Python 后端日志执行是否迅速完成，以排除后端阻塞；如果后端很快而前端卡顿，问题更偏向前端批量更新和响应式处理。
4. 可优先尝试把一次多组件更新拆成多次 yield，每次只更新部分组件，并在两次更新之间加入短暂 asyncio.sleep，让 Svelte 有时间处理前一批 effect。
5. 可优先尝试用 gr.State 承接较大数据，避免让大 DataFrame 直接进入同一轮多组件批量更新，再通过另一个事件把 State 渲染到 Dataframe。
6. 如果确认是 Svelte 5 Batch 的 Set 增长问题，可关注上游 Gradio 或 Svelte 是否发布修复；评论中提到的直接修补 node_modules 中 Svelte 文件仅属于推测性方案，不建议作为常规修复。
7. 在问题定位前，可临时减少同一事件中同时更新的组件数量，或把 DownloadButton、第二个 Dataframe 拆到后续交互中显示。

验证方法

重新运行最小复现脚本并点击 “Trigger Hang”，观察浏览器标签页是否仍出现无响应或 “Page Unresponsive” 警告。同时检查控制台是否仍然出现 RangeError: Set maximum size exceeded 与 Batch.ondiscard 堆栈。如果拆分更新后第二个 datatable 能正常显示、标签页不再卡死、控制台无 Set 溢出错误，则说明缓解措施对当前场景有效。但 Issue 中未给出维护者确认的正式修复，因此该验证只适用于本地绕过判断。

参考来源

gradio-app/gradio #12932

AI 工具推荐

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

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

了解 GamsGo AI

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