bippy 0.5.43 → 0.6.0

package/src/react-refresh/vite-hmr-transport.ts

@@ -0,0 +1,116 @@
+import { HMR_RECONNECT_DELAY_MS, VITE_WS_TOKEN_REGEX } from "./constants.js";
+import { HmrTransport, HmrUpdateHandler } from "./types.js";
+
+/**
+ * Extracts the accepted file paths from a raw Vite HMR WebSocket message.
+ * Only `js-update` entries are kept (a `css-update` swaps a stylesheet link
+ * without re-running modules). Returns an empty array for any other message
+ * shape.
+ *
+ * @example
+ * ```ts
+ * parseViteUpdatePaths(rawMessageData);
+ * // ["/src/app.tsx"]
+ * ```
+ */
+export const parseViteUpdatePaths = (rawMessageData: string): string[] => {
+  let message: unknown;
+  try {
+    message = JSON.parse(rawMessageData);
+  } catch {
+    return [];
+  }
+  if (typeof message !== "object" || message === null) return [];
+  if (!("type" in message) || message.type !== "update") return [];
+  if (!("updates" in message) || !Array.isArray(message.updates)) return [];
+  const filePaths: string[] = [];
+  for (const update of message.updates) {
+    if (typeof update !== "object" || update === null) continue;
+    if (!("type" in update) || update.type !== "js-update") continue;
+    if (!("acceptedPath" in update) || typeof update.acceptedPath !== "string") continue;
+    filePaths.push(update.acceptedPath);
+  }
+  return filePaths;
+};
+
+// HACK: a standalone script is not a Vite module, so import.meta.hot is
+// unavailable; open a second HMR WebSocket using the wsToken scraped from
+// the dev server's own /@vite/client source.
+const fetchViteWsToken = async (): Promise<string | null> => {
+  try {
+    const response = await fetch("/@vite/client");
+    if (!response.ok) return null;
+    const clientSource = await response.text();
+    return VITE_WS_TOKEN_REGEX.exec(clientSource)?.[1] ?? null;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Subscribes to the current page's Vite dev server HMR WebSocket and invokes
+ * `onHmrUpdate` with the updated file paths on every hot update. Reconnects
+ * automatically when the dev server restarts. Resolves `null` when the page
+ * is not served by Vite.
+ *
+ * @example
+ * ```ts
+ * const transport = await createViteHmrTransport((filePaths) => {
+ *   console.log("hot updated:", filePaths);
+ * });
+ * transport?.dispose();
+ * ```
+ */
+export const createViteHmrTransport = async (
+  onHmrUpdate: HmrUpdateHandler,
+): Promise<HmrTransport | null> => {
+  if (typeof window === "undefined" || typeof WebSocket === "undefined") return null;
+  const initialWsToken = await fetchViteWsToken();
+  if (!initialWsToken) return null;
+
+  let isDisposed = false;
+  let socket: WebSocket | null = null;
+  let reconnectTimerId: number | undefined;
+
+  const scheduleReconnect = () => {
+    if (isDisposed) return;
+    reconnectTimerId = window.setTimeout(() => {
+      void fetchViteWsToken().then((freshWsToken) => {
+        if (isDisposed) return;
+        if (freshWsToken) {
+          connect(freshWsToken);
+        } else {
+          scheduleReconnect();
+        }
+      });
+    }, HMR_RECONNECT_DELAY_MS);
+  };
+
+  const connect = (wsToken: string) => {
+    if (isDisposed) return;
+    const socketProtocol = location.protocol === "https:" ? "wss" : "ws";
+    const connectedSocket = new WebSocket(
+      `${socketProtocol}://${location.host}/?token=${wsToken}`,
+      "vite-hmr",
+    );
+    socket = connectedSocket;
+    connectedSocket.onmessage = (event) => {
+      const filePaths = parseViteUpdatePaths(String(event.data));
+      if (filePaths.length > 0) onHmrUpdate(filePaths);
+    };
+    connectedSocket.onclose = scheduleReconnect;
+  };
+
+  connect(initialWsToken);
+
+  return {
+    dispose: () => {
+      isDisposed = true;
+      window.clearTimeout(reconnectTimerId);
+      if (socket) {
+        socket.onclose = null;
+        socket.close();
+      }
+    },
+  };
+};

package/src/source/constants.ts

@@ -14,6 +14,8 @@ export const INTERNAL_SCHEME_PREFIXES = [
 
 export const ABOUT_REACT_PREFIX = "about://React/";
 
+export const SERVER_COMPONENT_URL_PREFIXES = ["rsc://", ABOUT_REACT_PREFIX] as const;
+
 export const ANONYMOUS_FILE_PATTERNS = ["<anonymous>", "eval", ""] as const;
 
 export const SOURCE_FILE_EXTENSION_REGEX = /\.(jsx|tsx|ts|js)$/;
@@ -26,3 +28,12 @@ export const QUERY_PARAMETER_PATTERN_REGEX = /^\?[\w~.-]+(?:=[^&#]*)?(?:&[\w~.-]
 export const SERVER_FRAME_MARKER = "(at Server)";
 
 export const SERVER_ENV_PATTERN = /\(at [^)]+\)$/;
+
+export const REACT_STACK_BOTTOM_FRAME_PATTERNS = [
+  "react_stack_bottom_frame",
+  "react-stack-bottom-frame",
+] as const;
+
+// the first frame of a _debugStack is the JSX factory itself (jsxDEV), never
+// user code, matching what react's own captureOwnerStack pops
+export const JSX_FACTORY_FRAME_COUNT = 1;

package/src/source/get-display-name-from-source.ts

@@ -1,6 +1,6 @@
 import { Fiber } from "../types.js";
 import { getDisplayName } from "../core.js";
-import { getOwnerStack } from "./owner-stack.js";
+import { getParentStack } from "./owner-stack.js";
 import { getSourceFromSourceMap, getSourceMap } from "./symbolication.js";
 import { StackFrame } from "./parse-stack.js";
 
@@ -46,8 +46,8 @@ export const getDisplayNameFromSource = async (
   cache = true,
   fetchFn?: (url: string) => Promise<Response>,
 ): Promise<string | null> => {
-  const ownerStack = await getOwnerStack(fiber, cache, fetchFn);
-  const stackFrame = ownerStack.filter((stackFrame) => stackFrame.fileName)[0];
+  const parentStackFrames = await getParentStack(fiber, cache, fetchFn);
+  const stackFrame = parentStackFrames.filter((innerFrame) => innerFrame.fileName)[0];
 
   if (!stackFrame?.fileName) {
     return getDisplayName(fiber.type);

package/src/source/get-source.ts

@@ -10,7 +10,10 @@ import {
   BUNDLED_FILE_PATTERN_REGEX,
   QUERY_PARAMETER_PATTERN_REGEX,
 } from "./constants.js";
-import { getOwnerStack } from "./owner-stack.js";
+import { getDefinitionFrameFromOwnedChild, getParentStack, hasDebugStack } from "./owner-stack.js";
+import { parseDebugStack } from "./parse-debug-stack.js";
+import { StackFrame } from "./parse-stack.js";
+import { symbolicateStack } from "./symbolication.js";
 
 export const hasDebugSource = (
   fiber: Fiber,
@@ -31,9 +34,46 @@ export const hasDebugSource = (
   );
 };
 
+const toFiberSource = (stackFrame: StackFrame): FiberSource | null =>
+  stackFrame.fileName
+    ? {
+        fileName: stackFrame.fileName,
+        lineNumber: stackFrame.lineNumber,
+        columnNumber: stackFrame.columnNumber,
+        functionName: stackFrame.functionName,
+      }
+    : null;
+
+// the fiber's own _debugStack (react 19) is captured at its JSX creation
+// site, so its first user-space frame IS the usage site - no need to
+// re-invoke the component like the throwing trick does
+const getUsageFrameFromDebugStack = (fiber: Fiber): StackFrame | null => {
+  if (!hasDebugStack(fiber)) {
+    return null;
+  }
+  const { frames, isTrusted } = parseDebugStack(fiber._debugStack);
+  if (!isTrusted) {
+    return null;
+  }
+  for (const stackFrame of frames) {
+    if (stackFrame.fileName) {
+      return stackFrame;
+    }
+  }
+  return null;
+};
+
 /**
  * Returns the source of where the component is used. Available only in dev, for composite {@link Fiber}s.
  *
+ * Resolution order:
+ * 1. `_debugSource` (react <19, requires the JSX source babel transform)
+ * 2. the fiber's own `_debugStack` (react 19) - the exact JSX creation site
+ * 3. an owned child's `_debugStack` bottom frame (react 19) - a location
+ *    inside the component's own body; works for components that the throwing
+ *    trick cannot locate (no hooks, no props access)
+ * 4. the legacy owner-stack path (throwing trick re-invocation)
+ *
  * @example
  * ```ts
  * function Parent() {
@@ -59,16 +99,20 @@ export const getSource = async (
     return debugSource || null;
   }
 
-  const componentStack = await getOwnerStack(fiber, cache, fetchFn);
+  const debugStackFrame =
+    getUsageFrameFromDebugStack(fiber) ?? getDefinitionFrameFromOwnedChild(fiber);
+  if (debugStackFrame) {
+    const [symbolicatedFrame] = await symbolicateStack([debugStackFrame], cache, fetchFn);
+    const debugStackSource = toFiberSource(symbolicatedFrame);
+    if (debugStackSource) {
+      return debugStackSource;
+    }
+  }
 
-  for (const stackFrame of componentStack) {
+  const parentStackFrames = await getParentStack(fiber, cache, fetchFn);
+  for (const stackFrame of parentStackFrames) {
     if (stackFrame.fileName) {
-      return {
-        fileName: stackFrame.fileName,
-        lineNumber: stackFrame.lineNumber,
-        columnNumber: stackFrame.columnNumber,
-        functionName: stackFrame.functionName,
-      };
+      return toFiberSource(stackFrame);
     }
   }
   return null;

package/src/source/index.ts

@@ -1,8 +1,17 @@
-export * from "./owner-stack.js";
-export * from "./get-source.js";
-export * from "./symbolication.js";
-export * from "./types.js";
-export * from "./parse-stack.js";
-export * from "./get-display-name-from-source.js";
-export * from "./inspect-hooks.js";
-export * from "./parse-hook-names.js";
+export { formatOwnerStack, getOwnerStack, getParentStack, hasDebugStack } from "./owner-stack.js";
+export { getSource, isSourceFile, normalizeFileName } from "./get-source.js";
+export {
+  getSourceFromSourceMap,
+  getSourceMap,
+  symbolicateStack,
+  type DecodedSourceMapSection,
+  type IndexSourceMap,
+  type RawSourceMap,
+  type SourceMap,
+  type StandardSourceMap,
+} from "./symbolication.js";
+export type { FiberSource } from "./types.js";
+export { parseStack, type ParseOptions, type StackFrame } from "./parse-stack.js";
+export { getDisplayNameFromSource } from "./get-display-name-from-source.js";
+export { getFiberHooks, type HookSource, type HooksNode, type HooksTree } from "./inspect-hooks.js";
+export { parseHookNames, type HookNames } from "./parse-hook-names.js";

package/src/source/inspect-hooks.ts

@@ -282,16 +282,16 @@ const dispatcherUseMemoCache = (size: number): unknown[] => {
   )?.memoCache;
   if (memoCache === null || memoCache === undefined) return [];
 
-  let data = memoCache.data[memoCache.index];
-  if (data === undefined) {
-    data = memoCache.data[memoCache.index] = Array.from(
+  let memoCacheSlots = memoCache.data[memoCache.index];
+  if (memoCacheSlots === undefined) {
+    memoCacheSlots = memoCache.data[memoCache.index] = Array.from(
       { length: size },
       () => REACT_MEMO_CACHE_SENTINEL,
     );
   }
 
   memoCache.index++;
-  return data;
+  return memoCacheSlots;
 };
 
 const dispatcherUseOptimistic = (passthrough: unknown): [unknown, () => void] => {
@@ -473,6 +473,9 @@ const findSharedIndex = (
   rootStack: StackFrame[],
   rootIndex: number,
 ): number => {
+  // mostLikelyAncestorIndex is cached across inspections, so it can exceed the
+  // bounds of a later, shorter root stack (e.g. truncated Error.stackTraceLimit)
+  if (rootIndex >= rootStack.length) return -1;
   const source = rootStack[rootIndex].source;
   hookSearch: for (let hookIndex = 0; hookIndex < hookStack.length; hookIndex++) {
     if (hookStack[hookIndex].source === source) {

package/src/source/owner-stack.ts

@@ -17,8 +17,14 @@ import {
   getDisplayName,
   traverseFiber,
 } from "../core.js";
-import { SERVER_FRAME_MARKER, SERVER_ENV_PATTERN, ABOUT_REACT_PREFIX } from "./constants.js";
+import { ServerComponentInfo } from "../types.js";
+import {
+  SERVER_FRAME_MARKER,
+  SERVER_ENV_PATTERN,
+  SERVER_COMPONENT_URL_PREFIXES,
+} from "./constants.js";
 
+import { parseDebugStack } from "./parse-debug-stack.js";
 import { parseStack, StackFrame } from "./parse-stack.js";
 import { symbolicateStack } from "./symbolication.js";
 
@@ -30,6 +36,60 @@ export const hasDebugStack = (
   return fiber._debugStack instanceof Error && typeof fiber._debugStack?.stack === "string";
 };
 
+const isFiberOwner = (owner: Fiber | ServerComponentInfo): owner is Fiber =>
+  typeof (owner as Fiber).tag === "number";
+
+// react's typings (and bippy's Fiber, which mirrors them) declare _debugOwner
+// as a Fiber, but react 19 flight sets a ReactComponentInfo object for server
+// component owners
+const getDebugOwner = (fiber: Fiber): Fiber | ServerComponentInfo | undefined =>
+  fiber._debugOwner as Fiber | ServerComponentInfo | 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
+ * the bottom user-space frame of that child's _debugStack sits in this
+ * component. The enclosing line/column (V8 CallSite API) points at the
+ * function definition start. Requires React 19 (_debugStack).
+ */
+export const getDefinitionFrameFromOwnedChild = (fiber: Fiber): StackFrame | null => {
+  let ownedChildDebugStack: Error | null = null;
+  traverseFiber(fiber, (childFiber) => {
+    if (childFiber === fiber) {
+      return false;
+    }
+    const childOwner = childFiber._debugOwner;
+    if (
+      (childOwner === fiber || (fiber.alternate !== null && childOwner === fiber.alternate)) &&
+      childFiber._debugStack instanceof Error
+    ) {
+      ownedChildDebugStack = childFiber._debugStack;
+      return true;
+    }
+    return false;
+  });
+  if (!ownedChildDebugStack) {
+    return null;
+  }
+
+  const { frames, isTrusted } = parseDebugStack(ownedChildDebugStack);
+  if (!isTrusted) {
+    return null;
+  }
+  for (let frameIndex = frames.length - 1; frameIndex >= 0; frameIndex--) {
+    const stackFrame = frames[frameIndex];
+    if (!stackFrame.fileName) {
+      continue;
+    }
+    return {
+      ...stackFrame,
+      lineNumber: stackFrame.enclosingLineNumber || stackFrame.lineNumber,
+      columnNumber: stackFrame.enclosingColumnNumber || stackFrame.columnNumber,
+    };
+  }
+  return null;
+};
+
 const getCurrentDispatcher = (): null | React.RefObject<unknown> => {
   const rdtHook = getRDTHook();
   for (const renderer of [...Array.from(_renderers), ...Array.from(rdtHook.renderers.values())]) {
@@ -68,6 +128,10 @@ export const describeDebugInfoFrame = (name: string, env?: string): string => {
 
 let reEntry = false;
 
+// Computing a frame throws and parses two full error stacks, so cache per
+// 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
 const describeNativeComponentFrame = (
   component: React.ComponentType<unknown>,
@@ -77,6 +141,11 @@ const describeNativeComponentFrame = (
     return "";
   }
 
+  const cachedFrame = componentFrameCache.get(component);
+  if (cachedFrame !== undefined) {
+    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;
@@ -257,6 +326,7 @@ const describeNativeComponentFrame = (
                   stackFrame = stackFrame.replace("<anonymous>", displayName);
                 }
                 // Return the line we found.
+                componentFrameCache.set(component, stackFrame);
                 return stackFrame;
               }
             } while (sampleIndex >= 1 && controlIndex >= 0);
@@ -277,6 +347,7 @@ const describeNativeComponentFrame = (
 
   const componentName = component ? getDisplayName(component) : "";
   const syntheticFrame = componentName ? describeBuiltInComponentFrame(componentName) : "";
+  componentFrameCache.set(component, syntheticFrame);
   return syntheticFrame;
 };
 
@@ -334,11 +405,11 @@ export const describeFiber = (fiber: Fiber, childFiber: Fiber | null): string =>
 };
 
 /**
- * react 19 introduces the _debugStack property, which we can use to grab the stack.
- * however, for versions that don't have this property, we need to construct
- * a "fake" version of the owner stack
+ * Builds a component-stack string by walking the fiber `return` chain, the
+ * pre-react-19 substitute for `_debugStack` (which is why the frame locations
+ * come from re-invocation in {@link describeFiber} rather than a real stack).
  */
-export const getFallbackOwnerStack = (thisFiber: Fiber): string => {
+export const getFallbackParentStack = (thisFiber: Fiber): string => {
   try {
     let componentStack = "";
     let currentFiber: Fiber | null = thisFiber;
@@ -403,21 +474,21 @@ export const formatOwnerStack = (stack: string): string => {
     // don't want/need
     formattedStack = formattedStack.slice(29);
   }
-  let idx = formattedStack.indexOf("\n");
-  if (idx !== -1) {
+  const firstNewlineIndex = formattedStack.indexOf("\n");
+  if (firstNewlineIndex !== -1) {
     // pop the JSX frame
-    formattedStack = formattedStack.slice(idx + 1);
+    formattedStack = formattedStack.slice(firstNewlineIndex + 1);
   }
-  idx = Math.max(
+  let bottomFrameIndex = Math.max(
     formattedStack.indexOf("react_stack_bottom_frame"),
     formattedStack.indexOf("react-stack-bottom-frame"),
   );
-  if (idx !== -1) {
-    idx = formattedStack.lastIndexOf("\n", idx);
+  if (bottomFrameIndex !== -1) {
+    bottomFrameIndex = formattedStack.lastIndexOf("\n", bottomFrameIndex);
   }
-  if (idx !== -1) {
+  if (bottomFrameIndex !== -1) {
     // cut off everything after the bottom frame since it'll be internals.
-    formattedStack = formattedStack.slice(0, idx);
+    formattedStack = formattedStack.slice(0, bottomFrameIndex);
   } else {
     // we didn't find any internal callsite out to user space.
     // This means that this was called outside an owner or the owner is fully internal.
@@ -427,17 +498,14 @@ export const formatOwnerStack = (stack: string): string => {
   return formattedStack;
 };
 
-interface OwnerStackEntry {
+interface DebugStackEntry {
   componentName: string;
   stackFrames: StackFrame[];
 }
 
 const isReactServerComponentFrame = (stackFrame: StackFrame): boolean =>
   Boolean(
-    stackFrame.functionName &&
-    stackFrame.fileName &&
-    (stackFrame.fileName.startsWith("rsc://") ||
-      stackFrame.fileName.startsWith(ABOUT_REACT_PREFIX)),
+    stackFrame.functionName && stackFrame.fileName && isServerComponentUrl(stackFrame.fileName),
   );
 
 const areStackFramesEqual = (firstFrame: StackFrame, secondFrame: StackFrame): boolean =>
@@ -446,12 +514,12 @@ const areStackFramesEqual = (firstFrame: StackFrame, secondFrame: StackFrame): b
   firstFrame.columnNumber === secondFrame.columnNumber;
 
 const buildFunctionNameToRscFramesMap = (
-  ownerStackEntries: OwnerStackEntry[],
+  debugStackEntries: DebugStackEntry[],
 ): Map<string, StackFrame[]> => {
   const functionNameToRscFrames = new Map<string, StackFrame[]>();
 
-  for (const ownerEntry of ownerStackEntries) {
-    for (const stackFrame of ownerEntry.stackFrames) {
+  for (const debugStackEntry of debugStackEntries) {
+    for (const stackFrame of debugStackEntry.stackFrames) {
       if (!isReactServerComponentFrame(stackFrame)) continue;
 
       const functionName = stackFrame.functionName!;
@@ -501,8 +569,55 @@ const getEnrichedServerStackFrame = (
   };
 };
 
-const getOwnerStackEntries = (rootFiber: Fiber): OwnerStackEntry[] => {
-  const ownerStackEntries: OwnerStackEntry[] = [];
+const isServerComponentUrl = (url: string): boolean =>
+  SERVER_COMPONENT_URL_PREFIXES.some((prefix) => url.startsWith(prefix));
+
+// flight installs fake server frames (rsc:// or about://React/ urls) into
+// client-side debug stacks, so server detection must be per-frame
+const markFlightServerFrame = (stackFrame: StackFrame): StackFrame =>
+  !stackFrame.isServer && stackFrame.fileName && isServerComponentUrl(stackFrame.fileName)
+    ? { ...stackFrame, isServer: true }
+    : stackFrame;
+
+/**
+ * Builds owner-chain stack frames from the _debugStack errors React 19
+ * attaches at JSX creation, walking `_debugOwner` across both client fibers
+ * and server components (ReactComponentInfo, which chains via `.owner` and
+ * carries `.debugStack`). This is exact - no re-invoking components, no
+ * name-matching heuristics - but requires React 19.
+ */
+const getOwnerStackFromDebugStacks = (fiber: Fiber): StackFrame[] => {
+  const ownerStackFrames: StackFrame[] = [];
+  let owner: Fiber | ServerComponentInfo | null | undefined = fiber;
+  while (owner) {
+    if (isFiberOwner(owner)) {
+      const ownerFiber: Fiber = owner;
+      owner = getDebugOwner(ownerFiber);
+      if (owner && hasDebugStack(ownerFiber)) {
+        const { frames, isTrusted } = parseDebugStack(ownerFiber._debugStack);
+        if (isTrusted) {
+          for (const stackFrame of frames) {
+            ownerStackFrames.push(markFlightServerFrame(stackFrame));
+          }
+        }
+      }
+    } else {
+      const serverOwner: ServerComponentInfo = owner;
+      owner = serverOwner.owner;
+      // server stacks are captured and pre-trimmed by flight, so they carry
+      // no bottom-frame sentinel and are trusted as-is
+      if (owner && serverOwner.debugStack instanceof Error) {
+        for (const serverFrame of parseDebugStack(serverOwner.debugStack).frames) {
+          ownerStackFrames.push({ ...serverFrame, isServer: true });
+        }
+      }
+    }
+  }
+  return ownerStackFrames;
+};
+
+const getDebugStackEntries = (rootFiber: Fiber): DebugStackEntry[] => {
+  const debugStackEntries: DebugStackEntry[] = [];
 
   traverseFiber(
     rootFiber,
@@ -514,7 +629,7 @@ const getOwnerStackEntries = (rootFiber: Fiber): OwnerStackEntry[] => {
           ? getDisplayName(currentFiber.type) || "<anonymous>"
           : currentFiber.type;
 
-      ownerStackEntries.push({
+      debugStackEntries.push({
         componentName,
         stackFrames: parseStack(formatOwnerStack(currentFiber._debugStack?.stack)),
       });
@@ -522,17 +637,24 @@ const getOwnerStackEntries = (rootFiber: Fiber): OwnerStackEntry[] => {
     true,
   );
 
-  return ownerStackEntries;
+  return debugStackEntries;
 };
 
-export const getOwnerStack = async (
+/**
+ * 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[]> => {
-  const ownerStackEntries = getOwnerStackEntries(fiber);
-  const fallbackStackFrames = parseStack(getFallbackOwnerStack(fiber));
-  const functionNameToRscFrames = buildFunctionNameToRscFramesMap(ownerStackEntries);
+  const debugStackEntries = getDebugStackEntries(fiber);
+  const fallbackStackFrames = parseStack(getFallbackParentStack(fiber));
+  const functionNameToRscFrames = buildFunctionNameToRscFramesMap(debugStackEntries);
   const functionNameToUsageIndex = new Map<string, number>();
 
   const enrichedStackFrames = fallbackStackFrames.map((stackFrame): StackFrame => {
@@ -559,3 +681,45 @@ export const getOwnerStack = async (
 
   return symbolicateStack(deduplicatedStackFrames, 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 =>
+  Boolean(stackFrame.fileName) && !stackFrame.isIgnoreListed;
+
+/**
+ * Returns the stack of components that CREATED this fiber's JSX (the
+ * `_debugOwner` chain), with exact creation-site locations from React 19's
+ * `_debugStack` errors - including server component owners. Wrappers that
+ * merely render `{children}` do not appear; use {@link getParentStack} for
+ * the full render-tree ancestry. Falls back to {@link getParentStack} on
+ * React <19, when no trusted debug stacks exist, or when the owner chain
+ * yields no locatable frames (so callers always get the most useful stack
+ * available).
+ */
+export const getOwnerStack = async (
+  fiber: Fiber,
+  shouldCache = true,
+  fetchFunction?: (url: string) => Promise<Response>,
+): Promise<StackFrame[]> => {
+  const debugStackFrames = getOwnerStackFromDebugStacks(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
+    const selfFrame: StackFrame = getDefinitionFrameFromOwnedChild(fiber) ?? {};
+    selfFrame.functionName = getDisplayName(fiber.type) ?? selfFrame.functionName;
+    const symbolicatedFrames = await symbolicateStack(
+      [selfFrame, ...debugStackFrames],
+      shouldCache,
+      fetchFunction,
+    );
+    const hasLocatableOwnerFrame = symbolicatedFrames.some(
+      (stackFrame, frameIndex) => frameIndex > 0 && isLocatableFrame(stackFrame),
+    );
+    if (hasLocatableOwnerFrame) {
+      return symbolicatedFrames;
+    }
+  }
+
+  return getParentStack(fiber, shouldCache, fetchFunction);
+};