@flotrace/runtime 2.2.4 → 2.3.0

package/dist/index.d.mts

@@ -81,7 +81,7 @@ interface FloTraceProviderProps {
  * );
  * ```
  */
-declare function FloTraceProvider({ children, config, stores, reduxStore, queryClient }: FloTraceProviderProps): JSX.Element;
+declare function FloTraceProvider({ children, config, stores, reduxStore, queryClient, }: FloTraceProviderProps): JSX.Element;
 /**
  * Higher-order component to wrap a component with FloTrace profiling.
  * Use this for targeted profiling of specific components.

package/dist/index.d.ts

@@ -81,7 +81,7 @@ interface FloTraceProviderProps {
  * );
  * ```
  */
-declare function FloTraceProvider({ children, config, stores, reduxStore, queryClient }: FloTraceProviderProps): JSX.Element;
+declare function FloTraceProvider({ children, config, stores, reduxStore, queryClient, }: FloTraceProviderProps): JSX.Element;
 /**
  * Higher-order component to wrap a component with FloTrace profiling.
  * Use this for targeted profiling of specific components.

package/dist/index.js

@@ -50,7 +50,7 @@ var import_runtime_core3 = require("@flotrace/runtime-core");
 // package.json
 var package_default = {
   name: "@flotrace/runtime",
-  version: "2.2.4",
+  version: "2.3.0",
   description: "Runtime package for FloTrace - enables real-time render tracking in your React app",
   main: "./dist/index.js",
   module: "./dist/index.mjs",
@@ -78,7 +78,7 @@ var package_default = {
     "release:major": "npm version major && npm publish"
   },
   dependencies: {
-    "@flotrace/runtime-core": "2.2.4"
+    "@flotrace/runtime-core": "2.3.0"
   },
   peerDependencies: {
     react: ">=16.9.0",
@@ -390,11 +390,15 @@ function patchFetch() {
     const entry = createEntry(method, parsedUrl, init);
     const startTime = performance.now();
     if (init?.signal) {
-      init.signal.addEventListener("abort", () => {
-        entry.state = "aborted";
-        entry.durationMs = performance.now() - startTime;
-        pushEntry(entry);
-      }, { once: true });
+      init.signal.addEventListener(
+        "abort",
+        () => {
+          entry.state = "aborted";
+          entry.durationMs = performance.now() - startTime;
+          pushEntry(entry);
+        },
+        { once: true }
+      );
     }
     pushEntry({ ...entry });
     try {
@@ -571,10 +575,7 @@ function parseUrl(url) {
     return { path: url.split("?")[0] ?? url, host: "" };
   }
 }
-var COMBINED_NOISE_PATTERN = new RegExp(
-  NOISE_URL_PATTERNS.map((r) => r.source).join("|"),
-  "i"
-);
+var COMBINED_NOISE_PATTERN = new RegExp(NOISE_URL_PATTERNS.map((r) => r.source).join("|"), "i");
 function isNoiseUrl(url) {
   return COMBINED_NOISE_PATTERN.test(url);
 }
@@ -592,7 +593,8 @@ function parseXhrContentLength(xhr) {
 function hasHeader(init, name) {
   if (!init?.headers) return false;
   if (init.headers instanceof Headers) return init.headers.has(name);
-  if (Array.isArray(init.headers)) return init.headers.some(([k]) => k.toLowerCase() === name.toLowerCase());
+  if (Array.isArray(init.headers))
+    return init.headers.some(([k]) => k.toLowerCase() === name.toLowerCase());
   if (typeof init.headers === "object") {
     return Object.keys(init.headers).some((k) => k.toLowerCase() === name.toLowerCase());
   }
@@ -675,7 +677,13 @@ var FloTraceContext = (0, import_react.createContext)(null);
 function useFloTrace() {
   return (0, import_react.useContext)(FloTraceContext);
 }
-function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClient }) {
+function FloTraceProvider({
+  children,
+  config = {},
+  stores,
+  reduxStore,
+  queryClient
+}) {
   if (typeof navigator !== "undefined" && navigator.product === "ReactNative") {
     console.warn(
       "[FloTrace] FloTraceProvider (from @flotrace/runtime) detected a React Native environment. Install @flotrace/runtime-native and use FloTraceProviderNative instead. Skipping attach."
@@ -741,13 +749,22 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
           case "ext:startTracking":
             trackingOptionsRef.current = message.options || {};
             if (message.options?.trackZustand && storesRef.current && Object.keys(storesRef.current).length > 0) {
-              safeTrackerOp("Zustand install", () => (0, import_runtime_core3.installZustandTracker)(storesRef.current, client3));
+              safeTrackerOp(
+                "Zustand install",
+                () => (0, import_runtime_core3.installZustandTracker)(storesRef.current, client3)
+              );
             }
             if (message.options?.trackRedux && reduxStoreRef.current) {
-              safeTrackerOp("Redux install", () => (0, import_runtime_core3.installReduxTracker)(reduxStoreRef.current, client3));
+              safeTrackerOp(
+                "Redux install",
+                () => (0, import_runtime_core3.installReduxTracker)(reduxStoreRef.current, client3)
+              );
             }
             if (message.options?.trackTanstackQuery && queryClientRef.current) {
-              safeTrackerOp("TanStack Query install", () => (0, import_runtime_core3.installTanStackQueryTracker)(queryClientRef.current, client3));
+              safeTrackerOp(
+                "TanStack Query install",
+                () => (0, import_runtime_core3.installTanStackQueryTracker)(queryClientRef.current, client3)
+              );
             }
             if (message.options?.trackRouter) {
               safeTrackerOp("Router install", () => installRouterTracker(client3));
@@ -873,7 +890,11 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
             break;
           // --- Individual tracker start/stop (sidebar panel show/hide) ---
           case "ext:startReduxTracking":
-            if (reduxStoreRef.current) safeTrackerOp("Redux install", () => (0, import_runtime_core3.installReduxTracker)(reduxStoreRef.current, client3));
+            if (reduxStoreRef.current)
+              safeTrackerOp(
+                "Redux install",
+                () => (0, import_runtime_core3.installReduxTracker)(reduxStoreRef.current, client3)
+              );
             break;
           case "ext:stopReduxTracking":
             safeTrackerOp("Redux uninstall", import_runtime_core3.uninstallReduxTracker);
@@ -886,14 +907,21 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
             break;
           case "ext:startZustandTracking":
             if (storesRef.current && Object.keys(storesRef.current).length > 0) {
-              safeTrackerOp("Zustand install", () => (0, import_runtime_core3.installZustandTracker)(storesRef.current, client3));
+              safeTrackerOp(
+                "Zustand install",
+                () => (0, import_runtime_core3.installZustandTracker)(storesRef.current, client3)
+              );
             }
             break;
           case "ext:stopZustandTracking":
             safeTrackerOp("Zustand uninstall", import_runtime_core3.uninstallZustandTracker);
             break;
           case "ext:startTanstackTracking":
-            if (queryClientRef.current) safeTrackerOp("TanStack Query install", () => (0, import_runtime_core3.installTanStackQueryTracker)(queryClientRef.current, client3));
+            if (queryClientRef.current)
+              safeTrackerOp(
+                "TanStack Query install",
+                () => (0, import_runtime_core3.installTanStackQueryTracker)(queryClientRef.current, client3)
+              );
             break;
           case "ext:stopTanstackTracking":
             safeTrackerOp("TanStack Query uninstall", import_runtime_core3.uninstallTanStackQueryTracker);
@@ -906,9 +934,43 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
       }
     });
     client3.connect();
+    (0, import_runtime_core3.setDuplicateKeyEmitter)((evt) => {
+      try {
+        if (!client3.connected) return;
+        client3.send({
+          type: "runtime:duplicateKey",
+          callSiteId: evt.callSiteId,
+          fileName: evt.fileName,
+          lineNumber: evt.lineNumber,
+          columnNumber: evt.columnNumber,
+          duplicateKey: evt.duplicateKey,
+          occurrences: evt.occurrences,
+          timestamp: Date.now()
+        });
+      } catch (error) {
+        console.error("[FloTrace] Error emitting runtime:duplicateKey:", error);
+      }
+    });
+    const callSiteMetricsTimer = setInterval(() => {
+      try {
+        if (!client3.connected) return;
+        if (!(0, import_runtime_core3.isJsxRuntimeActive)()) return;
+        const metrics = (0, import_runtime_core3.computeCallSiteMetricsPayload)();
+        if (metrics === null) return;
+        client3.send({
+          type: "runtime:callSiteMetrics",
+          metrics,
+          timestamp: Date.now()
+        });
+      } catch (error) {
+        console.error("[FloTrace] Error emitting runtime:callSiteMetrics:", error);
+      }
+    }, 1e3);
     return () => {
       unsubConnection();
       unsubMessage();
+      (0, import_runtime_core3.setDuplicateKeyEmitter)(null);
+      clearInterval(callSiteMetricsTimer);
       pendingCleanupTimer = setTimeout(() => {
         pendingCleanupTimer = null;
         safeTrackerOp("cleanup fiberTreeWalker", import_runtime_core3.uninstallFiberTreeWalker);
@@ -919,28 +981,32 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
         safeTrackerOp("cleanup timelineTracker", import_runtime_core3.uninstallTimelineTracker);
         safeTrackerOp("cleanup networkTracker", uninstallNetworkTracker);
         safeTrackerOp("cleanup websocketClient", import_runtime_core3.disposeWebSocketClient);
+        safeTrackerOp("cleanup callSiteRenders", import_runtime_core3.clearCallSiteRenders);
       }, 100);
     };
   }, [mergedConfig.enabled, mergedConfig.port, mergedConfig.appName]);
-  const onRenderCallback = (0, import_react.useCallback)((id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
-    try {
-      if (!enabledRef.current) return;
-      const client3 = (0, import_runtime_core3.getWebSocketClient)();
-      if (!client3.connected) return;
-      const normalizedPhase = phase === "nested-update" ? "update" : phase;
-      client3.send({
-        type: "runtime:render",
-        componentName: id,
-        phase: normalizedPhase,
-        actualDuration,
-        baseDuration,
-        timestamp: commitTime
-      });
-      (0, import_runtime_core3.requestTreeSnapshot)();
-    } catch (error) {
-      console.error("[FloTrace] Error in Profiler callback:", error);
-    }
-  }, []);
+  const onRenderCallback = (0, import_react.useCallback)(
+    (id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
+      try {
+        if (!enabledRef.current) return;
+        const client3 = (0, import_runtime_core3.getWebSocketClient)();
+        if (!client3.connected) return;
+        const normalizedPhase = phase === "nested-update" ? "update" : phase;
+        client3.send({
+          type: "runtime:render",
+          componentName: id,
+          phase: normalizedPhase,
+          actualDuration,
+          baseDuration,
+          timestamp: commitTime
+        });
+        (0, import_runtime_core3.requestTreeSnapshot)();
+      } catch (error) {
+        console.error("[FloTrace] Error in Profiler callback:", error);
+      }
+    },
+    []
+  );
   const contextValue = {
     connected,
     enabled: mergedConfig.enabled,

package/dist/index.mjs

@@ -2,7 +2,14 @@
 export * from "@flotrace/runtime-core";
 
 // src/FloTraceProvider.tsx
-import React, { useCallback, useEffect, useRef, createContext, useContext, Profiler } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  createContext,
+  useContext,
+  Profiler
+} from "react";
 import {
   DEFAULT_CONFIG,
   getWebSocketClient,
@@ -27,13 +34,17 @@ import {
   uninstallTimelineTracker,
   getTimeline,
   detectWebFramework,
-  resolveValueTrace
+  resolveValueTrace,
+  computeCallSiteMetricsPayload,
+  setDuplicateKeyEmitter,
+  isJsxRuntimeActive,
+  clearCallSiteRenders
 } from "@flotrace/runtime-core";
 
 // package.json
 var package_default = {
   name: "@flotrace/runtime",
-  version: "2.2.4",
+  version: "2.3.0",
   description: "Runtime package for FloTrace - enables real-time render tracking in your React app",
   main: "./dist/index.js",
   module: "./dist/index.mjs",
@@ -61,7 +72,7 @@ var package_default = {
     "release:major": "npm version major && npm publish"
   },
   dependencies: {
-    "@flotrace/runtime-core": "2.2.4"
+    "@flotrace/runtime-core": "2.3.0"
   },
   peerDependencies: {
     react: ">=16.9.0",
@@ -379,11 +390,15 @@ function patchFetch() {
     const entry = createEntry(method, parsedUrl, init);
     const startTime = performance.now();
     if (init?.signal) {
-      init.signal.addEventListener("abort", () => {
-        entry.state = "aborted";
-        entry.durationMs = performance.now() - startTime;
-        pushEntry(entry);
-      }, { once: true });
+      init.signal.addEventListener(
+        "abort",
+        () => {
+          entry.state = "aborted";
+          entry.durationMs = performance.now() - startTime;
+          pushEntry(entry);
+        },
+        { once: true }
+      );
     }
     pushEntry({ ...entry });
     try {
@@ -560,10 +575,7 @@ function parseUrl(url) {
     return { path: url.split("?")[0] ?? url, host: "" };
   }
 }
-var COMBINED_NOISE_PATTERN = new RegExp(
-  NOISE_URL_PATTERNS.map((r) => r.source).join("|"),
-  "i"
-);
+var COMBINED_NOISE_PATTERN = new RegExp(NOISE_URL_PATTERNS.map((r) => r.source).join("|"), "i");
 function isNoiseUrl(url) {
   return COMBINED_NOISE_PATTERN.test(url);
 }
@@ -581,7 +593,8 @@ function parseXhrContentLength(xhr) {
 function hasHeader(init, name) {
   if (!init?.headers) return false;
   if (init.headers instanceof Headers) return init.headers.has(name);
-  if (Array.isArray(init.headers)) return init.headers.some(([k]) => k.toLowerCase() === name.toLowerCase());
+  if (Array.isArray(init.headers))
+    return init.headers.some(([k]) => k.toLowerCase() === name.toLowerCase());
   if (typeof init.headers === "object") {
     return Object.keys(init.headers).some((k) => k.toLowerCase() === name.toLowerCase());
   }
@@ -664,7 +677,13 @@ var FloTraceContext = createContext(null);
 function useFloTrace() {
   return useContext(FloTraceContext);
 }
-function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClient }) {
+function FloTraceProvider({
+  children,
+  config = {},
+  stores,
+  reduxStore,
+  queryClient
+}) {
   if (typeof navigator !== "undefined" && navigator.product === "ReactNative") {
     console.warn(
       "[FloTrace] FloTraceProvider (from @flotrace/runtime) detected a React Native environment. Install @flotrace/runtime-native and use FloTraceProviderNative instead. Skipping attach."
@@ -730,13 +749,22 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
           case "ext:startTracking":
             trackingOptionsRef.current = message.options || {};
             if (message.options?.trackZustand && storesRef.current && Object.keys(storesRef.current).length > 0) {
-              safeTrackerOp("Zustand install", () => installZustandTracker(storesRef.current, client3));
+              safeTrackerOp(
+                "Zustand install",
+                () => installZustandTracker(storesRef.current, client3)
+              );
             }
             if (message.options?.trackRedux && reduxStoreRef.current) {
-              safeTrackerOp("Redux install", () => installReduxTracker(reduxStoreRef.current, client3));
+              safeTrackerOp(
+                "Redux install",
+                () => installReduxTracker(reduxStoreRef.current, client3)
+              );
             }
             if (message.options?.trackTanstackQuery && queryClientRef.current) {
-              safeTrackerOp("TanStack Query install", () => installTanStackQueryTracker(queryClientRef.current, client3));
+              safeTrackerOp(
+                "TanStack Query install",
+                () => installTanStackQueryTracker(queryClientRef.current, client3)
+              );
             }
             if (message.options?.trackRouter) {
               safeTrackerOp("Router install", () => installRouterTracker(client3));
@@ -862,7 +890,11 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
             break;
           // --- Individual tracker start/stop (sidebar panel show/hide) ---
           case "ext:startReduxTracking":
-            if (reduxStoreRef.current) safeTrackerOp("Redux install", () => installReduxTracker(reduxStoreRef.current, client3));
+            if (reduxStoreRef.current)
+              safeTrackerOp(
+                "Redux install",
+                () => installReduxTracker(reduxStoreRef.current, client3)
+              );
             break;
           case "ext:stopReduxTracking":
             safeTrackerOp("Redux uninstall", uninstallReduxTracker);
@@ -875,14 +907,21 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
             break;
           case "ext:startZustandTracking":
             if (storesRef.current && Object.keys(storesRef.current).length > 0) {
-              safeTrackerOp("Zustand install", () => installZustandTracker(storesRef.current, client3));
+              safeTrackerOp(
+                "Zustand install",
+                () => installZustandTracker(storesRef.current, client3)
+              );
             }
             break;
           case "ext:stopZustandTracking":
             safeTrackerOp("Zustand uninstall", uninstallZustandTracker);
             break;
           case "ext:startTanstackTracking":
-            if (queryClientRef.current) safeTrackerOp("TanStack Query install", () => installTanStackQueryTracker(queryClientRef.current, client3));
+            if (queryClientRef.current)
+              safeTrackerOp(
+                "TanStack Query install",
+                () => installTanStackQueryTracker(queryClientRef.current, client3)
+              );
             break;
           case "ext:stopTanstackTracking":
             safeTrackerOp("TanStack Query uninstall", uninstallTanStackQueryTracker);
@@ -895,9 +934,43 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
       }
     });
     client3.connect();
+    setDuplicateKeyEmitter((evt) => {
+      try {
+        if (!client3.connected) return;
+        client3.send({
+          type: "runtime:duplicateKey",
+          callSiteId: evt.callSiteId,
+          fileName: evt.fileName,
+          lineNumber: evt.lineNumber,
+          columnNumber: evt.columnNumber,
+          duplicateKey: evt.duplicateKey,
+          occurrences: evt.occurrences,
+          timestamp: Date.now()
+        });
+      } catch (error) {
+        console.error("[FloTrace] Error emitting runtime:duplicateKey:", error);
+      }
+    });
+    const callSiteMetricsTimer = setInterval(() => {
+      try {
+        if (!client3.connected) return;
+        if (!isJsxRuntimeActive()) return;
+        const metrics = computeCallSiteMetricsPayload();
+        if (metrics === null) return;
+        client3.send({
+          type: "runtime:callSiteMetrics",
+          metrics,
+          timestamp: Date.now()
+        });
+      } catch (error) {
+        console.error("[FloTrace] Error emitting runtime:callSiteMetrics:", error);
+      }
+    }, 1e3);
     return () => {
       unsubConnection();
       unsubMessage();
+      setDuplicateKeyEmitter(null);
+      clearInterval(callSiteMetricsTimer);
       pendingCleanupTimer = setTimeout(() => {
         pendingCleanupTimer = null;
         safeTrackerOp("cleanup fiberTreeWalker", uninstallFiberTreeWalker);
@@ -908,28 +981,32 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
         safeTrackerOp("cleanup timelineTracker", uninstallTimelineTracker);
         safeTrackerOp("cleanup networkTracker", uninstallNetworkTracker);
         safeTrackerOp("cleanup websocketClient", disposeWebSocketClient);
+        safeTrackerOp("cleanup callSiteRenders", clearCallSiteRenders);
       }, 100);
     };
   }, [mergedConfig.enabled, mergedConfig.port, mergedConfig.appName]);
-  const onRenderCallback = useCallback((id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
-    try {
-      if (!enabledRef.current) return;
-      const client3 = getWebSocketClient();
-      if (!client3.connected) return;
-      const normalizedPhase = phase === "nested-update" ? "update" : phase;
-      client3.send({
-        type: "runtime:render",
-        componentName: id,
-        phase: normalizedPhase,
-        actualDuration,
-        baseDuration,
-        timestamp: commitTime
-      });
-      requestTreeSnapshot();
-    } catch (error) {
-      console.error("[FloTrace] Error in Profiler callback:", error);
-    }
-  }, []);
+  const onRenderCallback = useCallback(
+    (id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
+      try {
+        if (!enabledRef.current) return;
+        const client3 = getWebSocketClient();
+        if (!client3.connected) return;
+        const normalizedPhase = phase === "nested-update" ? "update" : phase;
+        client3.send({
+          type: "runtime:render",
+          componentName: id,
+          phase: normalizedPhase,
+          actualDuration,
+          baseDuration,
+          timestamp: commitTime
+        });
+        requestTreeSnapshot();
+      } catch (error) {
+        console.error("[FloTrace] Error in Profiler callback:", error);
+      }
+    },
+    []
+  );
   const contextValue = {
     connected,
     enabled: mergedConfig.enabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flotrace/runtime",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "description": "Runtime package for FloTrace - enables real-time render tracking in your React app",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -28,7 +28,7 @@
     "release:major": "npm version major && npm publish"
   },
   "dependencies": {
-    "@flotrace/runtime-core": "2.2.4"
+    "@flotrace/runtime-core": "2.3.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",