bippy 0.7.2-dev.eecabd1 → 0.7.3-dev.1d4f35b

package/src/source/inspect-hooks.ts

@@ -1,8 +1,11 @@
+import { getRenderer } from "../core.js";
+import type { ReactDevToolsTarget } from "../rdt-hook.js";
 import type {
   Fiber,
   ContextDependency,
   MemoizedState,
   ReactContext,
+  ReactDebugInfo,
   RendererDispatcherRef,
 } from "../react-internals/index.js";
 import {
@@ -20,6 +23,7 @@ import {
 
 const REACT_CONTEXT_TYPE = Symbol.for("react.context");
 const REACT_MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel");
+const REACT_RECOVERABLE_TYPE = Symbol.for("react.recoverable");
 
 export interface HookSource {
   lineNumber: number | null;
@@ -34,6 +38,7 @@ export interface HooksNode {
   name: string;
   value: unknown;
   subHooks: HooksNode[];
+  debugInfo: ReactDebugInfo[] | null;
   hookSource: HookSource | null;
 }
 
@@ -44,6 +49,7 @@ interface HookLogEntry {
   primitive: string;
   stackError: Error;
   value: unknown;
+  debugInfo: ReactDebugInfo[] | null;
   dispatcherHookName: string;
 }
 
@@ -61,6 +67,7 @@ interface InspectableThenable {
   status?: unknown;
   then: (...arguments_: unknown[]) => unknown;
   value?: unknown;
+  _debugInfo?: ReactDebugInfo[];
 }
 
 interface ForwardRefRenderType {
@@ -68,6 +75,7 @@ interface ForwardRefRenderType {
 }
 
 interface InspectedActionState {
+  debugInfo: ReactDebugInfo[] | null;
   error: unknown;
   value: unknown;
 }
@@ -132,12 +140,14 @@ const pushHookLogEntry = (
   value: unknown,
   dispatcherHookName: string,
   displayName: string | null = null,
+  debugInfo: ReactDebugInfo[] | null = null,
 ): void => {
   hookLog.push({
     displayName,
     primitive,
     stackError: new Error(),
     value,
+    debugInfo,
     dispatcherHookName,
   });
 };
@@ -153,22 +163,26 @@ const dispatcherUse = (usable: unknown): unknown => {
 
       switch (thenable.status) {
         case "fulfilled": {
-          pushHookLogEntry("Promise", thenable.value, "Use");
+          pushHookLogEntry("Promise", thenable.value, "Use", null, thenable._debugInfo ?? null);
           return thenable.value;
         }
         case "rejected":
           throw thenable.reason;
       }
-      pushHookLogEntry("Unresolved", thenable, "Use");
+      pushHookLogEntry("Unresolved", thenable, "Use", null, thenable._debugInfo ?? null);
       throw SuspenseException;
     }
+    if ("$$typeof" in usable && usable.$$typeof === REACT_RECOVERABLE_TYPE) {
+      pushHookLogEntry("Recoverable", undefined, "Use");
+      return undefined;
+    }
     if ("$$typeof" in usable && usable.$$typeof === REACT_CONTEXT_TYPE && isReactContext(usable)) {
       const context: InspectableReactContext = {
         _currentValue: usable._currentValue,
         displayName: typeof usable.displayName === "string" ? usable.displayName : undefined,
       };
       const value = readContext(context);
-      pushHookLogEntry("Context (use)", value, "Use", context.displayName ?? "Context");
+      pushHookLogEntry("Context (use)", value, "Use", context.displayName || "Context");
       return value;
     }
   }
@@ -177,7 +191,7 @@ const dispatcherUse = (usable: unknown): unknown => {
 
 const dispatcherUseContext = (context: InspectableReactContext): unknown => {
   const value = readContext(context);
-  pushHookLogEntry("Context", value, "Context", context.displayName ?? null);
+  pushHookLogEntry("Context", value, "Context", context.displayName || null);
   return value;
 };
 
@@ -304,7 +318,7 @@ const dispatcherUseId = (): string => {
 
 const dispatcherUseMemoCache = (size: number): unknown[] => {
   const fiber = currentFiber;
-  if (fiber === null || fiber === undefined) return [];
+  if (fiber === null) return [];
 
   const memoCache = fiber.updateQueue?.memoCache;
   if (memoCache === null || memoCache === undefined) return [];
@@ -333,6 +347,7 @@ const inspectActionStateHook = (
   initialState: unknown,
 ): InspectedActionState => {
   let value: unknown;
+  let debugInfo: ReactDebugInfo[] | null = null;
   let error: unknown = null;
   if (hook !== null) {
     const actionResult = hook.memoizedState;
@@ -340,6 +355,7 @@ const inspectActionStateHook = (
       switch (actionResult.status) {
         case "fulfilled":
           value = actionResult.value;
+          debugInfo = actionResult._debugInfo ?? null;
           break;
         case "rejected":
           error = actionResult.reason;
@@ -347,6 +363,7 @@ const inspectActionStateHook = (
         default:
           error = SuspenseException;
           value = actionResult;
+          debugInfo = actionResult._debugInfo ?? null;
       }
     } else {
       value = actionResult;
@@ -354,7 +371,7 @@ const inspectActionStateHook = (
   } else {
     value = initialState;
   }
-  return { value, error };
+  return { value, debugInfo, error };
 };
 
 const createActionStateDispatcher =
@@ -363,8 +380,8 @@ const createActionStateDispatcher =
     const hook = nextHook();
     nextHook();
     nextHook();
-    const { value, error } = inspectActionStateHook(hook, initialState);
-    pushHookLogEntry(primitive, value, primitive);
+    const { value, debugInfo, error } = inspectActionStateHook(hook, initialState);
+    pushHookLogEntry(primitive, value, primitive, null, debugInfo);
     if (error !== null) throw error;
     return [value, () => {}, false];
   };
@@ -449,6 +466,7 @@ const getPrimitiveStackCache = (): Map<string, StackFrame[]> => {
     dispatcher.useActionState((state: unknown) => state, null);
     dispatcher.useHostTransitionStatus();
     dispatcher.use({ $$typeof: REACT_CONTEXT_TYPE, _currentValue: null });
+    dispatcher.use({ $$typeof: REACT_RECOVERABLE_TYPE });
     const fulfilledPromise = Promise.resolve(null);
     Reflect.set(fulfilledPromise, "status", "fulfilled");
     Reflect.set(fulfilledPromise, "value", null);
@@ -532,6 +550,19 @@ const parseHookName = (functionName: string | undefined): string => {
   return functionName.slice(startIndex);
 };
 
+// Unlike upstream, bippy routes every dispatcher method through a shared log helper, so those
+// frames appear in captured stacks and must not become tree levels. Names are read off the
+// live functions rather than matched by prefix, so user hooks cannot collide and minified
+// builds stay accurate.
+const INTERNAL_HOOK_FRAME_NAMES = new Set(
+  [pushHookLogEntry, ...Object.values(dispatcher)].map((internalFunction) =>
+    parseHookName(internalFunction.name),
+  ),
+);
+
+const isInternalHookFrame = (hookName: string): boolean =>
+  hookName !== "" && INTERNAL_HOOK_FRAME_NAMES.has(hookName);
+
 const isReactWrapper = (functionName: string | undefined, wrapperName: string): boolean => {
   const hookName = parseHookName(functionName);
   if (wrapperName === "HostTransitionStatus") {
@@ -602,8 +633,10 @@ const buildTree = (rootStack: StackFrame[], capturedHookLog: HookLogEntry[]): Ho
     const [primitiveFrame, stack] = parseTrimmedStack(rootStack, hook);
     let displayName = hook.displayName;
     if (displayName === null && primitiveFrame !== null) {
-      displayName =
-        parseHookName(primitiveFrame.functionName) || parseHookName(hook.dispatcherHookName);
+      const primitiveName = parseHookName(primitiveFrame.functionName);
+      displayName = isInternalHookFrame(primitiveName)
+        ? null
+        : primitiveName || parseHookName(hook.dispatcherHookName);
     }
 
     if (stack !== null) {
@@ -628,6 +661,7 @@ const buildTree = (rootStack: StackFrame[], capturedHookLog: HookLogEntry[]): Ho
           name: parseHookName(stack[stackIndex - 1].functionName),
           value: undefined,
           subHooks: children,
+          debugInfo: null,
           hookSource: {
             lineNumber: stackFrame.lineNumber ?? null,
             columnNumber: stackFrame.columnNumber ?? null,
@@ -655,21 +689,52 @@ const buildTree = (rootStack: StackFrame[], capturedHookLog: HookLogEntry[]): Ho
       fileName: firstStackFrame?.fileName ?? null,
     };
 
-    levelChildren.push({ id, isStateEditable, name, value: hook.value, subHooks: [], hookSource });
+    levelChildren.push({
+      id,
+      isStateEditable,
+      name,
+      value: hook.value,
+      subHooks: [],
+      debugInfo: hook.debugInfo,
+      hookSource,
+    });
   }
 
   processDebugValues(rootChildren, null);
+  removeInternalHookFrames(rootChildren, null);
   return rootChildren;
 };
 
+const removeInternalHookFrames = (
+  hooksTree: HooksTree,
+  parentHooksNode: HooksNode | null,
+): void => {
+  for (let nodeIndex = 0; nodeIndex < hooksTree.length; nodeIndex++) {
+    const hooksNode = hooksTree[nodeIndex];
+    if (isInternalHookFrame(hooksNode.name)) {
+      if (parentHooksNode !== null && hooksNode.value !== undefined) {
+        if (parentHooksNode.value === undefined) parentHooksNode.value = hooksNode.value;
+        else if (Array.isArray(parentHooksNode.value)) {
+          parentHooksNode.value = [...parentHooksNode.value, hooksNode.value];
+        } else parentHooksNode.value = [parentHooksNode.value, hooksNode.value];
+      }
+      hooksTree.splice(nodeIndex, 1, ...hooksNode.subHooks);
+      nodeIndex--;
+    } else {
+      removeInternalHookFrames(hooksNode.subHooks, hooksNode);
+    }
+  }
+};
+
 const processDebugValues = (hooksTree: HooksTree, parentHooksNode: HooksNode | null): void => {
   const debugValueNodes: HooksNode[] = [];
   for (let nodeIndex = 0; nodeIndex < hooksTree.length; nodeIndex++) {
     const hooksNode = hooksTree[nodeIndex];
-    if (hooksNode.name === "DebugValue" && hooksNode.subHooks.length === 0) {
-      hooksTree.splice(nodeIndex, 1);
+    if (hooksNode.name === "DebugValue") {
+      hooksTree.splice(nodeIndex, 1, ...hooksNode.subHooks);
       nodeIndex--;
-      debugValueNodes.push(hooksNode);
+      // Internal frames surface as valueless DebugValue levels; only real labels bubble up.
+      if (hooksNode.value !== undefined) debugValueNodes.push(hooksNode);
     } else {
       processDebugValues(hooksNode.subHooks, hooksNode);
     }
@@ -723,8 +788,8 @@ const resolveDefaultProps = (
   baseProps: Record<string, unknown>,
 ): Record<string, unknown> => {
   if (
-    component &&
-    typeof component === "object" &&
+    component !== null &&
+    (typeof component === "object" || typeof component === "function") &&
     "defaultProps" in component &&
     typeof component.defaultProps === "object" &&
     component.defaultProps !== null
@@ -760,9 +825,12 @@ const restoreConsole = (originalMethods: Record<string, unknown>): void => {
   }
 };
 
-const performDispatcherInspection = (
+// The render call must happen in the same frame that captures the ancestor stack,
+// otherwise an extra frame lands in every hook's trimmed stack and becomes a bogus tree level.
+const performDispatcherInspection = <TArgs extends unknown[]>(
   dispatcherRef: RendererDispatcherRef,
-  renderFn: () => void,
+  renderFunction: (...args: TArgs) => unknown,
+  ...renderArgs: TArgs
 ): HooksTree => {
   const previousDispatcher = readDispatcher(dispatcherRef);
   writeDispatcher(dispatcherRef, dispatcherProxy);
@@ -772,7 +840,7 @@ const performDispatcherInspection = (
 
   try {
     ancestorStackError = new Error();
-    renderFn();
+    renderFunction(...renderArgs);
   } catch (renderError) {
     handleRenderFunctionError(renderError);
   } finally {
@@ -785,8 +853,12 @@ const performDispatcherInspection = (
   return buildTree(rootStack, capturedHookLog);
 };
 
-const requireDispatcherRef = (): RendererDispatcherRef => {
-  const dispatcherRef = getRendererDispatcherRefs()[0];
+const requireDispatcherRef = (
+  fiber?: Fiber,
+  target: ReactDevToolsTarget = globalThis,
+): RendererDispatcherRef => {
+  const rendererDispatcherRef = fiber ? getRenderer(fiber, target)?.currentDispatcherRef : null;
+  const dispatcherRef = rendererDispatcherRef ?? getRendererDispatcherRefs(target)[0];
   if (!dispatcherRef) {
     throw new BippyHookInspectionError(
       "Bippy couldn’t find a React renderer. Load React and install Bippy’s hook.",
@@ -823,8 +895,73 @@ const resolveContextDependency = (fiber: Fiber): void => {
   }
 };
 
+const normalizeStandaloneHooks = (hooksTree: HooksTree): HooksTree => {
+  const normalizeNode = (hooksNode: HooksNode): HooksNode => {
+    const subHooks = hooksNode.subHooks.map(normalizeNode);
+    if (subHooks.length === 1) {
+      const childHook = subHooks[0];
+      if (hooksNode.name === "Context" && childHook.id === null) {
+        return { ...childHook, hookSource: hooksNode.hookSource };
+      }
+      if (hooksNode.name === "FormStatus" && childHook.name === "HostTransitionStatus") {
+        return { ...hooksNode, subHooks: [], value: childHook.value };
+      }
+      if (hooksNode.name === "Use") {
+        if (childHook.name === "Context") {
+          return { ...childHook, hookSource: hooksNode.hookSource };
+        }
+        if (childHook.name === "Promise" || childHook.name === "Unresolved") {
+          return {
+            ...hooksNode,
+            debugInfo: childHook.debugInfo,
+            subHooks: [],
+            value: childHook.value,
+          };
+        }
+      }
+      if (
+        hooksNode.id === null &&
+        hooksNode.value === undefined &&
+        (hooksNode.name === childHook.name || hooksNode.name === "<anonymous>")
+      ) {
+        return { ...childHook, hookSource: hooksNode.hookSource };
+      }
+    }
+    return { ...hooksNode, subHooks };
+  };
+
+  return hooksTree.map(normalizeNode);
+};
+
+export const inspectHooks = (
+  renderFunction: (props: Record<string, unknown>) => unknown,
+  props: Record<string, unknown>,
+  target: ReactDevToolsTarget = globalThis,
+): HooksTree => {
+  const dispatcherRef = requireDispatcherRef(undefined, target);
+  getPrimitiveStackCache();
+  currentHook = null;
+  currentFiber = null;
+  currentContextDependency = null;
+  currentThenableState = null;
+  currentThenableIndex = 0;
+  const originalConsoleMethods = suppressConsole();
+  try {
+    return normalizeStandaloneHooks(
+      performDispatcherInspection(dispatcherRef, renderFunction, props),
+    );
+  } finally {
+    currentHook = null;
+    currentFiber = null;
+    currentContextDependency = null;
+    currentThenableState = null;
+    currentThenableIndex = 0;
+    restoreConsole(originalConsoleMethods);
+  }
+};
+
 export const getFiberHooks = (fiber: Fiber): HooksTree => {
-  const dispatcherRef = requireDispatcherRef();
+  const dispatcherRef = requireDispatcherRef(fiber);
   const workTags = getReactWorkTagsForFiber(fiber);
 
   if (
@@ -870,9 +1007,15 @@ export const getFiberHooks = (fiber: Fiber): HooksTree => {
       if (!isForwardRefRenderType(type)) {
         throw new BippyHookInspectionError("ForwardRef fiber is missing its render function.");
       }
-      return performDispatcherInspection(dispatcherRef, () => {
-        type.render(props, fiber.ref);
-      });
+      const hooksTree = normalizeStandaloneHooks(
+        performDispatcherInspection(dispatcherRef, type.render, props, fiber.ref),
+      );
+      for (const hooksNode of hooksTree) {
+        if (hooksNode.hookSource?.functionName === "Object.render") {
+          hooksNode.hookSource.functionName = null;
+        }
+      }
+      return hooksTree;
     }
 
     if (typeof type !== "function") {
@@ -880,9 +1023,7 @@ export const getFiberHooks = (fiber: Fiber): HooksTree => {
         "Function component fiber is missing its component function.",
       );
     }
-    return performDispatcherInspection(dispatcherRef, () => {
-      type(props);
-    });
+    return normalizeStandaloneHooks(performDispatcherInspection(dispatcherRef, type, props));
   } finally {
     currentFiber = null;
     currentHook = null;

package/src/source/owner-stack.ts

@@ -7,7 +7,6 @@ import type {
 } from "../react-internals/index.js";
 import {
   REACT_STACK_BOTTOM_FRAME_PATTERNS,
-  SERVER_FRAME_MARKER,
   SERVER_ENV_PATTERN,
   SERVER_COMPONENT_URL_PREFIXES,
 } from "./constants.js";
@@ -19,7 +18,11 @@ import {
   readDispatcher,
   writeDispatcher,
 } from "./renderer-dispatchers.js";
-import { symbolicateStack, type SourceFetch } from "./symbolication.js";
+import {
+  symbolicateStack,
+  type SourceFetch,
+  type SourceMapRequestOptions,
+} from "./symbolication.js";
 
 interface RendererDispatcherSnapshot {
   currentDispatcherRef: RendererDispatcherRef;
@@ -101,12 +104,18 @@ const describeBuiltInComponentFrame = (name: string): string => {
   return `\n    in ${name}`;
 };
 
-export const describeDebugInfoFrame = (name: string, env?: string): string => {
-  let frameDescription = describeBuiltInComponentFrame(name);
-  if (env) {
-    frameDescription += ` (at ${env})`;
+export const describeDebugInfoFrame = (
+  name: string,
+  env?: string,
+  location?: Error | null,
+): string => {
+  if (location) {
+    const childStack = formatOwnerStack(location.stack ?? "");
+    const lastNewlineIndex = childStack.lastIndexOf("\n");
+    const lastLine = lastNewlineIndex === -1 ? childStack : childStack.slice(lastNewlineIndex + 1);
+    if (lastLine.includes(name)) return `\n${lastLine}`;
   }
-  return frameDescription;
+  return describeBuiltInComponentFrame(`${name}${env ? ` [${env}]` : ""}`);
 };
 
 let reEntry = false;
@@ -115,7 +124,7 @@ let reEntry = false;
 // component type like React DevTools does.
 const componentFrameCache = new WeakMap<React.ComponentType<unknown>, string>();
 
-// https://github.com/facebook/react/blob/f739642745577a8e4dcb9753836ac3589b9c590a/packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js#L22
+// https://github.com/facebook/react/blob/eafeac0/packages/shared/ReactComponentStackFrame.js#L64
 const describeNativeComponentFrame = (
   component: React.ComponentType<unknown>,
   construct: boolean,
@@ -153,21 +162,12 @@ const describeNativeComponentFrame = (
                 throw Error();
               },
             });
-            if (typeof Reflect === "object" && Reflect.construct) {
-              try {
-                Reflect.construct(ThrowingConstructor, []);
-              } catch (caughtError) {
-                control = caughtError;
-              }
-              Reflect.construct(component, [], ThrowingConstructor);
-            } else {
-              try {
-                Function.prototype.apply.call(ThrowingConstructor, undefined, []);
-              } catch (caughtError) {
-                control = caughtError;
-              }
-              Function.prototype.apply.call(component, ThrowingConstructor.prototype, []);
+            try {
+              Reflect.construct(ThrowingConstructor, []);
+            } catch (caughtError) {
+              control = caughtError;
             }
+            Reflect.construct(component, [], ThrowingConstructor);
           } else {
             try {
               throw Error();
@@ -312,7 +312,7 @@ const describeNativeComponentFrame = (
   return syntheticFrame;
 };
 
-// https://github.com/facebook/react/blob/ac3e705a18696168acfcaed39dce0cfaa6be8836/packages/react-reconciler/src/ReactFiberComponentStack.js#L180
+// https://github.com/facebook/react/blob/eafeac0/packages/react-reconciler/src/ReactFiberComponentStack.js#L37
 export const describeFiber = (fiber: Fiber, childFiber: Fiber | null): string => {
   let stackFrame = "";
   const workTags = getReactWorkTagsForFiber(fiber);
@@ -384,7 +384,11 @@ export const getFallbackParentStack = (thisFiber: Fiber): string => {
         for (let debugInfoIndex = debugInfo.length - 1; debugInfoIndex >= 0; debugInfoIndex--) {
           const debugEntry = debugInfo[debugInfoIndex];
           if (typeof debugEntry.name === "string") {
-            componentStack += describeDebugInfoFrame(debugEntry.name, debugEntry.env);
+            componentStack += describeDebugInfoFrame(
+              debugEntry.name,
+              debugEntry.env,
+              debugEntry.debugLocation,
+            );
           }
         }
       }
@@ -511,7 +515,7 @@ const getEnrichedServerStackFrame = (
     lineNumber: resolvedRscFrame.lineNumber,
     columnNumber: resolvedRscFrame.columnNumber,
     source: serverFrame.source?.replace(
-      SERVER_FRAME_MARKER,
+      SERVER_ENV_PATTERN,
       `(${resolvedRscFrame.fileName}:${resolvedRscFrame.lineNumber}:${resolvedRscFrame.columnNumber})`,
     ),
   };
@@ -534,7 +538,7 @@ const markFlightServerFrame = (stackFrame: StackFrame): StackFrame =>
  * carries `.debugStack`). This is exact - no re-invoking components, no
  * name-matching heuristics - but requires React 19.
  */
-const getOwnerStackFromDebugStacks = (fiber: Fiber): StackFrame[] => {
+export const getRawOwnerStack = (fiber: Fiber): StackFrame[] => {
   const ownerStackFrames: StackFrame[] = [];
   let owner: Fiber | ServerComponentInfo | null | undefined = fiber;
   while (owner) {
@@ -625,9 +629,11 @@ export const getRawParentStack = (fiber: Fiber): StackFrame[] => {
  */
 export const getParentStack = async (
   fiber: Fiber,
-  shouldCache = true,
-  fetchFunction?: SourceFetch,
-): Promise<StackFrame[]> => symbolicateStack(getRawParentStack(fiber), shouldCache, fetchFunction);
+  shouldUseCache = true,
+  sourceFetch?: SourceFetch,
+  requestOptions: SourceMapRequestOptions = {},
+): Promise<StackFrame[]> =>
+  symbolicateStack(getRawParentStack(fiber), shouldUseCache, sourceFetch, requestOptions);
 
 // an owner frame is only actionable if it can point an editor somewhere:
 // it needs a file location and must not be ignore-listed bundler/framework code
@@ -646,10 +652,11 @@ const isLocatableFrame = (stackFrame: StackFrame): boolean =>
  */
 export const getOwnerStack = async (
   fiber: Fiber,
-  shouldCache = true,
-  fetchFunction?: SourceFetch,
+  shouldUseCache = true,
+  sourceFetch?: SourceFetch,
+  requestOptions: SourceMapRequestOptions = {},
 ): Promise<StackFrame[]> => {
-  const debugStackFrames = getOwnerStackFromDebugStacks(fiber);
+  const debugStackFrames = getRawOwnerStack(fiber);
   if (debugStackFrames.length > 0) {
     // the owner chain does not include the fiber itself, but bippy's stacks
     // always start with the fiber's own frame
@@ -657,8 +664,9 @@ export const getOwnerStack = async (
     selfFrame.functionName = getDisplayName(fiber.type) ?? selfFrame.functionName;
     const symbolicatedFrames = await symbolicateStack(
       [selfFrame, ...debugStackFrames],
-      shouldCache,
-      fetchFunction,
+      shouldUseCache,
+      sourceFetch,
+      requestOptions,
     );
     const hasLocatableOwnerFrame = symbolicatedFrames.some(
       (stackFrame, frameIndex) => frameIndex > 0 && isLocatableFrame(stackFrame),
@@ -668,5 +676,5 @@ export const getOwnerStack = async (
     }
   }
 
-  return getParentStack(fiber, shouldCache, fetchFunction);
+  return getParentStack(fiber, shouldUseCache, sourceFetch, requestOptions);
 };

package/src/source/parse-debug-stack.ts

@@ -1,6 +1,6 @@
 import { JSX_FACTORY_FRAME_COUNT, REACT_STACK_BOTTOM_FRAME_PATTERNS } from "./constants.js";
 import { getPrepareStackTrace, setPrepareStackTrace } from "./error-stack.js";
-import { parseStack, StackFrame } from "./parse-stack.js";
+import { parseStack, type StackFrame } from "./parse-stack.js";
 
 interface V8CallSite {
   getFunctionName?: () => string | null;

package/src/source/parse-hook-names.ts

@@ -4,6 +4,7 @@ import {
   getSourceFromSourceMap,
   getSourceMap,
   type SourceFetch,
+  type SourceMapRequestOptions,
 } from "./symbolication.js";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
@@ -19,8 +20,10 @@ const UNNAMED_HOOKS = new Set([
 
 // HACK: matches `const/let/var [name, ...] = use...(...` or `const/let/var name = use...(...`
 // across up to 10 lines; handles TypeScript generics like `useState<T>(`
+// The member-access prefix consumes one dotless segment per repetition. Letting a segment
+// span dots too would make the parse ambiguous and backtrack exponentially on long chains.
 const HOOK_DECLARATION_REGEX =
-  /(?:const|let|var)\s+((?:\[[\s\S]*?\]|\w+))\s*=\s*(?:[\w$.]+\.)*use[A-Z]\w*\s*(?:<[\s\S]*?>)?\s*\(/g;
+  /(?:const|let|var)\s+((?:\[[\s\S]*?\]|\w+))\s*=\s*(?:(?:[\w$]+|require\s*\([^)]*\))\.)*use[A-Z]\w*\s*(?:<[\s\S]*?>)?\s*\(/g;
 
 export const getHookSourceLocationKey = (hookSource: HookSource): string =>
   `${hookSource.fileName ?? ""}:${hookSource.lineNumber ?? 0}:${hookSource.columnNumber ?? 0}`;
@@ -63,12 +66,13 @@ export const extractHookVariableName = (
 
   const allMatches = [...sourceChunk.matchAll(HOOK_DECLARATION_REGEX)];
 
-  const hookPositionInChunk = sourceChunk.lastIndexOf("\n") + 1 + columnNumber;
-  const closestMatch = allMatches.filter((match) => match.index! <= hookPositionInChunk).at(-1);
+  const hookLineStart = sourceChunk.lastIndexOf("\n") + 1;
+  const hookPositionInChunk = hookLineStart + columnNumber;
+  const closestMatch =
+    allMatches.filter((match) => match.index! <= hookPositionInChunk).at(-1) ??
+    (columnNumber === 0 ? allMatches.find((match) => match.index! >= hookLineStart) : undefined);
 
-  if (closestMatch) {
-    return extractVariableNameFromBinding(closestMatch[1]);
-  }
+  if (closestMatch) return extractVariableNameFromBinding(closestMatch[1]);
 
   return null;
 };
@@ -82,6 +86,7 @@ interface ResolvedSource {
 interface SourceResolutionContext {
   sourceContentCache: Map<string, string | null>;
   fetchFn?: SourceFetch;
+  requestOptions?: SourceMapRequestOptions;
 }
 
 const resolveOriginalSource = async (
@@ -90,9 +95,9 @@ const resolveOriginalSource = async (
   runtimeColumn: number,
   context: SourceResolutionContext,
 ): Promise<ResolvedSource | null> => {
-  const { sourceContentCache, fetchFn } = context;
+  const { sourceContentCache, fetchFn, requestOptions } = context;
 
-  const sourceMap = await getSourceMap(runtimeFileName, true, fetchFn);
+  const sourceMap = await getSourceMap(runtimeFileName, true, fetchFn, requestOptions);
 
   if (sourceMap) {
     const originalLocation = getSourceFromSourceMap(sourceMap, runtimeLine, runtimeColumn);
@@ -136,6 +141,7 @@ const resolveOriginalSource = async (
 export const parseHookNames = async (
   hooksTree: HooksTree,
   fetchFn?: SourceFetch,
+  requestOptions?: SourceMapRequestOptions,
 ): Promise<HookNames> => {
   const hookNames: HookNames = new Map();
   const hooksList = flattenHooksTree(hooksTree);
@@ -145,6 +151,7 @@ export const parseHookNames = async (
   const resolutionContext: SourceResolutionContext = {
     sourceContentCache: new Map(),
     fetchFn,
+    requestOptions,
   };
 
   await Promise.all(

package/src/source/parse-stack.ts

@@ -31,7 +31,9 @@ export const parseStack = (stackString: string, options?: ParseOptions): StackFr
         const parsed = parseV8OrIeString(rawLine)[0];
         if (parsed) frames.push(parsed);
       } else if (/^\s*in\s+/.test(rawLine)) {
-        const elementName = rawLine.replace(/^\s*in\s+/, "").replace(/\s*\(at .*\)$/, "");
+        const elementName = rawLine
+          .replace(/^\s*in\s+/, "")
+          .replace(/\s*(?:\(at .*\)|\[[^\]]+\])$/, "");
         frames.push({ functionName: elementName, source: rawLine });
       } else if (rawLine.match(FIREFOX_SAFARI_STACK_REGEXP)) {
         const parsed = parseFFOrSafariString(rawLine)[0];