@getlimelight/sdk 0.1.4 → 0.2.0

package/dist/index.mjs

@@ -221,7 +221,20 @@ var SENSITIVE_HEADERS = [
 ];
 var DEFAULT_PORT = 9090;
 var WS_PATH = "/limelight";
-var SDK_VERSION = true ? "0.1.4" : "test-version";
+var SDK_VERSION = true ? "0.2.0" : "test-version";
+var RENDER_THRESHOLDS = {
+  HOT_VELOCITY: 5,
+  HIGH_RENDER_COUNT: 50,
+  VELOCITY_WINDOW_MS: 2e3,
+  SNAPSHOT_INTERVAL_MS: 1e3,
+  MIN_DELTA_TO_EMIT: 1,
+  MAX_PROP_KEYS_TO_TRACK: 20,
+  // Don't track more than this many unique props
+  MAX_PROP_CHANGES_PER_SNAPSHOT: 10,
+  // Limit delta array size
+  TOP_PROPS_TO_REPORT: 5
+  // Only report top N changed props
+};
 
 // src/helpers/safety/redactSensitiveHeaders.ts
 var redactSensitiveHeaders = (headers) => {
@@ -401,6 +414,42 @@ var formatRequestName = (url) => {
   }
 };
 
+// src/helpers/render/generateRenderId.ts
+var counter = 0;
+var generateRenderId = () => {
+  const timestamp = Date.now().toString(36);
+  const count = (counter++).toString(36);
+  const random = Math.random().toString(36).substring(2, 6);
+  if (counter > 1e3) counter = 0;
+  return `${timestamp}${count}-${random}`;
+};
+
+// src/helpers/render/createEmptyCauseBreakdown.ts
+var createEmptyCauseBreakdown = () => {
+  return {
+    ["state_change" /* STATE_CHANGE */]: 0,
+    ["props_change" /* PROPS_CHANGE */]: 0,
+    ["context_change" /* CONTEXT_CHANGE */]: 0,
+    ["parent_render" /* PARENT_RENDER */]: 0,
+    ["force_update" /* FORCE_UPDATE */]: 0,
+    ["unknown" /* UNKNOWN */]: 0
+  };
+};
+
+// src/helpers/render/createEmptyPropChangeStats.ts
+var createEmptyPropChangeStats = () => {
+  return {
+    changeCount: /* @__PURE__ */ new Map(),
+    referenceOnlyCount: /* @__PURE__ */ new Map()
+  };
+};
+
+// src/helpers/render/getCurrentTransactionId.ts
+var globalGetTransactionId = null;
+var getCurrentTransactionId = () => {
+  return globalGetTransactionId?.() ?? null;
+};
+
 // src/limelight/interceptors/ConsoleInterceptor.ts
 var ConsoleInterceptor = class {
   constructor(sendMessage, getSessionId) {
@@ -953,6 +1002,561 @@ var XHRInterceptor = class {
   }
 };
 
+// src/limelight/interceptors/RenderInterceptor.ts
+var RenderInterceptor = class {
+  sendMessage;
+  getSessionId;
+  config = null;
+  isSetup = false;
+  profiles = /* @__PURE__ */ new Map();
+  fiberToComponentId = /* @__PURE__ */ new WeakMap();
+  componentIdCounter = 0;
+  snapshotTimer = null;
+  currentCommitComponents = /* @__PURE__ */ new Set();
+  componentsInCurrentCommit = 0;
+  originalHook = null;
+  originalOnCommitFiberRoot = null;
+  originalOnCommitFiberUnmount = null;
+  pendingUnmounts = [];
+  constructor(sendMessage, getSessionId) {
+    this.sendMessage = sendMessage;
+    this.getSessionId = getSessionId;
+  }
+  setup(config) {
+    if (this.isSetup) {
+      console.warn("[Limelight] Render interceptor already set up");
+      return;
+    }
+    this.config = config;
+    if (!this.installHook()) {
+      console.warn("[Limelight] Failed to install render hook");
+      return;
+    }
+    this.snapshotTimer = setInterval(() => {
+      this.emitSnapshot();
+    }, RENDER_THRESHOLDS.SNAPSHOT_INTERVAL_MS);
+    this.isSetup = true;
+  }
+  installHook() {
+    const globalObj = typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : null;
+    if (!globalObj) return false;
+    const hookKey = "__REACT_DEVTOOLS_GLOBAL_HOOK__";
+    const existingHook = globalObj[hookKey];
+    if (existingHook) {
+      this.wrapExistingHook(existingHook);
+    } else {
+      this.createHook(globalObj, hookKey);
+    }
+    return true;
+  }
+  wrapExistingHook(hook) {
+    this.originalHook = hook;
+    this.originalOnCommitFiberRoot = hook.onCommitFiberRoot?.bind(hook);
+    this.originalOnCommitFiberUnmount = hook.onCommitFiberUnmount?.bind(hook);
+    hook.onCommitFiberRoot = (rendererID, root, priorityLevel) => {
+      this.originalOnCommitFiberRoot?.(rendererID, root, priorityLevel);
+      this.handleCommitFiberRoot(rendererID, root);
+    };
+    hook.onCommitFiberUnmount = (rendererID, fiber) => {
+      this.originalOnCommitFiberUnmount?.(rendererID, fiber);
+      this.handleCommitFiberUnmount(rendererID, fiber);
+    };
+  }
+  createHook(globalObj, hookKey) {
+    const renderers = /* @__PURE__ */ new Map();
+    let rendererIdCounter = 0;
+    const hook = {
+      supportsFiber: true,
+      inject: (renderer) => {
+        const id = ++rendererIdCounter;
+        renderers.set(id, renderer);
+        return id;
+      },
+      onCommitFiberRoot: (rendererID, root, priorityLevel) => {
+        this.handleCommitFiberRoot(rendererID, root);
+      },
+      onCommitFiberUnmount: (rendererID, fiber) => {
+        this.handleCommitFiberUnmount(rendererID, fiber);
+      }
+    };
+    globalObj[hookKey] = hook;
+  }
+  /**
+   * Handles a fiber root commit - walks tree and ACCUMULATES into profiles.
+   * Two-pass: first count components, then accumulate with distributed cost.
+   */
+  handleCommitFiberRoot(_rendererID, root) {
+    this.currentCommitComponents.clear();
+    this.componentsInCurrentCommit = 0;
+    try {
+      this.countRenderedComponents(root.current);
+      this.walkFiberTree(root.current, null, 0);
+    } catch (error) {
+      if (isDevelopment()) {
+        console.warn("[Limelight] Error processing fiber tree:", error);
+      }
+    }
+  }
+  /**
+   * First pass: count rendered components for cost distribution.
+   */
+  countRenderedComponents(fiber) {
+    if (!fiber) return;
+    if (this.isUserComponent(fiber) && this.didFiberRender(fiber)) {
+      this.componentsInCurrentCommit++;
+    }
+    this.countRenderedComponents(fiber.child);
+    this.countRenderedComponents(fiber.sibling);
+  }
+  handleCommitFiberUnmount(_rendererID, fiber) {
+    if (!this.isUserComponent(fiber)) return;
+    const componentId = this.fiberToComponentId.get(fiber);
+    if (!componentId) return;
+    const profile = this.profiles.get(componentId);
+    if (profile) {
+      profile.unmountedAt = Date.now();
+      this.pendingUnmounts.push(profile);
+      this.profiles.delete(componentId);
+    }
+  }
+  /**
+   * Walks fiber tree and accumulates render stats into profiles.
+   */
+  walkFiberTree(fiber, parentComponentId, depth) {
+    if (!fiber) return;
+    if (this.isUserComponent(fiber) && this.didFiberRender(fiber)) {
+      const componentId = this.getOrCreateComponentId(fiber);
+      this.accumulateRender(fiber, componentId, parentComponentId, depth);
+      this.currentCommitComponents.add(componentId);
+      parentComponentId = componentId;
+    }
+    this.walkFiberTree(fiber.child, parentComponentId, depth + 1);
+    this.walkFiberTree(fiber.sibling, parentComponentId, depth);
+  }
+  /**
+   * Core accumulation logic - this is where we build up the profile.
+   */
+  accumulateRender(fiber, componentId, parentComponentId, depth) {
+    const now = Date.now();
+    const cause = this.inferRenderCause(fiber, parentComponentId);
+    const renderCost = this.componentsInCurrentCommit > 0 ? 1 / this.componentsInCurrentCommit : 1;
+    let profile = this.profiles.get(componentId);
+    if (!profile) {
+      profile = {
+        id: generateRenderId(),
+        componentId,
+        componentName: this.getComponentName(fiber),
+        componentType: this.getComponentType(fiber),
+        mountedAt: now,
+        totalRenders: 0,
+        totalRenderCost: 0,
+        velocityWindowStart: now,
+        velocityWindowCount: 0,
+        causeBreakdown: createEmptyCauseBreakdown(),
+        causeDeltaBreakdown: createEmptyCauseBreakdown(),
+        lastEmittedRenderCount: 0,
+        lastEmittedRenderCost: 0,
+        lastEmitTime: now,
+        parentCounts: /* @__PURE__ */ new Map(),
+        depth,
+        isSuspicious: false,
+        // NEW
+        propChangeStats: createEmptyPropChangeStats(),
+        propChangeDelta: []
+      };
+      this.profiles.set(componentId, profile);
+    }
+    profile.totalRenders++;
+    profile.totalRenderCost += renderCost;
+    profile.causeBreakdown[cause.type]++;
+    profile.causeDeltaBreakdown[cause.type]++;
+    if (cause.type === "props_change" /* PROPS_CHANGE */ && cause.propChanges) {
+      this.accumulatePropChanges(profile, cause.propChanges);
+    }
+    const transactionId = getCurrentTransactionId();
+    if (transactionId) {
+      profile.lastTransactionId = transactionId;
+    }
+    if (parentComponentId) {
+      const count = (profile.parentCounts.get(parentComponentId) ?? 0) + 1;
+      profile.parentCounts.set(parentComponentId, count);
+      if (!profile.primaryParentId || count > (profile.parentCounts.get(profile.primaryParentId) ?? 0)) {
+        profile.primaryParentId = parentComponentId;
+      }
+    }
+    profile.depth = depth;
+    const windowStart = now - RENDER_THRESHOLDS.VELOCITY_WINDOW_MS;
+    if (profile.velocityWindowStart < windowStart) {
+      profile.velocityWindowStart = now;
+      profile.velocityWindowCount = 1;
+    } else {
+      profile.velocityWindowCount++;
+    }
+    this.updateSuspiciousFlag(profile);
+  }
+  /**
+   * NEW: Accumulate prop change details into the profile.
+   */
+  accumulatePropChanges(profile, changes) {
+    const stats = profile.propChangeStats;
+    for (const change of changes) {
+      if (stats.changeCount.size >= RENDER_THRESHOLDS.MAX_PROP_KEYS_TO_TRACK && !stats.changeCount.has(change.key)) {
+        continue;
+      }
+      stats.changeCount.set(
+        change.key,
+        (stats.changeCount.get(change.key) ?? 0) + 1
+      );
+      if (change.referenceOnly) {
+        stats.referenceOnlyCount.set(
+          change.key,
+          (stats.referenceOnlyCount.get(change.key) ?? 0) + 1
+        );
+      }
+    }
+    if (profile.propChangeDelta.length < RENDER_THRESHOLDS.MAX_PROP_CHANGES_PER_SNAPSHOT) {
+      profile.propChangeDelta.push(
+        ...changes.slice(
+          0,
+          RENDER_THRESHOLDS.MAX_PROP_CHANGES_PER_SNAPSHOT - profile.propChangeDelta.length
+        )
+      );
+    }
+  }
+  /**
+   *  Build prop change snapshot for emission.
+   */
+  buildPropChangeSnapshot(profile) {
+    const stats = profile.propChangeStats;
+    if (stats.changeCount.size === 0) {
+      return void 0;
+    }
+    const sorted = Array.from(stats.changeCount.entries()).sort((a, b) => b[1] - a[1]).slice(0, RENDER_THRESHOLDS.TOP_PROPS_TO_REPORT);
+    const topChangedProps = sorted.map(([key, count]) => {
+      const refOnlyCount = stats.referenceOnlyCount.get(key) ?? 0;
+      return {
+        key,
+        count,
+        referenceOnlyPercent: count > 0 ? Math.round(refOnlyCount / count * 100) : 0
+      };
+    });
+    return { topChangedProps };
+  }
+  updateSuspiciousFlag(profile) {
+    const velocity = this.calculateVelocity(profile);
+    if (velocity > RENDER_THRESHOLDS.HOT_VELOCITY) {
+      profile.isSuspicious = true;
+      profile.suspiciousReason = `High render velocity: ${velocity.toFixed(
+        1
+      )}/sec`;
+    } else if (profile.totalRenders > RENDER_THRESHOLDS.HIGH_RENDER_COUNT) {
+      profile.isSuspicious = true;
+      profile.suspiciousReason = `High total renders: ${profile.totalRenders}`;
+    } else {
+      profile.isSuspicious = false;
+      profile.suspiciousReason = void 0;
+    }
+  }
+  /**
+   * Calculates renders per second from velocity window.
+   * Cheap: just count / window duration, no array operations.
+   */
+  calculateVelocity(profile) {
+    const now = Date.now();
+    const windowAge = now - profile.velocityWindowStart;
+    if (windowAge > RENDER_THRESHOLDS.VELOCITY_WINDOW_MS) {
+      return 0;
+    }
+    const effectiveWindowMs = Math.max(windowAge, 100);
+    return profile.velocityWindowCount / effectiveWindowMs * 1e3;
+  }
+  /**
+   * Emits a snapshot of all profiles with deltas.
+   */
+  emitSnapshot() {
+    const now = Date.now();
+    const snapshots = [];
+    for (const profile of this.profiles.values()) {
+      const rendersDelta = profile.totalRenders - profile.lastEmittedRenderCount;
+      if (rendersDelta < RENDER_THRESHOLDS.MIN_DELTA_TO_EMIT && !profile.isSuspicious) {
+        continue;
+      }
+      const velocity = this.calculateVelocity(profile);
+      const isMount = profile.lastEmittedRenderCount === 0;
+      const renderCostDelta = profile.totalRenderCost - profile.lastEmittedRenderCost;
+      const propChanges = this.buildPropChangeSnapshot(profile);
+      snapshots.push({
+        id: profile.id,
+        componentId: profile.componentId,
+        componentName: profile.componentName,
+        componentType: profile.componentType,
+        totalRenders: profile.totalRenders,
+        totalRenderCost: profile.totalRenderCost,
+        avgRenderCost: profile.totalRenderCost / profile.totalRenders,
+        rendersDelta,
+        renderCostDelta,
+        renderVelocity: velocity,
+        causeBreakdown: { ...profile.causeBreakdown },
+        causeDeltaBreakdown: { ...profile.causeDeltaBreakdown },
+        parentComponentId: profile.primaryParentId,
+        depth: profile.depth,
+        lastTransactionId: profile.lastTransactionId,
+        isSuspicious: profile.isSuspicious,
+        suspiciousReason: profile.suspiciousReason,
+        renderPhase: isMount ? "mount" /* MOUNT */ : "update" /* UPDATE */,
+        mountedAt: profile.mountedAt,
+        propChanges
+      });
+      profile.lastEmittedRenderCount = profile.totalRenders;
+      profile.lastEmittedRenderCost = profile.totalRenderCost;
+      profile.lastEmitTime = now;
+      profile.causeDeltaBreakdown = createEmptyCauseBreakdown();
+      profile.propChangeDelta = [];
+    }
+    for (const profile of this.pendingUnmounts) {
+      const propChanges = this.buildPropChangeSnapshot(profile);
+      snapshots.push({
+        id: profile.id,
+        componentId: profile.componentId,
+        componentName: profile.componentName,
+        componentType: profile.componentType,
+        totalRenders: profile.totalRenders,
+        totalRenderCost: profile.totalRenderCost,
+        avgRenderCost: profile.totalRenderCost / Math.max(profile.totalRenders, 1),
+        rendersDelta: 0,
+        renderCostDelta: 0,
+        renderVelocity: 0,
+        causeBreakdown: { ...profile.causeBreakdown },
+        causeDeltaBreakdown: createEmptyCauseBreakdown(),
+        parentComponentId: profile.primaryParentId,
+        depth: profile.depth,
+        lastTransactionId: profile.lastTransactionId,
+        isSuspicious: profile.isSuspicious,
+        suspiciousReason: profile.suspiciousReason,
+        renderPhase: "unmount" /* UNMOUNT */,
+        mountedAt: profile.mountedAt,
+        unmountedAt: profile.unmountedAt,
+        propChanges
+      });
+    }
+    this.pendingUnmounts = [];
+    if (snapshots.length === 0) return;
+    let message = {
+      phase: "RENDER_SNAPSHOT",
+      sessionId: this.getSessionId(),
+      timestamp: now,
+      profiles: snapshots
+    };
+    if (this.config?.beforeSend) {
+      const modified = this.config.beforeSend(message);
+      if (!modified) return;
+      message = modified;
+    }
+    this.sendMessage(message);
+  }
+  /**
+   *  Now returns prop change details when applicable.
+   */
+  inferRenderCause(fiber, parentComponentId) {
+    const alternate = fiber.alternate;
+    if (!alternate) {
+      return {
+        type: "unknown" /* UNKNOWN */,
+        confidence: "high" /* HIGH */
+      };
+    }
+    if (parentComponentId && this.currentCommitComponents.has(parentComponentId)) {
+      const prevProps = alternate.memoizedProps;
+      const nextProps = fiber.memoizedProps;
+      const propsChanged = prevProps !== nextProps;
+      if (propsChanged) {
+        const propChanges = this.diffProps(prevProps, nextProps);
+        return {
+          type: "props_change" /* PROPS_CHANGE */,
+          confidence: "medium" /* MEDIUM */,
+          triggerId: parentComponentId,
+          propChanges
+        };
+      }
+      return {
+        type: "parent_render" /* PARENT_RENDER */,
+        confidence: "medium" /* MEDIUM */,
+        triggerId: parentComponentId
+      };
+    }
+    if (fiber.memoizedState !== alternate.memoizedState) {
+      return {
+        type: "state_change" /* STATE_CHANGE */,
+        confidence: "medium" /* MEDIUM */
+      };
+    }
+    if (fiber.memoizedProps !== alternate.memoizedProps) {
+      return {
+        type: "context_change" /* CONTEXT_CHANGE */,
+        confidence: "low" /* LOW */
+      };
+    }
+    return {
+      type: "unknown" /* UNKNOWN */,
+      confidence: "unknown" /* UNKNOWN */
+    };
+  }
+  /**
+   * Diff props to find which keys changed and whether it's reference-only.
+   * This is the key insight generator.
+   */
+  diffProps(prevProps, nextProps) {
+    if (!prevProps || !nextProps) {
+      return [];
+    }
+    const changes = [];
+    const allKeys = /* @__PURE__ */ new Set([
+      ...Object.keys(prevProps),
+      ...Object.keys(nextProps)
+    ]);
+    const skipKeys = /* @__PURE__ */ new Set(["children", "key", "ref"]);
+    for (const key of allKeys) {
+      if (skipKeys.has(key)) continue;
+      const prevValue = prevProps[key];
+      const nextValue = nextProps[key];
+      if (prevValue === nextValue) {
+        continue;
+      }
+      const referenceOnly = this.isShallowEqual(prevValue, nextValue);
+      changes.push({ key, referenceOnly });
+      if (changes.length >= 10) {
+        break;
+      }
+    }
+    return changes;
+  }
+  /**
+   *  Shallow equality check to determine if a prop is reference-only change.
+   * We only go one level deep to keep it fast.
+   */
+  isShallowEqual(a, b) {
+    if (a === b) return true;
+    if (typeof a !== typeof b) return false;
+    if (a === null || b === null) return false;
+    if (typeof a === "function" && typeof b === "function") {
+      return true;
+    }
+    if (Array.isArray(a) && Array.isArray(b)) {
+      if (a.length !== b.length) return false;
+      for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) return false;
+      }
+      return true;
+    }
+    if (typeof a === "object" && typeof b === "object") {
+      const keysA = Object.keys(a);
+      const keysB = Object.keys(b);
+      if (keysA.length !== keysB.length) return false;
+      for (const key of keysA) {
+        if (a[key] !== b[key]) return false;
+      }
+      return true;
+    }
+    return a === b;
+  }
+  isUserComponent(fiber) {
+    const tag = fiber.tag;
+    return tag === 0 /* FunctionComponent */ || tag === 1 /* ClassComponent */ || tag === 11 /* ForwardRef */ || tag === 14 /* MemoComponent */ || tag === 15 /* SimpleMemoComponent */;
+  }
+  didFiberRender(fiber) {
+    return (fiber.flags & 1 /* PerformedWork */) !== 0;
+  }
+  getOrCreateComponentId(fiber) {
+    let id = this.fiberToComponentId.get(fiber);
+    if (id) return id;
+    if (fiber.alternate) {
+      id = this.fiberToComponentId.get(fiber.alternate);
+      if (id) {
+        this.fiberToComponentId.set(fiber, id);
+        return id;
+      }
+    }
+    id = `c_${++this.componentIdCounter}`;
+    this.fiberToComponentId.set(fiber, id);
+    return id;
+  }
+  getComponentName(fiber) {
+    const type = fiber.type;
+    if (!type) return "Unknown";
+    if (typeof type === "function") {
+      return type.displayName || type.name || "Anonymous";
+    }
+    if (typeof type === "object" && type !== null) {
+      if (type.displayName) return type.displayName;
+      if (type.render)
+        return type.render.displayName || type.render.name || "ForwardRef";
+      if (type.type) {
+        const inner = type.type;
+        return inner.displayName || inner.name || "Memo";
+      }
+    }
+    return "Unknown";
+  }
+  getComponentType(fiber) {
+    switch (fiber.tag) {
+      case 0 /* FunctionComponent */:
+        return "function";
+      case 1 /* ClassComponent */:
+        return "class";
+      case 11 /* ForwardRef */:
+        return "forwardRef";
+      case 14 /* MemoComponent */:
+      case 15 /* SimpleMemoComponent */:
+        return "memo";
+      default:
+        return "unknown";
+    }
+  }
+  /**
+   * Force emit current state (useful for debugging or on-demand refresh).
+   */
+  forceEmit() {
+    this.emitSnapshot();
+  }
+  /**
+   * Get current profile for a component (useful for debugging).
+   */
+  getProfile(componentId) {
+    return this.profiles.get(componentId);
+  }
+  /**
+   * Get all suspicious components.
+   */
+  getSuspiciousComponents() {
+    return Array.from(this.profiles.values()).filter((p) => p.isSuspicious);
+  }
+  cleanup() {
+    if (!this.isSetup) return;
+    this.emitSnapshot();
+    if (this.snapshotTimer) {
+      clearInterval(this.snapshotTimer);
+      this.snapshotTimer = null;
+    }
+    if (this.originalHook) {
+      if (this.originalOnCommitFiberRoot) {
+        this.originalHook.onCommitFiberRoot = this.originalOnCommitFiberRoot;
+      }
+      if (this.originalOnCommitFiberUnmount) {
+        this.originalHook.onCommitFiberUnmount = this.originalOnCommitFiberUnmount;
+      }
+    }
+    this.originalHook = null;
+    this.originalOnCommitFiberRoot = null;
+    this.originalOnCommitFiberUnmount = null;
+    this.profiles.clear();
+    this.pendingUnmounts = [];
+    this.currentCommitComponents.clear();
+    this.componentIdCounter = 0;
+    this.config = null;
+    this.isSetup = false;
+  }
+};
+
 // src/limelight/LimelightClient.ts
 var LimelightClient = class {
   ws = null;
@@ -967,6 +1571,7 @@ var LimelightClient = class {
   networkInterceptor;
   xhrInterceptor;
   consoleInterceptor;
+  renderInterceptor;
   constructor() {
     this.networkInterceptor = new NetworkInterceptor(
       this.sendMessage.bind(this),
@@ -980,10 +1585,14 @@ var LimelightClient = class {
       this.sendMessage.bind(this),
       () => this.sessionId
     );
+    this.renderInterceptor = new RenderInterceptor(
+      this.sendMessage.bind(this),
+      () => this.sessionId
+    );
   }
   /**
    * Configures the Limelight client with the provided settings.
-   * Sets up network, XHR, and console interceptors based on the configuration.
+   * Sets up network, XHR, console, and render interceptors based on the configuration.
    * @internal
    * @private
    * @param {LimelightConfig} config - Configuration object for Limelight
@@ -998,6 +1607,7 @@ var LimelightClient = class {
       enableNetworkInspector: true,
       enableConsole: true,
       enableGraphQL: true,
+      enableRenderInspector: true,
       ...config
     };
     if (!this.config.enabled) {
@@ -1012,6 +1622,9 @@ var LimelightClient = class {
       if (this.config.enableConsole) {
         this.consoleInterceptor.setup(this.config);
       }
+      if (this.config.enableRenderInspector) {
+        this.renderInterceptor.setup(this.config);
+      }
     } catch (error) {
       console.error("[Limelight] Failed to setup interceptors:", error);
     }
@@ -1197,6 +1810,7 @@ var LimelightClient = class {
     this.networkInterceptor.cleanup();
     this.xhrInterceptor.cleanup();
     this.consoleInterceptor.cleanup();
+    this.renderInterceptor.cleanup();
     this.reconnectAttempts = 0;
     this.messageQueue = [];
   }