bippy 0.6.1-dev.d7876ea → 0.6.1-dev.f9a65c0

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

@@ -1,8 +1,29 @@
-import { Fiber } from "../types.js";
+import type { Fiber } from "../react-internals/index.js";
 import { getDisplayName } from "../core.js";
-import { getParentStack } from "./owner-stack.js";
-import { getSourceFromSourceMap, getSourceMap } from "./symbolication.js";
-import { StackFrame } from "./parse-stack.js";
+import { getDefinitionFrameFromOwnedChild, getRawParentStack } from "./owner-stack.js";
+import {
+  getSourceContentFromSourceMap,
+  getSourceFromSourceMap,
+  getSourceMap,
+  type SourceFetch,
+} from "./symbolication.js";
+import type { StackFrame } from "./parse-stack.js";
+
+const COMPONENT_DECLARATION_PATTERNS = [
+  /(?:^|export\s+)(?:const|let|var)\s+(\w+)\s*=/,
+  /(?:^|export\s+)function\s+(\w+)/,
+  /(?:^|export\s+)class\s+(\w+)/,
+];
+
+const findComponentDeclarationOnLine = (line: string): string | null => {
+  for (const pattern of COMPONENT_DECLARATION_PATTERNS) {
+    const match = line.match(pattern);
+    if (match?.[1]) return match[1];
+  }
+  return null;
+};
+
+const MAX_DECLARATION_LINE_DISTANCE = 5;
 
 const extractComponentNameFromSource = (
   sourceContent: string,
@@ -15,27 +36,16 @@ const extractComponentNameFromSource = (
     return null;
   }
 
-  const startLine = Math.max(0, targetLineIndex - 5);
-  const endLine = Math.min(lines.length, targetLineIndex + 5);
-  const contextLines = lines.slice(startLine, endLine).join("\n");
-
-  const arrowFunctionPattern = /(?:^|export\s+)(?:const|let|var)\s+(\w+)\s*=/m;
-  const functionPattern = /(?:^|export\s+)function\s+(\w+)/m;
-  const classPattern = /(?:^|export\s+)class\s+(\w+)/m;
-
-  const arrowMatch = contextLines.match(arrowFunctionPattern);
-  if (arrowMatch?.[1]) {
-    return arrowMatch[1];
-  }
-
-  const functionMatch = contextLines.match(functionPattern);
-  if (functionMatch?.[1]) {
-    return functionMatch[1];
-  }
-
-  const classMatch = contextLines.match(classPattern);
-  if (classMatch?.[1]) {
-    return classMatch[1];
+  for (let lineDistance = 0; lineDistance <= MAX_DECLARATION_LINE_DISTANCE; lineDistance++) {
+    const lineIndexes =
+      lineDistance === 0
+        ? [targetLineIndex]
+        : [targetLineIndex - lineDistance, targetLineIndex + lineDistance];
+    for (const lineIndex of lineIndexes) {
+      if (lineIndex < 0 || lineIndex >= lines.length) continue;
+      const declarationName = findComponentDeclarationOnLine(lines[lineIndex]);
+      if (declarationName) return declarationName;
+    }
   }
 
   return null;
@@ -44,10 +54,11 @@ const extractComponentNameFromSource = (
 export const getDisplayNameFromSource = async (
   fiber: Fiber,
   cache = true,
-  fetchFn?: (url: string) => Promise<Response>,
+  fetchFn?: SourceFetch,
 ): Promise<string | null> => {
-  const parentStackFrames = await getParentStack(fiber, cache, fetchFn);
-  const stackFrame = parentStackFrames.filter((innerFrame) => innerFrame.fileName)[0];
+  const stackFrame =
+    getDefinitionFrameFromOwnedChild(fiber) ??
+    getRawParentStack(fiber).find((innerFrame) => innerFrame.fileName);
 
   if (!stackFrame?.fileName) {
     return getDisplayName(fiber.type);
@@ -73,21 +84,14 @@ export const getDisplayNameFromSource = async (
     return getDisplayName(fiber.type);
   }
 
-  if (!bundleSourceMap.sourcesContent) {
-    return getDisplayName(fiber.type);
-  }
-
-  const sourceIndex = bundleSourceMap.sources.indexOf(source.fileName);
-  if (sourceIndex === -1 || !bundleSourceMap.sourcesContent[sourceIndex]) {
-    return getDisplayName(fiber.type);
-  }
-
-  const sourceContent = bundleSourceMap.sourcesContent[sourceIndex];
-  const extractedName = extractComponentNameFromSource(sourceContent, source.lineNumber);
+  const sourceContent = getSourceContentFromSourceMap(bundleSourceMap, source.fileName);
+  const extractedName = sourceContent
+    ? extractComponentNameFromSource(sourceContent, source.lineNumber)
+    : null;
 
   if (extractedName) {
     return extractedName;
   }
 
-  return getDisplayName(fiber.type);
+  return source.functionName ?? getDisplayName(fiber.type);
 };

package/src/source/get-source.ts

@@ -1,6 +1,7 @@
-import { Fiber } from "../types.js";
+import type { Fiber } from "../react-internals/index.js";
+import { getDisplayName } from "../core.js";
 
-import { FiberSource } from "./types.js";
+import type { FiberSource } from "./types.js";
 import {
   SCHEME_REGEX,
   INTERNAL_SCHEME_PREFIXES,
@@ -12,8 +13,13 @@ import {
 } from "./constants.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";
+import { parseStack, type StackFrame } from "./parse-stack.js";
+import {
+  getSourceFromSourceMapByFunctionName,
+  getSourceMap,
+  symbolicateStack,
+  type SourceFetch,
+} from "./symbolication.js";
 
 export const hasDebugSource = (
   fiber: Fiber,
@@ -26,10 +32,8 @@ export const hasDebugSource = (
   }
   return (
     typeof debugSource === "object" &&
-    debugSource !== null &&
-    "fileName" in debugSource &&
     typeof debugSource.fileName === "string" &&
-    "lineNumber" in debugSource &&
+    debugSource.fileName !== "(native)" &&
     typeof debugSource.lineNumber === "number"
   );
 };
@@ -63,6 +67,30 @@ const getUsageFrameFromDebugStack = (fiber: Fiber): StackFrame | null => {
   return null;
 };
 
+const getSourceByComponentName = async (
+  fiber: Fiber,
+  cache: boolean,
+  fetchFn: SourceFetch | undefined,
+): Promise<FiberSource | null> => {
+  const functionName = getDisplayName(fiber.type);
+  if (!functionName) return null;
+
+  const runtimeStackFrames = parseStack(new Error().stack ?? "");
+  const visitedFileNames = new Set<string>();
+  for (const stackFrame of runtimeStackFrames) {
+    const fileName = stackFrame.fileName;
+    if (!fileName || visitedFileNames.has(fileName)) {
+      continue;
+    }
+    visitedFileNames.add(fileName);
+    const sourceMap = await getSourceMap(fileName, cache, fetchFn);
+    if (!sourceMap) continue;
+    const source = getSourceFromSourceMapByFunctionName(sourceMap, functionName);
+    if (source && !source.isIgnoreListed) return toFiberSource(source);
+  }
+  return null;
+};
+
 /**
  * Returns the source of where the component is used. Available only in dev, for composite {@link Fiber}s.
  *
@@ -92,11 +120,10 @@ const getUsageFrameFromDebugStack = (fiber: Fiber): StackFrame | null => {
 export const getSource = async (
   fiber: Fiber,
   cache = true,
-  fetchFn?: (url: string) => Promise<Response>,
+  fetchFn?: SourceFetch,
 ): Promise<FiberSource | null> => {
   if (hasDebugSource(fiber)) {
-    const debugSource = fiber._debugSource;
-    return debugSource || null;
+    return fiber._debugSource;
   }
 
   const debugStackFrame =
@@ -115,16 +142,11 @@ export const getSource = async (
       return toFiberSource(stackFrame);
     }
   }
-  return null;
+  return getSourceByComponentName(fiber, cache, fetchFn);
 };
 
 const getPathSegmentCount = (path: string): number => path.split("/").filter(Boolean).length;
 
-const getFirstPathSegment = (path: string): string | null => {
-  const segments = path.split("/").filter(Boolean);
-  return segments[0] ?? null;
-};
-
 const stripSingleBasePathPrefix = (path: string): string => {
   const firstSlashIndex = path.indexOf("/", 1);
   if (firstSlashIndex === -1) {
@@ -141,15 +163,12 @@ const stripSingleBasePathPrefix = (path: string): string => {
     return path;
   }
 
-  if (getPathSegmentCount(remainderPath) < 2) {
-    return path;
-  }
-
-  const firstRemainderSegment = getFirstPathSegment(remainderPath);
-  if (!firstRemainderSegment) {
+  const remainderSegments = remainderPath.split("/").filter(Boolean);
+  if (remainderSegments.length < 2) {
     return path;
   }
 
+  const firstRemainderSegment = remainderSegments[0];
   if (firstRemainderSegment.startsWith("@")) {
     return path;
   }
@@ -180,9 +199,6 @@ export const normalizeFileName = (fileName: string): string => {
       const parsedUrl = new URL(normalizedFileName);
       normalizedFileName = parsedUrl.pathname;
     } catch {}
-  }
-
-  if (isHttpUrl) {
     normalizedFileName = stripSingleBasePathPrefix(normalizedFileName);
   }
 
@@ -215,7 +231,7 @@ export const normalizeFileName = (fileName: string): string => {
     }
   }
 
-  if (!isWindowsDrivePath && SCHEME_REGEX.test(normalizedFileName)) {
+  if (!isWindowsDrivePath) {
     const schemeMatch = normalizedFileName.match(SCHEME_REGEX);
     if (schemeMatch) {
       normalizedFileName = normalizedFileName.slice(schemeMatch[0].length);

package/src/source/index.ts

@@ -1,7 +1,9 @@
 export { formatOwnerStack, getOwnerStack, getParentStack, hasDebugStack } from "./owner-stack.js";
 export { getSource, isSourceFile, normalizeFileName } from "./get-source.js";
 export {
+  getSourceContentFromSourceMap,
   getSourceFromSourceMap,
+  getSourceFromSourceMapByFunctionName,
   getSourceMap,
   symbolicateStack,
   type DecodedSourceMapSection,

package/src/source/inspect-hooks.ts

@@ -4,15 +4,19 @@ import type {
   MemoizedState,
   ReactContext,
   RendererDispatcherRef,
-} from "../types.js";
+} from "../react-internals/index.js";
 import {
   BippyHookInspectionError,
   BippyHookRenderError,
   BippyUnsupportedHookError,
 } from "../errors.js";
-import { getReactWorkTagsForFiber } from "../react-internals.js";
+import { getReactWorkTagsForFiber } from "../react-internals/index.js";
 import { parseStack, type StackFrame } from "./parse-stack.js";
-import { getRDTHook, _renderers } from "../rdt-hook.js";
+import {
+  getRendererDispatcherRefs,
+  readDispatcher,
+  writeDispatcher,
+} from "./renderer-dispatchers.js";
 
 const REACT_CONTEXT_TYPE = Symbol.for("react.context");
 const REACT_MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel");
@@ -77,7 +81,7 @@ let currentThenableIndex = 0;
 let currentThenableState: unknown[] | null = null;
 
 const SuspenseException: unknown = new Error(
-  "Suspense Exception: This is not a real error! It's an implementation detail of `use` to interrupt the current render.",
+  "Suspense interrupted this render. This error is an internal implementation detail of `use`.",
 );
 
 const parseErrorStack = (error: Error): StackFrame[] =>
@@ -89,28 +93,31 @@ const nextHook = (): MemoizedState | null => {
   return hook;
 };
 
-const isObjectRecord = (value: unknown): value is Record<string, unknown> =>
-  typeof value === "object" && value !== null;
-
 const isInspectableThenable = (value: unknown): value is InspectableThenable =>
-  isObjectRecord(value) && typeof value.then === "function";
+  typeof value === "object" &&
+  value !== null &&
+  "then" in value &&
+  typeof value.then === "function";
 
 const isInspectableRef = (value: unknown): value is InspectableRef =>
-  isObjectRecord(value) && "current" in value;
+  typeof value === "object" && value !== null && "current" in value;
 
 const isReactContext = (value: unknown): value is ReactContext<unknown> =>
-  isObjectRecord(value) && "_currentValue" in value;
+  typeof value === "object" && value !== null && "_currentValue" in value;
 
 const isContextDependency = (value: unknown): value is ContextDependency<unknown> =>
-  isObjectRecord(value) && "context" in value && "next" in value;
+  typeof value === "object" && value !== null && "context" in value && "next" in value;
 
 const isForwardRefRenderType = (value: unknown): value is ForwardRefRenderType =>
-  isObjectRecord(value) && typeof value.render === "function";
+  typeof value === "object" &&
+  value !== null &&
+  "render" in value &&
+  typeof value.render === "function";
 
 const readContext = (context: InspectableReactContext): unknown => {
   if (currentFiber === null) return context._currentValue;
   if (currentContextDependency === null) {
-    throw new BippyHookInspectionError("Context reads do not line up with context dependencies.");
+    throw new BippyHookInspectionError("Context reads don’t match context dependencies.");
   }
   if (Object.hasOwn(currentContextDependency, "memoizedValue")) {
     const value = currentContextDependency.memoizedValue;
@@ -120,27 +127,6 @@ const readContext = (context: InspectableReactContext): unknown => {
   return context._currentValue;
 };
 
-const getDispatcherRef = (): RendererDispatcherRef | null => {
-  const rdtHook = getRDTHook();
-  const allRenderers = [..._renderers, ...rdtHook.renderers.values()];
-  for (const renderer of allRenderers) {
-    const ref = renderer.currentDispatcherRef;
-    if (ref) return ref;
-  }
-  return null;
-};
-
-const getDispatcherFromRef = (ref: RendererDispatcherRef): unknown =>
-  "H" in ref ? ref.H : ref.current;
-
-const setDispatcherOnRef = (ref: RendererDispatcherRef, dispatcher: unknown): void => {
-  if ("H" in ref) {
-    ref.H = dispatcher;
-  } else {
-    ref.current = dispatcher;
-  }
-};
-
 const pushHookLogEntry = (
   primitive: string,
   value: unknown,
@@ -157,7 +143,7 @@ const pushHookLogEntry = (
 };
 
 const dispatcherUse = (usable: unknown): unknown => {
-  if (isObjectRecord(usable)) {
+  if (typeof usable === "object" && usable !== null) {
     if (isInspectableThenable(usable)) {
       const cachedThenable =
         currentThenableState !== null && currentThenableIndex < currentThenableState.length
@@ -176,7 +162,7 @@ const dispatcherUse = (usable: unknown): unknown => {
       pushHookLogEntry("Unresolved", thenable, "Use");
       throw SuspenseException;
     }
-    if (usable.$$typeof === REACT_CONTEXT_TYPE && "_currentValue" in usable) {
+    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,
@@ -186,7 +172,7 @@ const dispatcherUse = (usable: unknown): unknown => {
       return value;
     }
   }
-  throw new BippyHookInspectionError("An unsupported type was passed to use(): " + String(usable));
+  throw new BippyHookInspectionError("use() received an unsupported value: " + String(usable));
 };
 
 const dispatcherUseContext = (context: InspectableReactContext): unknown => {
@@ -251,10 +237,7 @@ const dispatcherUseEffect = (create: () => void): void => {
 
 const dispatcherUseImperativeHandle = (ref: unknown): void => {
   nextHook();
-  let instance: unknown;
-  if (ref !== null && typeof ref === "object" && "current" in ref) {
-    instance = ref.current;
-  }
+  const instance = isInspectableRef(ref) ? ref.current : undefined;
   pushHookLogEntry("ImperativeHandle", instance, "ImperativeHandle");
 };
 
@@ -380,15 +363,8 @@ const createActionStateDispatcher =
     const hook = nextHook();
     nextHook();
     nextHook();
-    const stackError = new Error();
     const { value, error } = inspectActionStateHook(hook, initialState);
-    hookLog.push({
-      displayName: null,
-      primitive,
-      stackError,
-      value,
-      dispatcherHookName: primitive,
-    });
+    pushHookLogEntry(primitive, value, primitive);
     if (error !== null) throw error;
     return [value, () => {}, false];
   };
@@ -436,15 +412,12 @@ const dispatcher = {
   useEffectEvent: dispatcherUseEffectEvent,
 };
 
-const dispatcherProxy =
-  typeof Proxy === "undefined"
-    ? dispatcher
-    : new Proxy(dispatcher, {
-        get(target, propertyName: string) {
-          if (Object.hasOwn(target, propertyName)) return Reflect.get(target, propertyName);
-          throw new BippyUnsupportedHookError("Missing method in Dispatcher: " + propertyName);
-        },
-      });
+const dispatcherProxy = new Proxy(dispatcher, {
+  get(target, propertyName: string) {
+    if (Object.hasOwn(target, propertyName)) return Reflect.get(target, propertyName);
+    throw new BippyUnsupportedHookError("The React dispatcher is missing method " + propertyName);
+  },
+});
 
 const getPrimitiveStackCache = (): Map<string, StackFrame[]> => {
   if (primitiveStackCache !== null) return primitiveStackCache;
@@ -457,38 +430,34 @@ const getPrimitiveStackCache = (): Map<string, StackFrame[]> => {
     dispatcher.useState(null);
     dispatcher.useReducer((state: unknown) => state, null);
     dispatcher.useRef(null);
-    if (typeof dispatcher.useCacheRefresh === "function") dispatcher.useCacheRefresh();
+    dispatcher.useCacheRefresh();
     dispatcher.useLayoutEffect(() => {});
     dispatcher.useInsertionEffect(() => {});
     dispatcher.useEffect(() => {});
-    dispatcher.useImperativeHandle(undefined, () => null);
+    dispatcher.useImperativeHandle(undefined);
     dispatcher.useDebugValue(null);
     dispatcher.useCallback(() => {});
     dispatcher.useTransition();
     dispatcher.useSyncExternalStore(
       () => () => {},
       () => null,
-      () => null,
     );
     dispatcher.useDeferredValue(null);
     dispatcher.useMemo(() => null);
-    dispatcher.useOptimistic(null, (state: unknown) => state);
+    dispatcher.useOptimistic(null);
     dispatcher.useFormState((state: unknown) => state, null);
     dispatcher.useActionState((state: unknown) => state, null);
     dispatcher.useHostTransitionStatus();
-    if (typeof dispatcher.useMemoCache === "function") dispatcher.useMemoCache(0);
-    if (typeof dispatcher.use === "function") {
-      dispatcher.use({ $$typeof: REACT_CONTEXT_TYPE, _currentValue: null });
-      const fulfilledPromise = Promise.resolve(null);
-      Reflect.set(fulfilledPromise, "status", "fulfilled");
-      Reflect.set(fulfilledPromise, "value", null);
-      dispatcher.use(fulfilledPromise);
-      try {
-        dispatcher.use(new Promise<never>(() => {}));
-      } catch {}
-    }
+    dispatcher.use({ $$typeof: REACT_CONTEXT_TYPE, _currentValue: null });
+    const fulfilledPromise = Promise.resolve(null);
+    Reflect.set(fulfilledPromise, "status", "fulfilled");
+    Reflect.set(fulfilledPromise, "value", null);
+    dispatcher.use(fulfilledPromise);
+    try {
+      dispatcher.use(new Promise<never>(() => {}));
+    } catch {}
     dispatcher.useId();
-    if (typeof dispatcher.useEffectEvent === "function") dispatcher.useEffectEvent(() => {});
+    dispatcher.useEffectEvent(() => {});
   } finally {
     capturedHookLog = hookLog;
     hookLog = [];
@@ -719,7 +688,10 @@ const setupContexts = (contextMap: Map<ReactContext<unknown>, unknown>, fiber: F
   while (current) {
     if (current.tag === getReactWorkTagsForFiber(current).ContextProvider) {
       const providerType = current.type;
-      const nestedContext = isObjectRecord(providerType) ? providerType._context : undefined;
+      const nestedContext =
+        typeof providerType === "object" && providerType !== null && "_context" in providerType
+          ? providerType._context
+          : undefined;
       const context = isReactContext(nestedContext)
         ? nestedContext
         : isReactContext(providerType)
@@ -743,7 +715,7 @@ const restoreContexts = (contextMap: Map<ReactContext<unknown>, unknown>): void
 const handleRenderFunctionError = (error: unknown): void => {
   if (error === SuspenseException) return;
   if (error instanceof BippyUnsupportedHookError) throw error;
-  throw new BippyHookRenderError("Error rendering inspected component", error);
+  throw new BippyHookRenderError("Bippy couldn’t render the inspected component", error);
 };
 
 const resolveDefaultProps = (
@@ -754,13 +726,14 @@ const resolveDefaultProps = (
     component &&
     typeof component === "object" &&
     "defaultProps" in component &&
-    isObjectRecord(component.defaultProps)
+    typeof component.defaultProps === "object" &&
+    component.defaultProps !== null
   ) {
     const props = { ...baseProps };
     const defaultProps = component.defaultProps;
-    for (const propName in defaultProps) {
+    for (const [propName, value] of Object.entries(defaultProps)) {
       if (props[propName] === undefined) {
-        props[propName] = defaultProps[propName];
+        props[propName] = value;
       }
     }
     return props;
@@ -791,8 +764,8 @@ const performDispatcherInspection = (
   dispatcherRef: RendererDispatcherRef,
   renderFn: () => void,
 ): HooksTree => {
-  const previousDispatcher = getDispatcherFromRef(dispatcherRef);
-  setDispatcherOnRef(dispatcherRef, dispatcherProxy);
+  const previousDispatcher = readDispatcher(dispatcherRef);
+  writeDispatcher(dispatcherRef, dispatcherProxy);
 
   let capturedHookLog: HookLogEntry[] = [];
   let ancestorStackError: Error | undefined;
@@ -805,7 +778,7 @@ const performDispatcherInspection = (
   } finally {
     capturedHookLog = hookLog;
     hookLog = [];
-    setDispatcherOnRef(dispatcherRef, previousDispatcher);
+    writeDispatcher(dispatcherRef, previousDispatcher);
   }
 
   const rootStack = ancestorStackError !== undefined ? parseErrorStack(ancestorStackError) : [];
@@ -813,33 +786,40 @@ const performDispatcherInspection = (
 };
 
 const requireDispatcherRef = (): RendererDispatcherRef => {
-  const dispatcherRef = getDispatcherRef();
+  const dispatcherRef = getRendererDispatcherRefs()[0];
   if (!dispatcherRef) {
     throw new BippyHookInspectionError(
-      "No React renderer found. Make sure React is loaded and bippy's hook is installed.",
+      "Bippy couldn’t find a React renderer. Load React and install Bippy’s hook.",
     );
   }
   return dispatcherRef;
 };
 
 const resolveContextDependency = (fiber: Fiber): void => {
+  const legacyDependenciesKey = ["dependencies_old", "dependencies_new"].find((key) =>
+    Object.hasOwn(fiber, key),
+  );
   if (Object.hasOwn(fiber, "dependencies")) {
     const dependencies = fiber.dependencies;
     currentContextDependency = dependencies !== null ? dependencies.firstContext : null;
-  } else if (Object.hasOwn(fiber, "dependencies_old")) {
-    const dependencies: unknown = Reflect.get(fiber, "dependencies_old");
-    const firstContext = isObjectRecord(dependencies) ? dependencies.firstContext : null;
-    currentContextDependency = isContextDependency(firstContext) ? firstContext : null;
-  } else if (Object.hasOwn(fiber, "dependencies_new")) {
-    const dependencies: unknown = Reflect.get(fiber, "dependencies_new");
-    const firstContext = isObjectRecord(dependencies) ? dependencies.firstContext : null;
+  } else if (legacyDependenciesKey) {
+    const dependencies: unknown = Reflect.get(fiber, legacyDependenciesKey);
+    const firstContext =
+      typeof dependencies === "object" && dependencies !== null && "firstContext" in dependencies
+        ? dependencies.firstContext
+        : null;
     currentContextDependency = isContextDependency(firstContext) ? firstContext : null;
   } else if (Object.hasOwn(fiber, "contextDependencies")) {
     const contextDependencies: unknown = Reflect.get(fiber, "contextDependencies");
-    const firstContext = isObjectRecord(contextDependencies) ? contextDependencies.first : null;
+    const firstContext =
+      typeof contextDependencies === "object" &&
+      contextDependencies !== null &&
+      "first" in contextDependencies
+        ? contextDependencies.first
+        : null;
     currentContextDependency = isContextDependency(firstContext) ? firstContext : null;
   } else {
-    throw new BippyHookInspectionError("Unsupported React version.");
+    throw new BippyHookInspectionError("Bippy doesn’t support this React version.");
   }
 };
 
@@ -852,9 +832,7 @@ export const getFiberHooks = (fiber: Fiber): HooksTree => {
     fiber.tag !== workTags.SimpleMemoComponent &&
     fiber.tag !== workTags.ForwardRef
   ) {
-    throw new BippyHookInspectionError(
-      "Unknown Fiber. Needs to be a function component to inspect hooks.",
-    );
+    throw new BippyHookInspectionError("Hook inspection requires a function component Fiber.");
   }
 
   getPrimitiveStackCache();