bippy 0.6.1-dev.3a24abf → 0.6.1-dev.a3b3942

package/src/source/owner-stack.ts

@@ -1,26 +1,18 @@
 import { getDisplayName, getType, traverseFiber } from "../core.js";
 import { _renderers, getRDTHook } from "../rdt-hook.js";
+import { getReactWorkTagsForFiber } from "../react-internals/index.js";
+import type {
+  Fiber,
+  RendererDispatcherRef,
+  ServerComponentInfo,
+} from "../react-internals/index.js";
 import {
-  ActivityComponentTag,
-  ClassComponentTag,
-  ForwardRefTag,
-  FunctionComponentTag,
-  HostComponentTag,
-  HostHoistableTag,
-  HostSingletonTag,
-  LazyComponentTag,
-  SimpleMemoComponentTag,
-  SuspenseComponentTag,
-  SuspenseListComponentTag,
-  ViewTransitionComponentTag,
-} from "../react-internals.js";
-import type { Fiber, RendererDispatcherRef, ServerComponentInfo } from "../types.js";
-import {
+  REACT_STACK_BOTTOM_FRAME_PATTERNS,
   SERVER_FRAME_MARKER,
   SERVER_ENV_PATTERN,
   SERVER_COMPONENT_URL_PREFIXES,
 } from "./constants.js";
-
+import { getPrepareStackTrace, setPrepareStackTrace } from "./error-stack.js";
 import { parseDebugStack } from "./parse-debug-stack.js";
 import { parseStack, StackFrame } from "./parse-stack.js";
 import { symbolicateStack } from "./symbolication.js";
@@ -41,9 +33,6 @@ export const hasDebugStack = (
 const isFiberOwner = (owner: Fiber | ServerComponentInfo): owner is Fiber =>
   "tag" in owner && typeof owner.tag === "number";
 
-const getDebugOwner = (fiber: Fiber): Fiber | ServerComponentInfo | undefined =>
-  fiber._debugOwner ?? undefined;
-
 /**
  * Locates a frame inside the fiber's own function body without invoking it:
  * any child fiber owned by this fiber was created by JSX inside its body, so
@@ -160,9 +149,8 @@ const describeNativeComponentFrame = (
     return cachedFrame;
   }
 
-  const previousPrepareStackTrace = Error.prepareStackTrace;
-  // HACK: V8 API allows undefined but bun-types declares it as non-optional
-  (Error as { prepareStackTrace?: typeof Error.prepareStackTrace }).prepareStackTrace = undefined;
+  const previousPrepareStackTrace = getPrepareStackTrace();
+  setPrepareStackTrace(undefined);
   reEntry = true;
 
   const dispatcherSnapshots = clearRendererDispatchers();
@@ -173,7 +161,7 @@ const describeNativeComponentFrame = (
   try {
     // HACK: Run the control and sample under the same property name so their stacks share a frame.
     const RunInRootFrame = {
-      DetermineComponentFrameRoot() {
+      DetermineComponentFrameRoot(this: void) {
         let control: unknown;
         try {
           if (construct) {
@@ -325,14 +313,14 @@ const describeNativeComponentFrame = (
   } finally {
     reEntry = false;
 
-    Error.prepareStackTrace = previousPrepareStackTrace;
+    setPrepareStackTrace(previousPrepareStackTrace);
 
     restoreRendererDispatchers(dispatcherSnapshots);
     console.error = previousConsoleError;
     console.warn = previousConsoleWarn;
   }
 
-  const componentName = component ? getDisplayName(component) : "";
+  const componentName = getDisplayName(component);
   const syntheticFrame = componentName ? describeBuiltInComponentFrame(componentName) : "";
   componentFrameCache.set(component, syntheticFrame);
   return syntheticFrame;
@@ -341,32 +329,33 @@ const describeNativeComponentFrame = (
 // https://github.com/facebook/react/blob/ac3e705a18696168acfcaed39dce0cfaa6be8836/packages/react-reconciler/src/ReactFiberComponentStack.js#L180
 export const describeFiber = (fiber: Fiber, childFiber: Fiber | null): string => {
   let stackFrame = "";
+  const workTags = getReactWorkTagsForFiber(fiber);
   switch (fiber.tag) {
-    case ActivityComponentTag:
+    case workTags.ActivityComponent:
       stackFrame = describeBuiltInComponentFrame("Activity");
       break;
-    case ClassComponentTag:
+    case workTags.ClassComponent:
       stackFrame = describeNativeComponentFrame(fiber.type, true);
       break;
-    case ForwardRefTag:
+    case workTags.ForwardRef:
       stackFrame = describeNativeComponentFrame(getType(fiber.type) ?? fiber.type, false);
       break;
-    case FunctionComponentTag:
-    case SimpleMemoComponentTag:
+    case workTags.FunctionComponent:
+    case workTags.SimpleMemoComponent:
       stackFrame = describeNativeComponentFrame(fiber.type, false);
       break;
-    case HostComponentTag:
-    case HostHoistableTag:
-    case HostSingletonTag:
+    case workTags.HostComponent:
+    case workTags.HostHoistable:
+    case workTags.HostSingleton:
       if (typeof fiber.type === "string") {
         stackFrame = describeBuiltInComponentFrame(fiber.type);
       }
       break;
-    case LazyComponentTag:
+    case workTags.LazyComponent:
       // TODO: When we support Thenables as component types we should rename this.
       stackFrame = describeBuiltInComponentFrame("Lazy");
       break;
-    case SuspenseComponentTag:
+    case workTags.SuspenseComponent:
       if (fiber.child !== childFiber && childFiber !== null) {
         // If we came from the second Fiber then we're in the Suspense Fallback.
         stackFrame = describeBuiltInComponentFrame("Suspense Fallback");
@@ -374,10 +363,10 @@ export const describeFiber = (fiber: Fiber, childFiber: Fiber | null): string =>
         stackFrame = describeBuiltInComponentFrame("Suspense");
       }
       break;
-    case SuspenseListComponentTag:
+    case workTags.SuspenseListComponent:
       stackFrame = describeBuiltInComponentFrame("SuspenseList");
       break;
-    case ViewTransitionComponentTag:
+    case workTags.ViewTransitionComponent:
       // Note: enableViewTransition feature flag is not available in this codebase,
       // so we'll always include ViewTransition
       stackFrame = describeBuiltInComponentFrame("ViewTransition");
@@ -406,8 +395,8 @@ export const getFallbackParentStack = (thisFiber: Fiber): string => {
       // Since we don't have __DEV__ in this codebase, we'll check for _debugInfo
       const debugInfo = currentFiber._debugInfo;
       if (debugInfo && Array.isArray(debugInfo)) {
-        for (let i = debugInfo.length - 1; i >= 0; i--) {
-          const debugEntry = debugInfo[i];
+        for (let debugInfoIndex = debugInfo.length - 1; debugInfoIndex >= 0; debugInfoIndex--) {
+          const debugEntry = debugInfo[debugInfoIndex];
           if (typeof debugEntry.name === "string") {
             componentStack += describeDebugInfoFrame(debugEntry.name, debugEntry.env);
           }
@@ -420,7 +409,7 @@ export const getFallbackParentStack = (thisFiber: Fiber): string => {
     return componentStack;
   } catch (error) {
     if (error instanceof Error) {
-      return `\nError generating stack: ${error.message}\n${error.stack}`;
+      return `\nBippy couldn’t generate the stack: ${error.message}\n${error.stack}`;
     }
     return "";
   }
@@ -445,14 +434,10 @@ export const getFallbackParentStack = (thisFiber: Fiber): string => {
  * @see https://github.com/facebook/react/blob/main/packages/react-devtools-shared/src/backend/shared/DevToolsOwnerStack.js#L12
  */
 export const formatOwnerStack = (stack: string): string => {
-  const prevPrepareStackTrace = Error.prepareStackTrace;
-  // HACK: V8 API allows undefined but bun-types declares it as non-optional
-  (Error as { prepareStackTrace?: typeof Error.prepareStackTrace }).prepareStackTrace = undefined;
   let formattedStack = stack;
   if (!formattedStack) {
     return "";
   }
-  Error.prepareStackTrace = prevPrepareStackTrace;
 
   if (formattedStack.startsWith("Error: react-stack-top-frame\n")) {
     // V8's default formatting prefixes with the error message which we
@@ -465,8 +450,7 @@ export const formatOwnerStack = (stack: string): string => {
     formattedStack = formattedStack.slice(firstNewlineIndex + 1);
   }
   let bottomFrameIndex = Math.max(
-    formattedStack.indexOf("react_stack_bottom_frame"),
-    formattedStack.indexOf("react-stack-bottom-frame"),
+    ...REACT_STACK_BOTTOM_FRAME_PATTERNS.map((pattern) => formattedStack.indexOf(pattern)),
   );
   if (bottomFrameIndex !== -1) {
     bottomFrameIndex = formattedStack.lastIndexOf("\n", bottomFrameIndex);
@@ -483,11 +467,6 @@ export const formatOwnerStack = (stack: string): string => {
   return formattedStack;
 };
 
-interface DebugStackEntry {
-  componentName: string;
-  stackFrames: StackFrame[];
-}
-
 const isReactServerComponentFrame = (stackFrame: StackFrame): boolean =>
   Boolean(
     stackFrame.functionName && stackFrame.fileName && isServerComponentUrl(stackFrame.fileName),
@@ -499,24 +478,22 @@ const areStackFramesEqual = (firstFrame: StackFrame, secondFrame: StackFrame): b
   firstFrame.columnNumber === secondFrame.columnNumber;
 
 const buildFunctionNameToRscFramesMap = (
-  debugStackEntries: DebugStackEntry[],
+  debugStackFrames: StackFrame[],
 ): Map<string, StackFrame[]> => {
   const functionNameToRscFrames = new Map<string, StackFrame[]>();
 
-  for (const debugStackEntry of debugStackEntries) {
-    for (const stackFrame of debugStackEntry.stackFrames) {
-      if (!isReactServerComponentFrame(stackFrame)) continue;
+  for (const stackFrame of debugStackFrames) {
+    if (!isReactServerComponentFrame(stackFrame)) continue;
 
-      const functionName = stackFrame.functionName!;
-      const framesForFunction = functionNameToRscFrames.get(functionName) ?? [];
-      const isDuplicateFrame = framesForFunction.some((existingFrame) =>
-        areStackFramesEqual(existingFrame, stackFrame),
-      );
+    const functionName = stackFrame.functionName!;
+    const framesForFunction = functionNameToRscFrames.get(functionName) ?? [];
+    const isDuplicateFrame = framesForFunction.some((existingFrame) =>
+      areStackFramesEqual(existingFrame, stackFrame),
+    );
 
-      if (!isDuplicateFrame) {
-        framesForFunction.push(stackFrame);
-        functionNameToRscFrames.set(functionName, framesForFunction);
-      }
+    if (!isDuplicateFrame) {
+      framesForFunction.push(stackFrame);
+      functionNameToRscFrames.set(functionName, framesForFunction);
     }
   }
 
@@ -577,7 +554,7 @@ const getOwnerStackFromDebugStacks = (fiber: Fiber): StackFrame[] => {
   while (owner) {
     if (isFiberOwner(owner)) {
       const ownerFiber: Fiber = owner;
-      owner = getDebugOwner(ownerFiber);
+      owner = ownerFiber._debugOwner;
       if (owner && hasDebugStack(ownerFiber)) {
         const { frames, isTrusted } = parseDebugStack(ownerFiber._debugStack);
         if (isTrusted) {
@@ -601,53 +578,39 @@ const getOwnerStackFromDebugStacks = (fiber: Fiber): StackFrame[] => {
   return ownerStackFrames;
 };
 
-const getDebugStackEntries = (rootFiber: Fiber): DebugStackEntry[] => {
-  const debugStackEntries: DebugStackEntry[] = [];
+const getDebugStackFrames = (rootFiber: Fiber): StackFrame[] => {
+  const debugStackFrames: StackFrame[] = [];
 
   traverseFiber(
     rootFiber,
     (currentFiber) => {
       if (!hasDebugStack(currentFiber)) return;
 
-      const componentName =
-        typeof currentFiber.type !== "string"
-          ? getDisplayName(currentFiber.type) || "<anonymous>"
-          : currentFiber.type;
-
-      debugStackEntries.push({
-        componentName,
-        stackFrames: parseStack(formatOwnerStack(currentFiber._debugStack?.stack)),
-      });
+      const { frames, isTrusted } = parseDebugStack(currentFiber._debugStack);
+      if (isTrusted) {
+        debugStackFrames.push(...frames);
+      }
     },
     true,
   );
 
-  return debugStackEntries;
+  return debugStackFrames;
 };
 
 /**
- * Returns a stack of ALL ancestor components in the render tree (the fiber's
- * `return` chain), including wrappers that render `{children}` without having
- * created this fiber's JSX. Locations come from re-invoking each component
- * with a throwing dispatcher; server frames are enriched from debug stacks by
- * name matching. Works on every React version.
+ * The unsymbolicated frames behind {@link getParentStack}: bundle-space
+ * locations from re-invoking each component with a throwing dispatcher,
+ * with server frames enriched from debug stacks by name matching.
  */
-export const getParentStack = async (
-  fiber: Fiber,
-  shouldCache = true,
-  fetchFunction?: (url: string) => Promise<Response>,
-): Promise<StackFrame[]> => {
-  const debugStackEntries = getDebugStackEntries(fiber);
+export const getRawParentStack = (fiber: Fiber): StackFrame[] => {
+  const debugStackFrames = getDebugStackFrames(fiber);
   const fallbackStackFrames = parseStack(getFallbackParentStack(fiber));
-  const functionNameToRscFrames = buildFunctionNameToRscFramesMap(debugStackEntries);
+  const functionNameToRscFrames = buildFunctionNameToRscFramesMap(debugStackFrames);
   const functionNameToUsageIndex = new Map<string, number>();
 
   const enrichedStackFrames = fallbackStackFrames.map((stackFrame): StackFrame => {
     const isServerFrame =
-      (stackFrame.source?.includes(SERVER_FRAME_MARKER) ?? false) ||
-      (stackFrame.source !== null &&
-        stackFrame.source !== undefined &&
-        SERVER_ENV_PATTERN.test(stackFrame.source));
+      stackFrame.source !== undefined && SERVER_ENV_PATTERN.test(stackFrame.source);
 
     if (isServerFrame) {
       return getEnrichedServerStackFrame(
@@ -660,15 +623,26 @@ export const getParentStack = async (
     return stackFrame;
   });
 
-  const deduplicatedStackFrames = enrichedStackFrames.filter((stackFrame, index, frames) => {
+  return enrichedStackFrames.filter((stackFrame, index, frames) => {
     if (index === 0) return true;
     const previousFrame = frames[index - 1];
     return stackFrame.functionName !== previousFrame.functionName;
   });
-
-  return symbolicateStack(deduplicatedStackFrames, shouldCache, fetchFunction);
 };
 
+/**
+ * Returns a stack of ALL ancestor components in the render tree (the fiber's
+ * `return` chain), including wrappers that render `{children}` without having
+ * created this fiber's JSX. Locations come from re-invoking each component
+ * with a throwing dispatcher; server frames are enriched from debug stacks by
+ * name matching. Works on every React version.
+ */
+export const getParentStack = async (
+  fiber: Fiber,
+  shouldCache = true,
+  fetchFunction?: (url: string) => Promise<Response>,
+): Promise<StackFrame[]> => symbolicateStack(getRawParentStack(fiber), shouldCache, fetchFunction);
+
 // 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
 const isLocatableFrame = (stackFrame: StackFrame): boolean =>

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

@@ -1,4 +1,5 @@
 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";
 
 interface V8CallSite {
@@ -117,14 +118,13 @@ export const parseDebugStack = (debugStack: Error): ParsedDebugStack => {
     }
     return stackString;
   };
-  const previousPrepareStackTrace = Error.prepareStackTrace;
-  // node's CallSite typings disagree with browser-safe optional methods
-  Error.prepareStackTrace = collectFramesAndFormatStack as typeof Error.prepareStackTrace;
+  const previousPrepareStackTrace = getPrepareStackTrace();
+  setPrepareStackTrace(collectFramesAndFormatStack);
   let stackString: string;
   try {
     stackString = String(debugStack.stack);
   } finally {
-    Error.prepareStackTrace = previousPrepareStackTrace;
+    setPrepareStackTrace(previousPrepareStackTrace);
   }
 
   const result = structuredResult ?? parseMaterializedStack(stackString);

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

@@ -35,7 +35,7 @@ const flattenHooksTree = (hooksTree: HooksTree): HooksNode[] => {
 
 const findSourceContentByFileName = (
   sources: string[],
-  sourcesContent: string[] | undefined,
+  sourcesContent: Array<string | null> | undefined,
   fileName: string,
 ): string | null => {
   if (!sourcesContent) return null;

package/src/source/parse-stack.ts

@@ -1,5 +1,4 @@
 export interface StackFrame {
-  args?: unknown[];
   columnNumber?: number;
   lineNumber?: number;
   // start of the enclosing function (the definition, not the call site);
@@ -17,7 +16,6 @@ export interface StackFrame {
 
 export interface ParseOptions {
   slice?: number | [number, number];
-  allowEmpty?: boolean;
   includeInElement?: boolean;
 }