@flotrace/runtime-core 2.0.0 → 2.2.0

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -25,6 +35,7 @@ __export(index_exports, {
   buildAncestorChain: () => buildAncestorChain,
   clearFetchOriginTags: () => clearFetchOriginTags,
   detectServerComponent: () => detectServerComponent,
+  detectWebFramework: () => detectWebFramework,
   disposeWebSocketClient: () => disposeWebSocketClient,
   findFetchOrigin: () => findFetchOrigin,
   getChangedKeys: () => getChangedKeys,
@@ -35,8 +46,11 @@ __export(index_exports, {
   getNodeEffects: () => getNodeEffects,
   getNodeHooks: () => getNodeHooks,
   getNodeProps: () => getNodeProps,
+  getReduxSnapshot: () => getReduxSnapshot,
+  getTanstackSnapshot: () => getTanstackSnapshot,
   getTimeline: () => getTimeline,
   getWebSocketClient: () => getWebSocketClient,
+  getZustandSnapshot: () => getZustandSnapshot,
   hasActiveTags: () => hasActiveTags,
   inspectEffects: () => inspectEffects,
   inspectHooks: () => inspectHooks,
@@ -53,6 +67,7 @@ __export(index_exports, {
   requestFullSnapshot: () => requestFullSnapshot,
   requestTreeSnapshot: () => requestTreeSnapshot,
   resetNextjsDetection: () => resetNextjsDetection,
+  resolveValueTrace: () => resolveValueTrace,
   serializeProps: () => serializeProps,
   serializeValue: () => serializeValue,
   tagFetchData: () => tagFetchData,
@@ -243,6 +258,7 @@ function getChangedKeys(prev, next) {
 }
 
 // src/websocketClient.ts
+var import_react = __toESM(require("react"));
 var _FloTraceWebSocketClient = class _FloTraceWebSocketClient {
   constructor(config = {}) {
     this.ws = null;
@@ -290,7 +306,10 @@ var _FloTraceWebSocketClient = class _FloTraceWebSocketClient {
           appUrl: this.config.getAppUrl?.(),
           platform: this.config.platform,
           appId: this.config.appId,
-          appVersion: this.config.appVersion
+          appVersion: this.config.appVersion,
+          frameworkName: this.config.frameworkName,
+          frameworkVersion: this.config.frameworkVersion,
+          reactNativeVersion: this.config.reactNativeVersion
         });
         this.flush();
       };
@@ -474,12 +493,17 @@ var _FloTraceWebSocketClient = class _FloTraceWebSocketClient {
     return this.ws !== null && this.ws.readyState === WebSocket.OPEN;
   }
   /**
-   * Get React version if available
+   * Get React version if available.
+   *
+   * Historical note: an earlier implementation read `globalThis.React?.version` —
+   * but React is an ES-module import in modern bundles (Vite/webpack/Next.js) and
+   * is never placed on `globalThis`, so the probe returned undefined for every
+   * typical bundled app. Reading `React.version` via a direct import is
+   * authoritative across web (both CJS and ESM bundles), React Native, and SSR.
    */
   getReactVersion() {
     try {
-      const React = globalThis.React;
-      return React?.version;
+      return import_react.default.version;
     } catch {
       return void 0;
     }
@@ -1609,8 +1633,8 @@ function runAnalysis(tree, fiberRefMap2) {
 }
 function schedulePropDrillingAnalysis(tree, fiberRefMap2, client2) {
   if (analyzeTimer) clearTimeout(analyzeTimer);
-  const now = Date.now();
-  const elapsed = now - lastAnalysisTime;
+  const now2 = Date.now();
+  const elapsed = now2 - lastAnalysisTime;
   const delay = elapsed >= ANALYZE_INTERVAL_MS ? 0 : ANALYZE_INTERVAL_MS - elapsed;
   analyzeTimer = setTimeout(() => {
     analyzeTimer = null;
@@ -2637,7 +2661,7 @@ function executeSnapshot(root) {
     }
     previousFlatTree = currentFlatTree;
     if (pendingLocalStateCorrelations.length > 0) {
-      const now = Date.now();
+      const now2 = Date.now();
       const toSend = pendingLocalStateCorrelations.splice(0);
       for (const corr of toSend) {
         try {
@@ -2646,7 +2670,7 @@ function executeSnapshot(root) {
             requestId: corr.requestId,
             componentName: corr.componentName,
             hookIndex: corr.hookIndex,
-            timestamp: now
+            timestamp: now2
           });
         } catch {
         }
@@ -3091,6 +3115,7 @@ var activeUnsubscribers = [];
 var isInstalled4 = false;
 var debounceTimers = /* @__PURE__ */ new Map();
 var DEBOUNCE_MS = 200;
+var trackedStores = /* @__PURE__ */ new Map();
 function installZustandTracker(stores, client2) {
   if (isInstalled4) {
     console.warn("[FloTrace] Zustand tracker already installed, reinstalling");
@@ -3106,6 +3131,7 @@ function installZustandTracker(stores, client2) {
       continue;
     }
     try {
+      trackedStores.set(storeName, store);
       const initialState = store.getState();
       sendStoreUpdate(storeName, initialState, Object.keys(initialState), client2);
       const unsubscribe = store.subscribe((newState, prevState) => {
@@ -3135,9 +3161,20 @@ function uninstallZustandTracker() {
     }
   }
   activeUnsubscribers = [];
+  trackedStores.clear();
   isInstalled4 = false;
   console.log("[FloTrace] Zustand tracker uninstalled");
 }
+function getZustandSnapshot() {
+  const snapshot = /* @__PURE__ */ new Map();
+  for (const [name, store] of trackedStores) {
+    try {
+      snapshot.set(name, store.getState());
+    } catch {
+    }
+  }
+  return snapshot;
+}
 function scheduleStoreUpdate(storeName, prevState, newState, client2) {
   let changedKeys;
   try {
@@ -3176,6 +3213,7 @@ var isInstalled5 = false;
 var debounceTimer = null;
 var previousState = null;
 var DEBOUNCE_MS2 = 200;
+var trackedStore = null;
 function isReduxStore(obj) {
   return typeof obj === "object" && obj !== null && typeof obj.getState === "function" && typeof obj.subscribe === "function" && typeof obj.dispatch === "function";
 }
@@ -3187,6 +3225,7 @@ function installReduxTracker(store, client2) {
   isInstalled5 = true;
   console.log("[FloTrace] Installing Redux tracker");
   try {
+    trackedStore = store;
     const initialState = store.getState();
     previousState = initialState;
     sendReduxUpdate(initialState, Object.keys(initialState), client2);
@@ -3218,9 +3257,18 @@ function uninstallReduxTracker() {
     activeUnsubscribe = null;
   }
   previousState = null;
+  trackedStore = null;
   isInstalled5 = false;
   console.log("[FloTrace] Redux tracker uninstalled");
 }
+function getReduxSnapshot() {
+  if (!trackedStore) return null;
+  try {
+    return trackedStore.getState();
+  } catch {
+    return null;
+  }
+}
 function scheduleReduxUpdate(newState, client2) {
   let changedKeys;
   try {
@@ -3258,6 +3306,7 @@ var queryUnsubscribe = null;
 var mutationUnsubscribe = null;
 var debounceTimer2 = null;
 var DEBOUNCE_MS3 = 300;
+var trackedClient = null;
 var MAX_EVENTS_PER_QUERY = 50;
 var queryTracking = /* @__PURE__ */ new Map();
 var CORRELATION_WINDOW_MS = 500;
@@ -3280,6 +3329,7 @@ function installTanStackQueryTracker(queryClient, client2) {
   isInstalled6 = true;
   console.log("[FloTrace] Installing TanStack Query tracker");
   try {
+    trackedClient = queryClient;
     const queryCache = queryClient.getQueryCache();
     const mutationCache = queryClient.getMutationCache();
     for (const query of queryCache.getAll()) {
@@ -3344,9 +3394,24 @@ function uninstallTanStackQueryTracker() {
     clearTimeout(pending.timeoutId);
   }
   pendingCorrelations.clear();
+  trackedClient = null;
   isInstalled6 = false;
   console.log("[FloTrace] TanStack Query tracker uninstalled");
 }
+function getTanstackSnapshot() {
+  const snapshot = /* @__PURE__ */ new Map();
+  if (!trackedClient) return snapshot;
+  try {
+    const queryCache = trackedClient.getQueryCache();
+    for (const query of queryCache.getAll()) {
+      if (query.state.data !== void 0) {
+        snapshot.set(query.queryHash, { queryKey: query.queryKey, data: query.state.data });
+      }
+    }
+  } catch {
+  }
+  return snapshot;
+}
 function computeDataHash(data) {
   if (data === null || data === void 0) return "__null__";
   try {
@@ -3409,11 +3474,11 @@ function updateQueryTracking(query, eventType) {
       }
     }
     if (tracking.prevFetchStatus === "idle" && currentFetchStatus === "fetching") {
-      const now = Date.now();
+      const now2 = Date.now();
       for (const pending of pendingCorrelations.values()) {
         if (pending.idleQueryHashes.has(query.queryHash)) {
           pending.affectedQueries.set(query.queryHash, {
-            fetchStartedAt: now,
+            fetchStartedAt: now2,
             queryKey: query.queryKey
           });
         }
@@ -3425,7 +3490,7 @@ function updateQueryTracking(query, eventType) {
 }
 function openCorrelationWindow(mutation, queryCache, mutationCache, client2) {
   const correlationId = `corr-${++correlationCounter}`;
-  const now = Date.now();
+  const now2 = Date.now();
   const idleQueryHashes = /* @__PURE__ */ new Set();
   for (const query of queryCache.getAll()) {
     if (query.state.fetchStatus === "idle") {
@@ -3439,7 +3504,7 @@ function openCorrelationWindow(mutation, queryCache, mutationCache, client2) {
     correlationId,
     mutationId: mutation.mutationId,
     mutationKey: mutation.options.mutationKey,
-    completedAt: now,
+    completedAt: now2,
     idleQueryHashes,
     affectedQueries: /* @__PURE__ */ new Map(),
     timeoutId
@@ -3638,6 +3703,337 @@ function safeCall(fn, fallback) {
     return fallback;
   }
 }
+
+// src/valueTraceResolver.ts
+var FIBER_TAG_CONTEXT_PROVIDER = 10;
+var BUDGET_MS = 50;
+var SCAN_DEPTH = 3;
+var MAX_PROP_CHAIN_DEPTH = 30;
+function now() {
+  return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+}
+function walkPath(root, path) {
+  let cur = root;
+  for (const key of path) {
+    if (cur === null || cur === void 0 || typeof cur !== "object") return void 0;
+    cur = cur[key];
+  }
+  return cur;
+}
+function getHookValueAt(fiber, hookIndex) {
+  let hook = fiber.memoizedState;
+  let i = 0;
+  while (hook && i < hookIndex) {
+    hook = hook.next;
+    i++;
+  }
+  if (!hook) return void 0;
+  return hook.memoizedState;
+}
+function valuesMatch(target, targetFp, candidate) {
+  const targetIsObject = target !== null && typeof target === "object";
+  const candidateIsObject = candidate !== null && typeof candidate === "object";
+  if (targetIsObject && candidateIsObject && target === candidate) return "exact";
+  if (!shouldFlagRename(target) || !shouldFlagRename(candidate)) return null;
+  if (valueFingerprint(candidate) === targetFp) return "fingerprint-match";
+  return null;
+}
+function findMatchingPathInObject(target, targetFp, container, currentPath, depth, deadline) {
+  if (now() > deadline) return null;
+  if (depth > SCAN_DEPTH) return null;
+  if (container === null || typeof container !== "object") return null;
+  const selfMatch = valuesMatch(target, targetFp, container);
+  if (selfMatch) return { path: [...currentPath], confidence: selfMatch };
+  if (Array.isArray(container)) {
+    for (let i = 0; i < Math.min(container.length, 50); i++) {
+      const child = container[i];
+      const directMatch = valuesMatch(target, targetFp, child);
+      if (directMatch) return { path: [...currentPath, String(i)], confidence: directMatch };
+      const nested = findMatchingPathInObject(target, targetFp, child, [...currentPath, String(i)], depth + 1, deadline);
+      if (nested) return nested;
+    }
+  } else {
+    for (const key of Object.keys(container)) {
+      const child = container[key];
+      const directMatch = valuesMatch(target, targetFp, child);
+      if (directMatch) return { path: [...currentPath, key], confidence: directMatch };
+      const nested = findMatchingPathInObject(target, targetFp, child, [...currentPath, key], depth + 1, deadline);
+      if (nested) return nested;
+    }
+  }
+  return null;
+}
+function buildFiberToNodeIdMap() {
+  const reverse = /* @__PURE__ */ new Map();
+  for (const [nodeId, fiber] of getFiberRefMap()) {
+    reverse.set(fiber, nodeId);
+  }
+  return reverse;
+}
+function resolveValueTrace(input) {
+  const startedAt = now();
+  const deadline = startedAt + BUDGET_MS;
+  const steps = [];
+  const base = {
+    rootNodeId: input.nodeId,
+    rootPropPath: input.propPath,
+    rootHookPath: input.hookPath,
+    steps,
+    resolvedAtMs: now()
+  };
+  const fiber = getFiberRefMap().get(input.nodeId);
+  if (!fiber) {
+    return { ...base, error: "no-fiber", resolvedAtMs: now() };
+  }
+  let rootValue;
+  if (input.propPath && input.propPath.length > 0) {
+    if (!fiber.memoizedProps) return { ...base, error: "value-not-found", resolvedAtMs: now() };
+    rootValue = walkPath(fiber.memoizedProps, input.propPath);
+  } else if (input.hookPath) {
+    const hookValue = getHookValueAt(fiber, input.hookPath.hookIndex);
+    rootValue = input.hookPath.subPath && input.hookPath.subPath.length > 0 ? walkPath(hookValue, input.hookPath.subPath) : hookValue;
+  } else {
+    return { ...base, error: "value-not-found", resolvedAtMs: now() };
+  }
+  if (rootValue === void 0) {
+    return { ...base, error: "value-not-found", resolvedAtMs: now() };
+  }
+  const rootFp = valueFingerprint(rootValue);
+  const fiberToNodeId = buildFiberToNodeIdMap();
+  const rootComponentName = getComponentNameFromFiber(fiber) ?? "Unknown";
+  if (input.propPath) {
+    steps.push({
+      kind: "prop",
+      nodeId: input.nodeId,
+      componentName: rootComponentName,
+      propPath: input.propPath,
+      confidence: "exact"
+    });
+  } else if (input.hookPath) {
+    steps.push({
+      kind: "hook-state",
+      nodeId: input.nodeId,
+      componentName: rootComponentName,
+      hookIndex: input.hookPath.hookIndex,
+      hookType: "unknown",
+      // Cheap: full hook classification is expensive; caller can fetch separately.
+      subPath: input.hookPath.subPath,
+      confidence: "exact"
+    });
+  }
+  if (input.propPath) {
+    let current = fiber.return;
+    let hops = 0;
+    while (current && hops < MAX_PROP_CHAIN_DEPTH) {
+      if (now() > deadline) return { ...base, steps, truncated: true, resolvedAtMs: now() };
+      if (current.tag !== FIBER_TAG_CONTEXT_PROVIDER) {
+        const props = current.memoizedProps;
+        if (props) {
+          const match = findMatchingPathInObject(rootValue, rootFp, props, [], 0, deadline);
+          if (match) {
+            const ancestorNodeId = fiberToNodeId.get(current);
+            const ancestorName = getComponentNameFromFiber(current) ?? "Unknown";
+            if (ancestorNodeId) {
+              steps.push({
+                kind: "prop",
+                nodeId: ancestorNodeId,
+                componentName: ancestorName,
+                propPath: match.path,
+                confidence: match.confidence
+              });
+            }
+          }
+        }
+      }
+      current = current.return;
+      hops++;
+    }
+  }
+  if (input.hookPath) {
+    const origin = findFetchOrigin(rootValue);
+    if (origin) {
+      steps.push({
+        kind: "api",
+        requestId: origin,
+        method: "UNKNOWN",
+        urlPath: "",
+        ageMs: 0
+      });
+      return { ...base, steps, resolvedAtMs: now() };
+    }
+  }
+  const derivedMatch = findDerivationMatch(fiber, rootValue, rootFp, rootComponentName);
+  if (derivedMatch) {
+    steps.push({ ...derivedMatch, nodeId: input.nodeId });
+    return { ...base, steps, resolvedAtMs: now() };
+  }
+  const contextMatch = findContextMatch(fiber, rootValue, rootFp, fiberToNodeId);
+  if (contextMatch) {
+    steps.push(contextMatch.step);
+    const providerStoreMatch = findStoreMatch(contextMatch.providerValue, valueFingerprint(contextMatch.providerValue), deadline);
+    if (providerStoreMatch) {
+      steps.push({
+        kind: "store",
+        source: providerStoreMatch.source,
+        storeName: providerStoreMatch.storeName,
+        keyPath: providerStoreMatch.keyPath,
+        confidence: providerStoreMatch.confidence
+      });
+      const origin = findFetchOrigin(providerStoreMatch.matchedValue);
+      if (origin) {
+        steps.push({ kind: "api", requestId: origin, method: "UNKNOWN", urlPath: "", ageMs: 0 });
+      }
+    } else {
+      const origin = findFetchOrigin(contextMatch.providerValue);
+      if (origin) {
+        steps.push({ kind: "api", requestId: origin, method: "UNKNOWN", urlPath: "", ageMs: 0 });
+      }
+    }
+    return { ...base, steps, resolvedAtMs: now() };
+  }
+  const storeMatch = findStoreMatch(rootValue, rootFp, deadline);
+  if (storeMatch) {
+    steps.push({
+      kind: "store",
+      source: storeMatch.source,
+      storeName: storeMatch.storeName,
+      keyPath: storeMatch.keyPath,
+      confidence: storeMatch.confidence
+    });
+    const origin = findFetchOrigin(storeMatch.matchedValue);
+    if (origin) {
+      steps.push({
+        kind: "api",
+        requestId: origin,
+        method: "UNKNOWN",
+        urlPath: "",
+        ageMs: 0
+      });
+    }
+  }
+  return { ...base, steps, resolvedAtMs: now() };
+}
+function findContextMatch(consumer, target, targetFp, fiberToNodeId) {
+  const deps = consumer.dependencies?.firstContext;
+  if (!deps) return null;
+  let dep = deps;
+  while (dep) {
+    const match = valuesMatch(target, targetFp, dep.memoizedValue);
+    if (match) {
+      const provider = findNearestProvider(consumer, dep.context);
+      const step = {
+        kind: "context",
+        contextName: dep.context.displayName || "Context",
+        providerNodeId: provider ? fiberToNodeId.get(provider) : void 0,
+        confidence: match
+      };
+      const providerValue = provider?.memoizedProps?.value ?? dep.memoizedValue;
+      return { step, providerValue };
+    }
+    dep = dep.next;
+  }
+  return null;
+}
+function findDerivationMatch(fiber, target, targetFp, componentName) {
+  let hook = fiber.memoizedState;
+  let index = 0;
+  while (hook) {
+    const ms = hook.memoizedState;
+    if (Array.isArray(ms) && ms.length === 2 && Array.isArray(ms[1])) {
+      const [computed, deps] = ms;
+      const match = valuesMatch(target, targetFp, computed);
+      if (match) {
+        const hookType = typeof computed === "function" ? "useCallback" : "useMemo";
+        return {
+          kind: "derived",
+          nodeId: "",
+          componentName,
+          hookIndex: index,
+          hookType,
+          depCount: deps.length,
+          confidence: match
+        };
+      }
+    }
+    hook = hook.next;
+    index++;
+  }
+  return null;
+}
+function findNearestProvider(consumer, contextObj) {
+  let current = consumer.return;
+  let hops = 0;
+  while (current && hops < MAX_PROP_CHAIN_DEPTH) {
+    if (current.tag === FIBER_TAG_CONTEXT_PROVIDER) {
+      const providerType = current.type;
+      if (providerType && providerType._context === contextObj) return current;
+    }
+    current = current.return;
+    hops++;
+  }
+  return null;
+}
+function findStoreMatch(target, targetFp, deadline) {
+  for (const [storeName, state] of getZustandSnapshot()) {
+    if (now() > deadline) return null;
+    const hit = findMatchingPathInObject(target, targetFp, state, [], 0, deadline);
+    if (hit) {
+      return {
+        source: "zustand",
+        storeName,
+        keyPath: hit.path,
+        confidence: hit.confidence,
+        matchedValue: walkPath(state, hit.path)
+      };
+    }
+  }
+  const redux = getReduxSnapshot();
+  if (redux) {
+    if (now() > deadline) return null;
+    const hit = findMatchingPathInObject(target, targetFp, redux, [], 0, deadline);
+    if (hit) {
+      return {
+        source: "redux",
+        storeName: "redux",
+        keyPath: hit.path,
+        confidence: hit.confidence,
+        matchedValue: walkPath(redux, hit.path)
+      };
+    }
+  }
+  for (const [queryHash, entry] of getTanstackSnapshot()) {
+    if (now() > deadline) return null;
+    const hit = findMatchingPathInObject(target, targetFp, entry.data, [], 0, deadline);
+    if (hit) {
+      return {
+        source: "tanstack-query",
+        storeName: queryHash,
+        keyPath: hit.path,
+        confidence: hit.confidence,
+        matchedValue: walkPath(entry.data, hit.path)
+      };
+    }
+  }
+  return null;
+}
+
+// src/frameworkDetect.ts
+function detectWebFramework() {
+  if (typeof document === "undefined") return {};
+  const hasNextData = !!globalThis.__NEXT_DATA__ || !!document.querySelector("script#__NEXT_DATA__");
+  if (!hasNextData) return { frameworkName: "plain-react" };
+  let version;
+  try {
+    const req = globalThis.require;
+    if (typeof req === "function") {
+      const id = "next/package.json";
+      const pkg = req(id);
+      version = pkg?.version;
+    }
+  } catch {
+  }
+  return { frameworkName: "next", frameworkVersion: version };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_CONFIG,
@@ -3645,6 +4041,7 @@ function safeCall(fn, fallback) {
   buildAncestorChain,
   clearFetchOriginTags,
   detectServerComponent,
+  detectWebFramework,
   disposeWebSocketClient,
   findFetchOrigin,
   getChangedKeys,
@@ -3655,8 +4052,11 @@ function safeCall(fn, fallback) {
   getNodeEffects,
   getNodeHooks,
   getNodeProps,
+  getReduxSnapshot,
+  getTanstackSnapshot,
   getTimeline,
   getWebSocketClient,
+  getZustandSnapshot,
   hasActiveTags,
   inspectEffects,
   inspectHooks,
@@ -3673,6 +4073,7 @@ function safeCall(fn, fallback) {
   requestFullSnapshot,
   requestTreeSnapshot,
   resetNextjsDetection,
+  resolveValueTrace,
   serializeProps,
   serializeValue,
   tagFetchData,