diff --git a/web/src/app/(main)/function/tasks/detail/_tabs/coverage-graph-tab.tsx b/web/src/app/(main)/function/tasks/detail/_tabs/coverage-graph-tab.tsx index 0974489..14201fe 100644 --- a/web/src/app/(main)/function/tasks/detail/_tabs/coverage-graph-tab.tsx +++ b/web/src/app/(main)/function/tasks/detail/_tabs/coverage-graph-tab.tsx @@ -507,9 +507,14 @@ function GraphInner({ taskId }: { taskId: string }) { const applyData = React.useCallback(() => { const graph = graphRef.current; - if (!graph) return; + if (!graph || graph.destroyed) return; graph.setData(gDataRef.current); - void graph.render(); + // render() 异步跑 d3-force 布局;若组件在布局落地前被卸载/销毁,g6 会在已清空的 + // context 上访问 transform 抛错(见 runtime/layout transformDataAfterLayout)。这是纯 + // teardown 竞态,吞掉它,不影响功能;真正的渲染错误(图未销毁)仍打日志。 + void graph.render().catch((err) => { + if (!graph.destroyed) console.error("[coverage-graph] render:", err); + }); }, []); // 建图(一次)。动态 import 避开 SSR/静态导出期的 window 依赖。 @@ -579,6 +584,12 @@ function GraphInner({ taskId }: { taskId: string }) { })(); return () => { destroyed = true; + // 先停布局再销毁:尽量缩短"布局在飞、context 被清空"的竞态窗口。 + try { + graph?.stopLayout(); + } catch { + /* 图可能尚未建成或已无布局上下文 */ + } graph?.destroy(); graphRef.current = null; };