bippy 0.6.1-dev.61475ed → 0.6.1-dev.d7876ea

package/src/core.ts

@@ -1,5 +1,4 @@
-// [!!!] IMPORTANT: do not import React in this file
-// since it will be executed before the react devtools hook is created
+// React must remain a type-only import because this module loads immediately after the DevTools hook.
 
 import type * as React from "react";
 
@@ -7,65 +6,91 @@ import type {
   ContextDependency,
   Fiber,
   FiberRoot,
+  HostFiber,
   MemoizedState,
   ReactDevToolsGlobalHook,
   ReactRenderer,
 } from "./types.js";
 
+import { BippyInstrumentationError, BippyReactDevToolsError, runWithBippyError } from "./errors.js";
+
 import {
   _onActiveListeners,
   BIPPY_INSTRUMENTATION_STRING,
   getRDTHook,
   hasRDTHook,
-  isReactRefresh,
   isRealReactDevtools,
+  onRDTHookReplace,
   onRendererInject,
 } from "./rdt-hook.js";
+import {
+  getReactWorkTagsForFiber,
+  MutationMask,
+  ReactBuildType,
+  ReactFiberFlags,
+  ReactSymbols,
+  setReactWorkTagsForFiber,
+} from "./react-internals.js";
 import { toUnsubscribe, type Unsubscribe } from "./unsubscribe.js";
 
-// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactWorkTags.js
-export const FunctionComponentTag = 0;
-export const ClassComponentTag = 1;
-export const HostRootTag = 3;
-export const HostPortalTag = 4;
-export const HostComponentTag = 5;
-export const HostTextTag = 6;
-export const FragmentTag = 7;
-export const ContextConsumerTag = 9;
-export const ForwardRefTag = 11;
-export const SuspenseComponentTag = 13;
-export const MemoComponentTag = 14;
-export const SimpleMemoComponentTag = 15;
-export const LazyComponentTag = 16;
-export const DehydratedSuspenseComponentTag = 18;
-export const SuspenseListComponentTag = 19;
-export const OffscreenComponentTag = 22;
-export const LegacyHiddenComponentTag = 23;
-export const HostHoistableTag = 26;
-export const HostSingletonTag = 27;
-export const ActivityComponentTag = 28;
-export const ViewTransitionComponentTag = 30;
-
-export const CONCURRENT_MODE_NUMBER = 0xeacf;
-export const ELEMENT_TYPE_SYMBOL_STRING = "Symbol(react.element)";
-export const TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING = "Symbol(react.transitional.element)";
-export const CONCURRENT_MODE_SYMBOL_STRING = "Symbol(react.concurrent_mode)";
-export const DEPRECATED_ASYNC_MODE_SYMBOL_STRING = "Symbol(react.async_mode)";
-export const CONCURRENT_MODE_SYMBOL_DESCRIPTION = "react.concurrent_mode";
-export const DEPRECATED_ASYNC_MODE_SYMBOL_DESCRIPTION = "react.async_mode";
-
-// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberFlags.js
-const PerformedWork = 0b1;
-const Placement = 0b10;
-const Hydrating = 0b1000000000000;
-const Update = 0b100;
-const Cloned = 0b1000;
-const ChildDeletion = 0b10000;
-const ContentReset = 0b100000;
-const Snapshot = 0b10000000000;
-const Visibility = 0b10000000000000;
-const MutationMask =
-  Placement | Update | ChildDeletion | ContentReset | Hydrating | Visibility | Snapshot;
+export { getReactWorkTags, ReactSymbols } from "./react-internals.js";
+export type { ReactWorkTagMap, ReactWorkTagVersion } from "./react-internals.js";
+export {
+  BippyError,
+  BippyHookInstallationError,
+  BippyHookInspectionError,
+  BippyHookListenerError,
+  BippyHookRenderError,
+  BippyInstrumentationError,
+  BippyReactBuildError,
+  BippyReactDevToolsError,
+  BippySourceMapError,
+  BippyUnsupportedHookError,
+} from "./errors.js";
+
+const isObjectRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null;
+
+const isComponentType = (value: unknown): value is React.ComponentType<unknown> =>
+  typeof value === "function";
+
+const getPropertyValue = (value: object, key: PropertyKey): unknown => {
+  let currentValue: object | null = value;
+  while (currentValue) {
+    const descriptor = Object.getOwnPropertyDescriptor(currentValue, key);
+    if (descriptor) {
+      if ("value" in descriptor) return descriptor.value;
+      return descriptor.get?.call(value);
+    }
+    currentValue = Object.getPrototypeOf(currentValue);
+  }
+  return undefined;
+};
+
+const getTypeName = (value: object): string | null => {
+  const displayName = getPropertyValue(value, "displayName");
+  if (typeof displayName === "string" && displayName) return displayName;
+  const name = getPropertyValue(value, "name");
+  return typeof name === "string" && name ? name : null;
+};
+
+interface FiberSelector {
+  (node: Fiber): boolean | Promise<boolean | void> | void;
+}
+
+export interface FiberTimings {
+  selfTime: number;
+  totalTime: number;
+}
+
+export interface RenderHandler {
+  <State>(fiber: Fiber, phase: RenderPhase, state?: State): unknown;
+}
+
+interface ValueWrite {
+  path: string[];
+  value: unknown;
+}
 
 /**
  * Returns `true` if object is a React Element.
@@ -74,10 +99,9 @@ const MutationMask =
  */
 export const isValidElement = (element: unknown): element is React.ReactElement =>
   typeof element === "object" &&
-  element != null &&
+  element !== null &&
   "$$typeof" in element &&
-  // react 18 uses Symbol.for('react.element'), react 19 uses Symbol.for('react.transitional.element')
-  [ELEMENT_TYPE_SYMBOL_STRING, TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING].includes(
+  [ReactSymbols.LEGACY_ELEMENT_SYMBOL_STRING, ReactSymbols.ELEMENT_SYMBOL_STRING].includes(
     String(element.$$typeof),
   );
 
@@ -86,7 +110,7 @@ export const isValidElement = (element: unknown): element is React.ReactElement
  */
 export const isValidFiber = (fiber: unknown): fiber is Fiber =>
   typeof fiber === "object" &&
-  fiber != null &&
+  fiber !== null &&
   "tag" in fiber &&
   "stateNode" in fiber &&
   "return" in fiber &&
@@ -99,16 +123,16 @@ export const isValidFiber = (fiber: unknown): fiber is Fiber =>
  *
  * @see https://reactnative.dev/architecture/glossary#host-view-tree-and-host-view
  */
-export const isHostFiber = (fiber: Fiber): boolean => {
+export const isHostFiber = (fiber: Fiber): fiber is HostFiber => {
+  const workTags = getReactWorkTagsForFiber(fiber);
   switch (fiber.tag) {
-    case HostComponentTag:
-    // @ts-expect-error: it exists
-    case HostHoistableTag:
-    // @ts-expect-error: it exists
-    case HostSingletonTag:
+    case workTags.HostComponent:
+    case workTags.HostText:
+    case workTags.HostHoistable:
+    case workTags.HostSingleton:
       return true;
     default:
-      return typeof fiber.type === "string";
+      return false;
   }
 };
 
@@ -118,12 +142,13 @@ export const isHostFiber = (fiber: Fiber): boolean => {
  * @see https://reactnative.dev/architecture/glossary#react-composite-components
  */
 export const isCompositeFiber = (fiber: Fiber): boolean => {
+  const workTags = getReactWorkTagsForFiber(fiber);
   switch (fiber.tag) {
-    case ClassComponentTag:
-    case ForwardRefTag:
-    case FunctionComponentTag:
-    case MemoComponentTag:
-    case SimpleMemoComponentTag:
+    case workTags.ClassComponent:
+    case workTags.ForwardRef:
+    case workTags.FunctionComponent:
+    case workTags.MemoComponent:
+    case workTags.SimpleMemoComponent:
       return true;
     default:
       return false;
@@ -230,16 +255,17 @@ export const traverseProps = (
 export const didFiberRender = (fiber: Fiber): boolean => {
   const nextProps = fiber.memoizedProps;
   const prevProps = fiber.alternate?.memoizedProps || {};
-  const flags = fiber.flags ?? (fiber as unknown as { effectTag: number }).effectTag ?? 0;
+  const flags = fiber.flags ?? fiber.effectTag ?? 0;
+  const workTags = getReactWorkTagsForFiber(fiber);
 
   switch (fiber.tag) {
-    case ClassComponentTag:
-    case ContextConsumerTag:
-    case ForwardRefTag:
-    case FunctionComponentTag:
-    case MemoComponentTag:
-    case SimpleMemoComponentTag: {
-      return (flags & PerformedWork) === PerformedWork;
+    case workTags.ClassComponent:
+    case workTags.ContextConsumer:
+    case workTags.ForwardRef:
+    case workTags.FunctionComponent:
+    case workTags.MemoComponent:
+    case workTags.SimpleMemoComponent: {
+      return (flags & ReactFiberFlags.PerformedWork) === ReactFiberFlags.PerformedWork;
     }
     default:
       // Host nodes (DOM, root, etc.)
@@ -257,8 +283,8 @@ export const didFiberRender = (fiber: Fiber): boolean => {
  */
 export const didFiberCommit = (fiber: Fiber): boolean => {
   return Boolean(
-    (fiber.flags & (MutationMask | Cloned)) !== 0 ||
-    (fiber.subtreeFlags & (MutationMask | Cloned)) !== 0,
+    (fiber.flags & (MutationMask | ReactFiberFlags.Cloned)) !== 0 ||
+    (fiber.subtreeFlags & (MutationMask | ReactFiberFlags.Cloned)) !== 0,
   );
 };
 
@@ -297,7 +323,8 @@ export const getFiberStack = (fiber: Fiber): Fiber[] => {
   let currentFiber = fiber;
   while (currentFiber.return) {
     stack.push(currentFiber);
-    currentFiber = currentFiber.return as Fiber;
+    const parentFiber = currentFiber.return;
+    currentFiber = parentFiber;
   }
   return stack;
 };
@@ -306,8 +333,9 @@ export const getFiberStack = (fiber: Fiber): Fiber[] => {
  * Returns `true` if the {@link Fiber} should be filtered out during reconciliation.
  */
 const shouldFilterFiber = (fiber: Fiber): boolean => {
+  const workTags = getReactWorkTagsForFiber(fiber);
   switch (fiber.tag) {
-    case DehydratedSuspenseComponentTag:
+    case workTags.DehydratedSuspenseComponent:
       // TODO: ideally we would show dehydrated Suspense immediately.
       // However, it has some special behavior (like disconnecting
       // an alternate and turning into real Suspense) which breaks DevTools.
@@ -315,13 +343,13 @@ const shouldFilterFiber = (fiber: Fiber): boolean => {
       // https://github.com/bvaughn/react-devtools-experimental/issues/197
       return true;
 
-    case FragmentTag:
-    case HostTextTag:
-    case LegacyHiddenComponentTag:
-    case OffscreenComponentTag:
+    case workTags.Fragment:
+    case workTags.HostText:
+    case workTags.LegacyHiddenComponent:
+    case workTags.OffscreenComponent:
       return true;
 
-    case HostRootTag:
+    case workTags.HostRoot:
       // It is never valid to filter the root element.
       return false;
 
@@ -331,15 +359,15 @@ const shouldFilterFiber = (fiber: Fiber): boolean => {
 
       if (typeof symbolOrNumber === "symbol") {
         return (
-          symbolOrNumber.description === CONCURRENT_MODE_SYMBOL_DESCRIPTION ||
-          symbolOrNumber.description === DEPRECATED_ASYNC_MODE_SYMBOL_DESCRIPTION
+          symbolOrNumber.description === ReactSymbols.CONCURRENT_MODE_SYMBOL_DESCRIPTION ||
+          symbolOrNumber.description === ReactSymbols.DEPRECATED_ASYNC_MODE_SYMBOL_DESCRIPTION
         );
       }
 
       switch (symbolOrNumber) {
-        case CONCURRENT_MODE_NUMBER:
-        case CONCURRENT_MODE_SYMBOL_STRING:
-        case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
+        case ReactSymbols.CONCURRENT_MODE_NUMBER:
+        case ReactSymbols.CONCURRENT_MODE_SYMBOL_STRING:
+        case ReactSymbols.DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
           return true;
 
         default:
@@ -405,7 +433,7 @@ export function traverseFiber(
 ): Promise<Fiber | null>;
 export function traverseFiber(
   fiber: Fiber | null,
-  selector: (node: Fiber) => boolean | Promise<boolean | void> | void,
+  selector: FiberSelector,
   ascending = false,
 ): Fiber | null | Promise<Fiber | null> {
   if (!fiber) return null;
@@ -417,11 +445,7 @@ export function traverseFiber(
 
       let child = ascending ? fiber.return : fiber.child;
       while (child) {
-        const match = await traverseFiberAsync(
-          child,
-          selector as (node: Fiber) => Promise<boolean | void>,
-          ascending,
-        );
+        const match = await traverseFiberAsync(child, selector, ascending);
         if (match) return match;
         child = ascending ? null : child.sibling;
       }
@@ -433,7 +457,7 @@ export function traverseFiber(
 
   let child = ascending ? fiber.return : fiber.child;
   while (child) {
-    const match = traverseFiberSync(child, selector as (node: Fiber) => boolean | void, ascending);
+    const match = traverseFiberSync(child, selector, ascending);
     if (match) return match;
     child = ascending ? null : child.sibling;
   }
@@ -442,11 +466,13 @@ export function traverseFiber(
 
 const traverseFiberSync = (
   fiber: Fiber | null,
-  selector: (node: Fiber) => boolean | void,
+  selector: FiberSelector,
   ascending = false,
 ): Fiber | null => {
   if (!fiber) return null;
-  if (selector(fiber) === true) return fiber;
+  const selection = selector(fiber);
+  if (selection instanceof Promise) return null;
+  if (selection === true) return fiber;
 
   let child = ascending ? fiber.return : fiber.child;
   while (child) {
@@ -460,7 +486,7 @@ const traverseFiberSync = (
 
 const traverseFiberAsync = async (
   fiber: Fiber | null,
-  selector: (node: Fiber) => Promise<boolean | void>,
+  selector: FiberSelector,
   ascending = false,
 ): Promise<Fiber | null> => {
   if (!fiber) return null;
@@ -485,12 +511,12 @@ const traverseFiberAsync = async (
  * console.log(selfTime, totalTime);
  * ```
  */
-export const getTimings = (fiber?: Fiber | null): { selfTime: number; totalTime: number } => {
+export const getTimings = (fiber?: Fiber | null): FiberTimings => {
   const totalTime = fiber?.actualDuration ?? 0;
   let selfTime = totalTime;
   // TODO: calculate a DOM time, which is just host component summed up
   let child = fiber?.child ?? null;
-  while (totalTime > 0 && child != null) {
+  while (totalTime > 0 && child !== null) {
     selfTime -= child.actualDuration ?? 0;
     child = child.sibling;
   }
@@ -501,48 +527,29 @@ export const getTimings = (fiber?: Fiber | null): { selfTime: number; totalTime:
  * Returns `true` if the {@link Fiber} uses React Compiler's memo cache.
  */
 export const hasMemoCache = (fiber: Fiber): boolean => {
-  return Boolean((fiber.updateQueue as unknown as { memoCache: unknown })?.memoCache);
+  return Boolean(fiber.updateQueue?.memoCache);
 };
 
-type FiberType =
-  | React.ComponentType<unknown>
-  | React.ForwardRefExoticComponent<unknown>
-  | React.MemoExoticComponent<React.ComponentType<unknown>>;
-
 /**
  * Returns the type (e.g. component definition) of the {@link Fiber}
  */
 export const getType = (type: unknown): null | React.ComponentType<unknown> => {
-  const currentType = type as FiberType;
-  if (typeof currentType === "function") {
-    return currentType;
-  }
-  if (typeof currentType === "object" && currentType) {
-    // memo / forwardRef case
-    return getType(
-      (currentType as React.MemoExoticComponent<React.ComponentType<unknown>>).type ||
-        (currentType as { render: React.ComponentType<unknown> }).render,
-    );
-  }
-  return null;
+  if (isComponentType(type)) return type;
+  if (!isObjectRecord(type)) return null;
+  return getType(type.type ?? type.render);
 };
 
 /**
  * Returns the display name of the {@link Fiber} type.
  */
 export const getDisplayName = (type: unknown): null | string => {
-  const currentType = type as FiberType;
-  if (typeof currentType === "string") {
-    return currentType;
-  }
-  if (typeof currentType !== "function" && !(typeof currentType === "object" && currentType)) {
-    return null;
-  }
-  const name = currentType.displayName || currentType.name || null;
+  if (typeof type === "string") return type;
+  if ((typeof type !== "function" && typeof type !== "object") || type === null) return null;
+  const name = getTypeName(type);
   if (name) return name;
-  const unwrappedType = getType(currentType);
+  const unwrappedType = getType(type);
   if (!unwrappedType) return null;
-  return unwrappedType.displayName || unwrappedType.name || null;
+  return getTypeName(unwrappedType);
 };
 
 /**
@@ -550,7 +557,10 @@ export const getDisplayName = (type: unknown): null | string => {
  */
 export const detectReactBuildType = (renderer: ReactRenderer): "development" | "production" => {
   try {
-    if (typeof renderer.version === "string" && renderer.bundleType > 0) {
+    if (
+      typeof renderer.version === "string" &&
+      renderer.bundleType === ReactBuildType.Development
+    ) {
       return "development";
     }
   } catch {}
@@ -562,11 +572,7 @@ export const detectReactBuildType = (renderer: ReactRenderer): "development" | "
  */
 export const isInstrumentationActive = (): boolean => {
   const rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-  return (
-    Boolean(rdtHook?._instrumentationIsActive) ||
-    isRealReactDevtools(rdtHook) ||
-    isReactRefresh(rdtHook)
-  );
+  return Boolean(rdtHook?._instrumentationIsActive) || isRealReactDevtools(rdtHook);
 };
 
 export const _fiberRoots = new Set<FiberRoot>();
@@ -589,30 +595,25 @@ export const getLatestFiber = (fiber: Fiber): Fiber => {
   return fiber;
 };
 
-export type RenderHandler = <S>(fiber: Fiber, phase: RenderPhase, state?: S) => unknown;
-
 export type RenderPhase = "mount" | "unmount" | "update";
 
-let fiberId = 0;
+let nextFiberId = 0;
 const fiberIdMap = new WeakMap<Fiber, number>();
 
-export const setFiberId = (fiber: Fiber, id: number = fiberId++): void => {
-  fiberIdMap.set(fiber, id);
+export const setFiberId = (fiber: Fiber, fiberId: number = nextFiberId++): void => {
+  fiberIdMap.set(fiber, fiberId);
 };
 
-// react fibers are double buffered, so the alternate fiber may
-// be switched to the current fiber and vice versa.
-// fiber === fiber.alternate.alternate
 export const getFiberId = (fiber: Fiber): number => {
-  let id = fiberIdMap.get(fiber);
-  if (id === undefined && fiber.alternate) {
-    id = fiberIdMap.get(fiber.alternate);
+  let currentFiberId = fiberIdMap.get(fiber);
+  if (currentFiberId === undefined && fiber.alternate) {
+    currentFiberId = fiberIdMap.get(fiber.alternate);
   }
-  if (id === undefined) {
-    id = fiberId++;
-    setFiberId(fiber, id);
+  if (currentFiberId === undefined) {
+    currentFiberId = nextFiberId++;
+    setFiberId(fiber, currentFiberId);
   }
-  return id;
+  return currentFiberId;
 };
 
 const mountFiberRecursively = (
@@ -622,7 +623,7 @@ const mountFiberRecursively = (
 ): void => {
   let fiber: Fiber | null = firstChild;
 
-  while (fiber != null) {
+  while (fiber !== null) {
     if (!fiberIdMap.has(fiber)) {
       getFiberId(fiber);
     }
@@ -631,7 +632,7 @@ const mountFiberRecursively = (
       onRender(fiber, "mount");
     }
 
-    if (fiber.tag === SuspenseComponentTag) {
+    if (fiber.tag === getReactWorkTagsForFiber(fiber).SuspenseComponent) {
       const isTimedOut = fiber.memoizedState !== null;
       if (isTimedOut) {
         // Special case: if Suspense mounts in a timed-out state,
@@ -646,18 +647,12 @@ const mountFiberRecursively = (
           }
         }
       } else {
-        let primaryChild: Fiber | null = null;
-        const areSuspenseChildrenConditionallyWrapped = (OffscreenComponentTag as number) === -1;
-        if (areSuspenseChildrenConditionallyWrapped) {
-          primaryChild = fiber.child;
-        } else if (fiber.child !== null) {
-          primaryChild = fiber.child.child;
-        }
+        const primaryChild = fiber.child?.child ?? null;
         if (primaryChild !== null) {
           mountFiberRecursively(onRender, primaryChild, false);
         }
       }
-    } else if (fiber.child != null) {
+    } else if (fiber.child !== null) {
       mountFiberRecursively(onRender, fiber.child, true);
     }
     fiber = traverseSiblings ? fiber.sibling : null;
@@ -678,7 +673,7 @@ const updateFiberRecursively = (
     getFiberId(prevFiber);
   }
 
-  const isSuspense = nextFiber.tag === SuspenseComponentTag;
+  const isSuspense = nextFiber.tag === getReactWorkTagsForFiber(nextFiber).SuspenseComponent;
 
   const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
   if (shouldIncludeInTree && didFiberRender(nextFiber)) {
@@ -765,7 +760,7 @@ const updateFiberRecursively = (
 };
 
 const unmountFiber = (onRender: RenderHandler, fiber: Fiber): void => {
-  const isRoot = fiber.tag === HostRootTag;
+  const isRoot = fiber.tag === getReactWorkTagsForFiber(fiber).HostRoot;
 
   if (isRoot || !shouldFilterFiber(fiber)) {
     onRender(fiber, "unmount");
@@ -774,7 +769,8 @@ const unmountFiber = (onRender: RenderHandler, fiber: Fiber): void => {
 
 const unmountFiberChildrenRecursively = (onRender: RenderHandler, fiber: Fiber): void => {
   // We might meet a nested Suspense on our way.
-  const isTimedOutSuspense = fiber.tag === SuspenseComponentTag && fiber.memoizedState !== null;
+  const isTimedOutSuspense =
+    fiber.tag === getReactWorkTagsForFiber(fiber).SuspenseComponent && fiber.memoizedState !== null;
   let child = fiber.child;
 
   if (isTimedOutSuspense) {
@@ -831,13 +827,15 @@ export const traverseRenderedFibers = (root: FiberRoot, onRender: RenderHandler)
   } else if (prevFiber !== null) {
     const wasMounted =
       prevFiber &&
-      prevFiber.memoizedState != null &&
-      prevFiber.memoizedState.element != null &&
+      prevFiber.memoizedState !== null &&
+      prevFiber.memoizedState.element !== null &&
+      prevFiber.memoizedState.element !== undefined &&
       // A dehydrated root is not considered mounted
       prevFiber.memoizedState.isDehydrated !== true;
     const isMounted =
-      fiber.memoizedState != null &&
-      fiber.memoizedState.element != null &&
+      fiber.memoizedState !== null &&
+      fiber.memoizedState.element !== null &&
+      fiber.memoizedState.element !== undefined &&
       // A dehydrated root is not considered mounted
       fiber.memoizedState.isDehydrated !== true;
 
@@ -859,16 +857,15 @@ const overrideRenderers = new Set<ReactRenderer>();
 let areOverrideRenderersWired = false;
 
 const wireOverrideRenderers = (): void => {
-  if (areOverrideRenderersWired) return;
   if (!hasRDTHook()) return;
   const rdtHook = getRDTHook();
-  if (!rdtHook?.renderers) return;
-  areOverrideRenderersWired = true;
 
-  ensureHookDispatchesToListeners(rdtHook);
+  setHookEventDispatchers(rdtHook);
   for (const renderer of rdtHook.renderers.values()) {
     overrideRenderers.add(renderer);
   }
+  if (areOverrideRenderersWired) return;
+  areOverrideRenderersWired = true;
   onRendererInject((renderer) => {
     overrideRenderers.add(renderer);
   });
@@ -882,12 +879,9 @@ const getRootRenderer = (fiber: Fiber): ReactRenderer | null => {
   }
   const rendererId = rootRendererIds.get(hostRootFiber.stateNode);
   if (rendererId === undefined) return null;
-  return getRDTHook().renderers?.get(rendererId) ?? null;
+  return getRDTHook().renderers.get(rendererId) ?? null;
 };
 
-// dispatch to the renderer that owns the fiber's root when known; renderers
-// that never committed through bippy's hook patch fall back to "try all",
-// which matches the pre-ownership behavior for single-renderer apps
 const resolveOverrideRenderers = (fiber: Fiber): ReactRenderer[] => {
   wireOverrideRenderers();
   const rootRenderer = getRootRenderer(fiber);
@@ -913,15 +907,14 @@ const getHookStateDispatch = (
   hookIndex: number,
 ): ((value: unknown) => void) | null => {
   let hookState = fiber.memoizedState;
-  for (let i = 0; i < hookIndex; i++) {
+  for (let currentHookIndex = 0; currentHookIndex < hookIndex; currentHookIndex++) {
     if (!hookState?.next) return null;
     hookState = hookState.next;
   }
   const queue = hookState?.queue;
-  if (isPOJO(queue) && typeof queue.dispatch === "function") {
-    return queue.dispatch as (value: unknown) => void;
-  }
-  return null;
+  if (!isPOJO(queue)) return null;
+  const dispatch = queue.dispatch;
+  return typeof dispatch === "function" ? (value) => dispatch(value) : null;
 };
 
 const findContextProviderFiber = (fiber: Fiber, contextType: unknown): Fiber | null => {
@@ -947,12 +940,12 @@ const isPOJO = (maybePOJO: unknown): maybePOJO is Record<string, unknown> => {
 const buildPathsFromValue = (
   maybePOJO: Record<string, unknown>,
   basePath: string[] = [],
-): Array<{ path: string[]; value: unknown }> => {
+): ValueWrite[] => {
   if (!isPOJO(maybePOJO)) {
     return [{ path: basePath, value: maybePOJO }];
   }
 
-  const paths: Array<{ path: string[]; value: unknown }> = [];
+  const paths: ValueWrite[] = [];
 
   for (const key in maybePOJO) {
     const value = maybePOJO[key];
@@ -968,7 +961,7 @@ const buildPathsFromValue = (
   return paths;
 };
 
-const buildValueWrites = (partialValue: unknown): Array<{ path: string[]; value: unknown }> =>
+const buildValueWrites = (partialValue: unknown): ValueWrite[] =>
   isPOJO(partialValue) ? buildPathsFromValue(partialValue) : [{ path: [], value: partialValue }];
 
 export const overrideProps = (fiber: Fiber, partialValue: Record<string, unknown>) => {
@@ -985,11 +978,10 @@ export const overrideHookState = (fiber: Fiber, id: number, partialValue: unknow
   const writes = buildValueWrites(partialValue);
 
   if (renderers.length > 0) {
-    const hookId = String(id);
     for (const renderer of renderers) {
       for (const { path, value } of writes) {
         try {
-          renderer.overrideHookState?.(fiber, hookId, path, value);
+          renderer.overrideHookState?.(fiber, id, path, value);
         } catch {}
       }
     }
@@ -1022,24 +1014,35 @@ export const overrideContext = (fiber: Fiber, contextType: unknown, partialValue
 export interface InstrumentationOptions {
   name?: string;
   onActive?: () => unknown;
-  onCommitFiberRoot?: (rendererID: number, root: FiberRoot, priority: number | void) => unknown;
+  onCommitFiberRoot?: (
+    rendererID: number,
+    root: FiberRoot,
+    priority: number | void,
+    didError?: boolean,
+  ) => unknown;
   onCommitFiberUnmount?: (rendererID: number, fiber: Fiber) => unknown;
   onPostCommitFiberRoot?: (rendererID: number, root: FiberRoot) => unknown;
   onScheduleFiberRoot?: (rendererID: number, root: FiberRoot, children: React.ReactNode) => unknown;
 }
 
-const commitFiberRootListeners = new Set<
-  NonNullable<InstrumentationOptions["onCommitFiberRoot"]>
->();
-const commitFiberUnmountListeners = new Set<
-  NonNullable<InstrumentationOptions["onCommitFiberUnmount"]>
->();
-const postCommitFiberRootListeners = new Set<
-  NonNullable<InstrumentationOptions["onPostCommitFiberRoot"]>
->();
-const scheduleFiberRootListeners = new Set<
-  NonNullable<InstrumentationOptions["onScheduleFiberRoot"]>
->();
+interface InstrumentationSubscription {
+  options: InstrumentationOptions;
+}
+
+const instrumentationSubscriptions = new Set<InstrumentationSubscription>();
+
+const runInstrumentationCallback = (
+  instrumentationName: string,
+  callbackName: string,
+  callback: () => unknown,
+): void =>
+  runWithBippyError(
+    callback,
+    (cause) => new BippyInstrumentationError(instrumentationName, callbackName, cause),
+  );
+
+const runReactDevToolsCallback = (callbackName: string, callback: () => unknown): void =>
+  runWithBippyError(callback, (cause) => new BippyReactDevToolsError(callbackName, cause));
 
 interface HookDispatchers {
   onCommitFiberRoot: ReactDevToolsGlobalHook["onCommitFiberRoot"];
@@ -1049,6 +1052,7 @@ interface HookDispatchers {
 }
 
 const hookDispatchers = new WeakMap<ReactDevToolsGlobalHook, Partial<HookDispatchers>>();
+let didSubscribeToHookReplacements = false;
 
 const rootRendererIds = new WeakMap<FiberRoot, number>();
 
@@ -1057,7 +1061,7 @@ const rootRendererIds = new WeakMap<FiberRoot, number>();
 // next instrument() call installs a fresh wrapper over it; a superseded
 // wrapper still forwards the previous chain but skips the listeners so
 // they never fire twice.
-const ensureHookDispatchesToListeners = (rdtHook: ReactDevToolsGlobalHook): void => {
+const setHookEventDispatchers = (rdtHook: ReactDevToolsGlobalHook): void => {
   const dispatchers = hookDispatchers.get(rdtHook) ?? {};
   hookDispatchers.set(rdtHook, dispatchers);
 
@@ -1070,13 +1074,35 @@ const ensureHookDispatchesToListeners = (rdtHook: ReactDevToolsGlobalHook): void
       rendererID,
       root,
       priority,
+      didError,
     ) => {
-      prevOnCommitFiberRoot?.(rendererID, root, priority);
+      if (prevOnCommitFiberRoot) {
+        runReactDevToolsCallback("onCommitFiberRoot", () =>
+          prevOnCommitFiberRoot(rendererID, root, priority, didError),
+        );
+      }
       if (hookDispatchers.get(rdtHook)?.onCommitFiberRoot !== dispatchCommitFiberRoot) return;
-      _fiberRoots.add(root);
-      rootRendererIds.set(root, rendererID);
-      for (const listener of commitFiberRootListeners) {
-        listener(rendererID, root, priority);
+      setReactWorkTagsForFiber(root.current, rdtHook.renderers.get(rendererID));
+      const rootMemoizedState = root.current.memoizedState;
+      const isUnmounting =
+        rootMemoizedState === null ||
+        rootMemoizedState.element === null ||
+        rootMemoizedState.element === undefined;
+      if (isUnmounting) {
+        _fiberRoots.delete(root);
+        rootRendererIds.delete(root);
+      } else {
+        _fiberRoots.add(root);
+        rootRendererIds.set(root, rendererID);
+      }
+      for (const { options } of instrumentationSubscriptions) {
+        if (options.onCommitFiberRoot) {
+          runInstrumentationCallback(
+            options.name ?? BIPPY_INSTRUMENTATION_STRING,
+            "onCommitFiberRoot",
+            () => options.onCommitFiberRoot?.(rendererID, root, priority, didError),
+          );
+        }
       }
     };
     dispatchers.onCommitFiberRoot = dispatchCommitFiberRoot;
@@ -1092,12 +1118,23 @@ const ensureHookDispatchesToListeners = (rdtHook: ReactDevToolsGlobalHook): void
       rendererID,
       fiber,
     ) => {
-      prevOnCommitFiberUnmount?.(rendererID, fiber);
+      setReactWorkTagsForFiber(fiber, rdtHook.renderers.get(rendererID));
+      if (prevOnCommitFiberUnmount) {
+        runReactDevToolsCallback("onCommitFiberUnmount", () =>
+          prevOnCommitFiberUnmount(rendererID, fiber),
+        );
+      }
       if (hookDispatchers.get(rdtHook)?.onCommitFiberUnmount !== dispatchCommitFiberUnmount) {
         return;
       }
-      for (const listener of commitFiberUnmountListeners) {
-        listener(rendererID, fiber);
+      for (const { options } of instrumentationSubscriptions) {
+        if (options.onCommitFiberUnmount) {
+          runInstrumentationCallback(
+            options.name ?? BIPPY_INSTRUMENTATION_STRING,
+            "onCommitFiberUnmount",
+            () => options.onCommitFiberUnmount?.(rendererID, fiber),
+          );
+        }
       }
     };
     dispatchers.onCommitFiberUnmount = dispatchCommitFiberUnmount;
@@ -1113,12 +1150,22 @@ const ensureHookDispatchesToListeners = (rdtHook: ReactDevToolsGlobalHook): void
       rendererID,
       root,
     ) => {
-      prevOnPostCommitFiberRoot?.(rendererID, root);
+      if (prevOnPostCommitFiberRoot) {
+        runReactDevToolsCallback("onPostCommitFiberRoot", () =>
+          prevOnPostCommitFiberRoot(rendererID, root),
+        );
+      }
       if (hookDispatchers.get(rdtHook)?.onPostCommitFiberRoot !== dispatchPostCommitFiberRoot) {
         return;
       }
-      for (const listener of postCommitFiberRootListeners) {
-        listener(rendererID, root);
+      for (const { options } of instrumentationSubscriptions) {
+        if (options.onPostCommitFiberRoot) {
+          runInstrumentationCallback(
+            options.name ?? BIPPY_INSTRUMENTATION_STRING,
+            "onPostCommitFiberRoot",
+            () => options.onPostCommitFiberRoot?.(rendererID, root),
+          );
+        }
       }
     };
     dispatchers.onPostCommitFiberRoot = dispatchPostCommitFiberRoot;
@@ -1135,10 +1182,20 @@ const ensureHookDispatchesToListeners = (rdtHook: ReactDevToolsGlobalHook): void
       root,
       children,
     ) => {
-      prevOnScheduleFiberRoot?.(rendererID, root, children);
+      if (prevOnScheduleFiberRoot) {
+        runReactDevToolsCallback("onScheduleFiberRoot", () =>
+          prevOnScheduleFiberRoot(rendererID, root, children),
+        );
+      }
       if (hookDispatchers.get(rdtHook)?.onScheduleFiberRoot !== dispatchScheduleFiberRoot) return;
-      for (const listener of scheduleFiberRootListeners) {
-        listener(rendererID, root, children);
+      for (const { options } of instrumentationSubscriptions) {
+        if (options.onScheduleFiberRoot) {
+          runInstrumentationCallback(
+            options.name ?? BIPPY_INSTRUMENTATION_STRING,
+            "onScheduleFiberRoot",
+            () => options.onScheduleFiberRoot?.(rendererID, root, children),
+          );
+        }
       }
     };
     dispatchers.onScheduleFiberRoot = dispatchScheduleFiberRoot;
@@ -1165,36 +1222,35 @@ const ensureHookDispatchesToListeners = (rdtHook: ReactDevToolsGlobalHook): void
  * unsubscribe();
  */
 export const instrument = (options: InstrumentationOptions): Unsubscribe => {
-  const rdtHook = getRDTHook(options.onActive);
+  const onActiveListener = options.onActive;
+  const onActive = onActiveListener
+    ? () =>
+        runInstrumentationCallback(
+          options.name ?? BIPPY_INSTRUMENTATION_STRING,
+          "onActive",
+          onActiveListener,
+        )
+    : undefined;
+  const rdtHook = getRDTHook(onActive);
+
+  if (!didSubscribeToHookReplacements) {
+    onRDTHookReplace(setHookEventDispatchers);
+    didSubscribeToHookReplacements = true;
+  }
 
   rdtHook._instrumentationSource = options.name ?? BIPPY_INSTRUMENTATION_STRING;
 
-  ensureHookDispatchesToListeners(rdtHook);
-
-  const {
-    onActive,
-    onCommitFiberRoot,
-    onCommitFiberUnmount,
-    onPostCommitFiberRoot,
-    onScheduleFiberRoot,
-  } = options;
-  if (onCommitFiberRoot) commitFiberRootListeners.add(onCommitFiberRoot);
-  if (onCommitFiberUnmount) commitFiberUnmountListeners.add(onCommitFiberUnmount);
-  if (onPostCommitFiberRoot) postCommitFiberRootListeners.add(onPostCommitFiberRoot);
-  if (onScheduleFiberRoot) scheduleFiberRootListeners.add(onScheduleFiberRoot);
+  setHookEventDispatchers(rdtHook);
+  const subscription: InstrumentationSubscription = { options };
+  instrumentationSubscriptions.add(subscription);
 
   return toUnsubscribe(() => {
     if (onActive) _onActiveListeners.delete(onActive);
-    if (onCommitFiberRoot) commitFiberRootListeners.delete(onCommitFiberRoot);
-    if (onCommitFiberUnmount) commitFiberUnmountListeners.delete(onCommitFiberUnmount);
-    if (onPostCommitFiberRoot) postCommitFiberRootListeners.delete(onPostCommitFiberRoot);
-    if (onScheduleFiberRoot) scheduleFiberRootListeners.delete(onScheduleFiberRoot);
+    instrumentationSubscriptions.delete(subscription);
   });
 };
 
-// React stamps fibers under per-renderer random-suffix keys (`__reactFiber$<suffix>`);
-// caching discovered keys makes repeat lookups a single property read instead of a
-// scan over every own key of the element.
+// React uses per-renderer suffixes for host-instance Fiber keys, so discovered keys are cached.
 const knownFiberPropertyKeys = new Set<string>();
 
 const isFiberPropertyKey = (key: string): boolean =>
@@ -1202,6 +1258,32 @@ const isFiberPropertyKey = (key: string): boolean =>
   key.startsWith("__reactInternalInstance$") ||
   key.startsWith("__reactFiber");
 
+const getLegacyRootFiber = (hostInstance: Record<string, unknown>): Fiber | null => {
+  const reactRootContainer = hostInstance._reactRootContainer;
+  if (!isObjectRecord(reactRootContainer)) return null;
+  const internalRoot = reactRootContainer._internalRoot;
+  if (!isObjectRecord(internalRoot)) return null;
+  const current = internalRoot.current;
+  if (!isObjectRecord(current)) return null;
+  const child = current.child;
+  return isValidFiber(child) ? child : null;
+};
+
+const getInternalInstanceHandle = (hostInstance: Record<string, unknown>): Fiber | null => {
+  const internalInstanceHandle =
+    hostInstance.__internalInstanceHandle ?? hostInstance._internalInstanceHandle;
+  return isValidFiber(internalInstanceHandle) ? internalInstanceHandle : null;
+};
+
+const getPublicHostInstance = (stateNode: unknown): unknown => {
+  if (!isObjectRecord(stateNode)) return stateNode;
+  const canonical = stateNode.canonical;
+  if (isObjectRecord(canonical) && isObjectRecord(canonical.publicInstance)) {
+    return canonical.publicInstance;
+  }
+  return typeof stateNode._nativeTag === "number" ? stateNode._nativeTag : stateNode;
+};
+
 export const getFiberFromHostInstance = <T>(hostInstance: T): Fiber | null => {
   const rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
   if (rdtHook?.renderers) {
@@ -1213,42 +1295,38 @@ export const getFiberFromHostInstance = <T>(hostInstance: T): Fiber | null => {
     }
   }
 
-  if (typeof hostInstance === "object" && hostInstance != null) {
-    if ("_reactRootContainer" in hostInstance) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      return (hostInstance._reactRootContainer as any)?._internalRoot?.current?.child;
-    }
+  if (isObjectRecord(hostInstance)) {
+    const legacyRootFiber = getLegacyRootFiber(hostInstance);
+    if (legacyRootFiber) return legacyRootFiber;
 
-    // React Native Fabric public instances (ReactNativeElement /
-    // ReactFabricHostComponent) store their fiber as the "internal instance
-    // handle" instead of a __reactFiber$-prefixed key
-    const fabricInstanceHandle =
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (hostInstance as any).__internalInstanceHandle ??
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (hostInstance as any)._internalInstanceHandle;
-    if (isFiber(fabricInstanceHandle)) {
-      return fabricInstanceHandle;
-    }
+    const internalInstanceHandle = getInternalInstanceHandle(hostInstance);
+    if (internalInstanceHandle) return internalInstanceHandle;
 
-    const hostInstanceRecord = hostInstance as Record<string, unknown>;
     for (const knownKey of knownFiberPropertyKeys) {
-      const fiber = hostInstanceRecord[knownKey];
-      if (fiber) return fiber as Fiber;
+      const fiber = hostInstance[knownKey];
+      if (isValidFiber(fiber)) return fiber;
     }
 
-    for (const key of Object.keys(hostInstanceRecord)) {
+    for (const key of Object.keys(hostInstance)) {
       if (isFiberPropertyKey(key)) {
         knownFiberPropertyKeys.add(key);
-        return (hostInstanceRecord[key] || null) as Fiber | null;
+        const fiber = hostInstance[key];
+        if (isValidFiber(fiber)) return fiber;
       }
     }
+  }
 
+  if (
+    hostInstance !== null &&
+    hostInstance !== undefined &&
+    (typeof hostInstance === "object" || typeof hostInstance === "number")
+  ) {
     for (const fiberRoot of _fiberRoots) {
-      if (getRootRenderer(fiberRoot.current)?.findFiberByHostInstance) continue;
       const fiber = traverseFiber(
         fiberRoot.current,
-        (candidateFiber) => candidateFiber.stateNode === hostInstance,
+        (candidateFiber) =>
+          isHostFiber(candidateFiber) &&
+          getPublicHostInstance(candidateFiber.stateNode) === hostInstance,
       );
       if (fiber) return fiber;
     }
@@ -1256,6 +1334,18 @@ export const getFiberFromHostInstance = <T>(hostInstance: T): Fiber | null => {
   return null;
 };
 
-export * from "./rdt-hook.js";
+export {
+  BIPPY_INSTRUMENTATION_STRING,
+  _onActiveListeners,
+  _renderers,
+  getRDTHook,
+  hasRDTHook,
+  installRDTHook,
+  isRealReactDevtools,
+  onRendererInject,
+  patchRDTHook,
+  safelyInstallRDTHook,
+  version,
+} from "./rdt-hook.js";
 export * from "./unsubscribe.js";
 export type * from "./types.js";