@kylincloud/flamegraph 0.36.2 → 0.36.3

package/dist/workers/createFlamegraphRenderWorker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createFlamegraphRenderWorker.d.ts","sourceRoot":"","sources":["../../src/workers/createFlamegraphRenderWorker.ts"],"names":[],"mappings":"AAAA,wBAAgB,4BAA4B,IAAI,MAAM,CAsBrD"}
+{"version":3,"file":"createFlamegraphRenderWorker.d.ts","sourceRoot":"","sources":["../../src/workers/createFlamegraphRenderWorker.ts"],"names":[],"mappings":"AAAA,wBAAgB,4BAA4B,IAAI,MAAM,CAsCrD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kylincloud/flamegraph",
-  "version": "0.36.2",
+  "version": "0.36.3",
   "description": "KylinCloud flamegraph renderer (Pyroscope-based)",
   "license": "Apache-2.0",
   "main": "dist/index.node.cjs.js",

package/src/FlameGraph/FlameGraphComponent/index.tsx

@@ -93,6 +93,16 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     typeof window !== 'undefined' &&
     typeof OffscreenCanvas !== 'undefined' &&
     'transferControlToOffscreen' in HTMLCanvasElement.prototype;
+  const [enableWorker, setEnableWorker] = React.useState(useRenderWorker);
+  const workerStatusLoggedRef = useRef(false);
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined' || workerStatusLoggedRef.current) return;
+    workerStatusLoggedRef.current = true;
+    if (!useRenderWorker) {
+      console.info('[flamegraph] OffscreenCanvas unavailable, using main thread renderer');
+    }
+  }, [useRenderWorker]);
 
   // ====== 新增：提取 canvas 渲染需要的 i18n messages ======
   const canvasMessages = useMemo(
@@ -153,10 +163,24 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
   );
 
   useEffect(() => {
-    if (!useRenderWorker) {
+    if (!enableWorker) {
       return () => {};
     }
-    const worker = createFlamegraphRenderWorker();
+    let worker: Worker;
+    try {
+      worker = createFlamegraphRenderWorker();
+    } catch (err) {
+      console.warn('[flamegraph] render worker init failed, fallback to main thread', err);
+      setEnableWorker(false);
+      return () => {};
+    }
+    console.info('[flamegraph] render worker created');
+    worker.addEventListener('error', (event) => {
+      console.error('[flamegraph] render worker error', event);
+    });
+    worker.addEventListener('messageerror', (event) => {
+      console.error('[flamegraph] render worker message error', event);
+    });
     renderWorkerRef.current = worker;
     setTimeout(() => {
       renderRectCanvas();
@@ -169,7 +193,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
       textOffscreenRef.current = null;
       workerReadyRef.current = { rect: false, text: false };
     };
-  }, [useRenderWorker]);
+  }, [enableWorker]);
 
   useResizeObserver(canvasRef, () => {
     if (flamegraph) {
@@ -400,7 +424,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
   };
 
   const ensureRenderWorkerCanvases = useCallback(() => {
-    if (!useRenderWorker || !renderWorkerRef.current) {
+    if (!enableWorker || !renderWorkerRef.current) {
       return false;
     }
     const worker = renderWorkerRef.current;
@@ -415,6 +439,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
         );
         workerReadyRef.current.rect = true;
       } catch (err) {
+        console.error('[flamegraph] offscreen init failed (rect)', err);
       }
     }
 
@@ -428,11 +453,12 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
         );
         workerReadyRef.current.text = true;
       } catch (err) {
+        console.error('[flamegraph] offscreen init failed (text)', err);
       }
     }
 
     return true;
-  }, [useRenderWorker]);
+  }, [enableWorker]);
 
   // ====== 修改：添加 canvasMessages 依赖 ======
   React.useEffect(() => {
@@ -463,7 +489,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     kind: 'rect' | 'text',
     options: { renderRects?: boolean; renderText?: boolean }
   ) => {
-    if (!useRenderWorker) {
+    if (!enableWorker) {
       return false;
     }
     if (!renderWorkerRef.current) {

package/src/workers/createFlamegraphRenderWorker.ts

@@ -11,7 +11,13 @@ export function createFlamegraphRenderWorker(): Worker {
       '../../@kylincloud/flamegraph/dist/flamegraphRenderWorker.js',
       metaUrl
     );
-    return new Worker(viteDepsWorkerUrl, { type: 'module' });
+    try {
+      const worker = new Worker(viteDepsWorkerUrl, { type: 'module' });
+      return worker;
+    } catch (err) {
+      console.error('[flamegraph] worker create failed (vite deps)', err);
+      throw err;
+    }
   }
 
   const workerUrl = isFromSrc
@@ -19,5 +25,15 @@ export function createFlamegraphRenderWorker(): Worker {
     : isFromDist
       ? new URL('./flamegraphRenderWorker.js', metaUrl)
       : new URL('./flamegraphRenderWorker.js', metaUrl);
-  return new Worker(workerUrl, { type: 'module' });
+  try {
+    const worker = new Worker(workerUrl, { type: 'module' });
+    return worker;
+  } catch (err) {
+    console.error('[flamegraph] worker create failed', err, {
+      workerUrl: workerUrl.href,
+      isFromSrc,
+      isFromDist,
+    });
+    throw err;
+  }
 }

package/src/workers/flamegraphRenderWorker.ts

@@ -83,6 +83,14 @@ const state: {
   },
 };
 
+const logWorkerError = (err: any, context: string) => {
+  try {
+    console.error('[flamegraph-worker] error', context, err);
+  } catch {
+    // ignore
+  }
+};
+
 const buildPalette = (payload: SerializablePalette): FlamegraphPalette => ({
   name: payload.name,
   goodColor: Color.rgb(...payload.goodColor),
@@ -100,53 +108,63 @@ const RECT_BUDGET_MS = 12;
 const TEXT_BUDGET_MS = 8;
 
 const runChunk = (kind: 'rect' | 'text', token: number) => {
-  const renderState = state.renderState[kind];
-  const payload = renderState.payload;
-  if (!payload || renderState.token !== token) {
-    return;
-  }
-  const canvas = kind === 'rect' ? state.rectCanvas : state.textCanvas;
-  if (!canvas) {
-    renderState.running = false;
-    return;
-  }
-  if (!renderState.flamegraph) {
-    renderState.flamegraph = new Flamegraph(
-      payload.flamebearer,
-      canvas,
-      toMaybe(payload.focusedNode),
-      payload.fitMode,
-      payload.highlightQuery,
-      toMaybe(payload.zoom),
-      buildPalette(payload.palette),
-      payload.messages
-    );
-  }
+  try {
+    const renderState = state.renderState[kind];
+    const payload = renderState.payload;
+    if (!payload || renderState.token !== token) {
+      return;
+    }
+    const canvas = kind === 'rect' ? state.rectCanvas : state.textCanvas;
+    if (!canvas) {
+      renderState.running = false;
+      return;
+    }
+    if (!renderState.flamegraph) {
+      renderState.flamegraph = new Flamegraph(
+        payload.flamebearer,
+        canvas,
+        toMaybe(payload.focusedNode),
+        payload.fitMode,
+        payload.highlightQuery,
+        toMaybe(payload.zoom),
+        buildPalette(payload.palette),
+        payload.messages
+      );
+    }
 
-  const result = renderState.flamegraph.render({
-    renderRects: payload.renderRects,
-    renderText: payload.renderText,
-    timeBudgetMs: kind === 'rect' ? RECT_BUDGET_MS : TEXT_BUDGET_MS,
-    startI: renderState.nextI,
-    startJ: renderState.nextJ,
-    skipCanvasResize: !renderState.firstChunk,
-    skipDprScale: !renderState.firstChunk,
-    devicePixelRatio: payload.devicePixelRatio,
-  });
-
-  renderState.firstChunk = false;
-  if (!result.done) {
-    renderState.nextI = result.nextI;
-    renderState.nextJ = result.nextJ;
-    setTimeout(() => runChunk(kind, token), 0);
-    return;
-  }
+    const result = renderState.flamegraph.render({
+      renderRects: payload.renderRects,
+      renderText: payload.renderText,
+      timeBudgetMs: kind === 'rect' ? RECT_BUDGET_MS : TEXT_BUDGET_MS,
+      startI: renderState.nextI,
+      startJ: renderState.nextJ,
+      skipCanvasResize: !renderState.firstChunk,
+      skipDprScale: !renderState.firstChunk,
+      devicePixelRatio: payload.devicePixelRatio,
+    });
+
+    renderState.firstChunk = false;
+    if (!result.done) {
+      renderState.nextI = result.nextI;
+      renderState.nextJ = result.nextJ;
+      setTimeout(() => runChunk(kind, token), 0);
+      return;
+    }
 
-  renderState.running = false;
-  renderState.nextI = 0;
-  renderState.nextJ = 0;
-  renderState.firstChunk = true;
-  renderState.flamegraph = null;
+    renderState.running = false;
+    renderState.nextI = 0;
+    renderState.nextJ = 0;
+    renderState.firstChunk = true;
+    renderState.flamegraph = null;
+  } catch (err) {
+    console.error('[flamegraph-worker] render error', err);
+    const renderState = state.renderState[kind];
+    renderState.running = false;
+    renderState.nextI = 0;
+    renderState.nextJ = 0;
+    renderState.firstChunk = true;
+    renderState.flamegraph = null;
+  }
 };
 
 const renderFlamegraph = (payload: FlamegraphRenderRequest['payload']) => {
@@ -190,3 +208,15 @@ self.onmessage = (event: MessageEvent<FlamegraphWorkerMessage>) => {
     renderFlamegraph(msg.payload);
   }
 };
+
+self.onerror = (event) => {
+  logWorkerError(event, 'self.error');
+};
+
+self.onmessageerror = (event) => {
+  logWorkerError(event, 'self.messageerror');
+};
+
+self.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {
+  logWorkerError(event?.reason, 'self.unhandledrejection');
+});