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

package/src/core.ts

@@ -10,78 +10,44 @@ import type {
   MemoizedState,
   ReactDevToolsGlobalHook,
   ReactRenderer,
-} from "./types.js";
+} from "./react-internals/index.js";
+
+import { BippyInstrumentationError, BippyReactDevToolsError, runWithBippyError } from "./errors.js";
 
 import {
   _onActiveListeners,
   BIPPY_INSTRUMENTATION_STRING,
+  createUnsubscribe,
   getRDTHook,
   hasRDTHook,
   isRealReactDevtools,
+  onRDTHookReplace,
   onRendererInject,
 } from "./rdt-hook.js";
+import type { Unsubscribe } from "./rdt-hook.js";
 import {
-  ClassComponentTag,
-  CONCURRENT_MODE_NUMBER,
-  CONCURRENT_MODE_SYMBOL_DESCRIPTION,
-  CONCURRENT_MODE_SYMBOL_STRING,
-  ContextConsumerTag,
-  DEPRECATED_ASYNC_MODE_SYMBOL_DESCRIPTION,
-  DEPRECATED_ASYNC_MODE_SYMBOL_STRING,
-  DehydratedSuspenseComponentTag,
-  ELEMENT_TYPE_SYMBOL_STRING,
-  ForwardRefTag,
-  FragmentTag,
-  FunctionComponentTag,
-  HostComponentTag,
-  HostHoistableTag,
-  HostRootTag,
-  HostSingletonTag,
-  HostTextTag,
-  LegacyHiddenComponentTag,
-  MemoComponentTag,
+  getReactWorkTagsForFiber,
   MutationMask,
-  OffscreenComponentTag,
   ReactBuildType,
   ReactFiberFlags,
-  SimpleMemoComponentTag,
-  SuspenseComponentTag,
-  TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING,
-} from "./react-internals.js";
-import { toUnsubscribe, type Unsubscribe } from "./unsubscribe.js";
+  ReactSymbols,
+  setReactWorkTagsForFiber,
+} from "./react-internals/index.js";
 
+export { getReactWorkTags, ReactSymbols } from "./react-internals/index.js";
+export type { ReactWorkTagMap, ReactWorkTagVersion } from "./react-internals/index.js";
 export {
-  ActivityComponentTag,
-  ClassComponentTag,
-  CONCURRENT_MODE_NUMBER,
-  CONCURRENT_MODE_SYMBOL_DESCRIPTION,
-  CONCURRENT_MODE_SYMBOL_STRING,
-  ContextConsumerTag,
-  DEPRECATED_ASYNC_MODE_SYMBOL_DESCRIPTION,
-  DEPRECATED_ASYNC_MODE_SYMBOL_STRING,
-  DehydratedSuspenseComponentTag,
-  ELEMENT_TYPE_SYMBOL_STRING,
-  ForwardRefTag,
-  FragmentTag,
-  FunctionComponentTag,
-  HostComponentTag,
-  HostHoistableTag,
-  HostPortalTag,
-  HostRootTag,
-  HostSingletonTag,
-  HostTextTag,
-  LazyComponentTag,
-  LegacyHiddenComponentTag,
-  MemoComponentTag,
-  OffscreenComponentTag,
-  SimpleMemoComponentTag,
-  SuspenseComponentTag,
-  SuspenseListComponentTag,
-  TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING,
-  ViewTransitionComponentTag,
-} from "./react-internals.js";
-
-const { Cloned, PerformedWork } = ReactFiberFlags;
+  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;
@@ -113,6 +79,20 @@ 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.
  *
@@ -122,9 +102,8 @@ export const isValidElement = (element: unknown): element is React.ReactElement
   typeof element === "object" &&
   element !== null &&
   "$$typeof" in element &&
-  [ELEMENT_TYPE_SYMBOL_STRING, TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING].includes(
-    String(element.$$typeof),
-  );
+  (String(element.$$typeof) === ReactSymbols.LEGACY_ELEMENT_SYMBOL_STRING ||
+    String(element.$$typeof) === ReactSymbols.ELEMENT_SYMBOL_STRING);
 
 /**
  * Returns `true` if object is a React Fiber.
@@ -139,17 +118,21 @@ export const isValidFiber = (fiber: unknown): fiber is Fiber =>
   "sibling" in fiber &&
   "flags" in fiber;
 
+const isFiberRoot = (fiberRoot: unknown): fiberRoot is FiberRoot =>
+  isObjectRecord(fiberRoot) && isValidFiber(fiberRoot.current);
+
 /**
  * Returns `true` if fiber is a host fiber. Host fibers are DOM nodes in react-dom, `View` in react-native, etc.
  *
  * @see https://reactnative.dev/architecture/glossary#host-view-tree-and-host-view
  */
 export const isHostFiber = (fiber: Fiber): fiber is HostFiber => {
+  const workTags = getReactWorkTagsForFiber(fiber);
   switch (fiber.tag) {
-    case HostComponentTag:
-    case HostTextTag:
-    case HostHoistableTag:
-    case HostSingletonTag:
+    case workTags.HostComponent:
+    case workTags.HostText:
+    case workTags.HostHoistable:
+    case workTags.HostSingleton:
       return true;
     default:
       return false;
@@ -162,12 +145,13 @@ export const isHostFiber = (fiber: Fiber): fiber is HostFiber => {
  * @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;
@@ -275,15 +259,16 @@ export const didFiberRender = (fiber: Fiber): boolean => {
   const nextProps = fiber.memoizedProps;
   const prevProps = fiber.alternate?.memoizedProps || {};
   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.)
@@ -301,8 +286,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,
   );
 };
 
@@ -351,8 +336,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.
@@ -360,13 +346,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;
 
@@ -376,15 +362,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:
@@ -448,75 +434,67 @@ export function traverseFiber(
   selector: (node: Fiber) => Promise<boolean | void>,
   ascending?: boolean,
 ): Promise<Fiber | null>;
+export function traverseFiber(
+  fiber: Fiber | null,
+  selector: FiberSelector,
+  ascending?: boolean,
+): Fiber | null | Promise<Fiber | null>;
 export function traverseFiber(
   fiber: Fiber | null,
   selector: FiberSelector,
   ascending = false,
 ): Fiber | null | Promise<Fiber | null> {
-  if (!fiber) return null;
-
-  const firstResult = selector(fiber);
-  if (firstResult instanceof Promise) {
-    return (async () => {
-      if ((await firstResult) === true) return fiber;
-
-      let child = ascending ? fiber.return : fiber.child;
-      while (child) {
-        const match = await traverseFiberAsync(child, selector, ascending);
-        if (match) return match;
-        child = ascending ? null : child.sibling;
-      }
-      return null;
-    })();
-  }
+  return traverseFiberInternal(fiber, selector, ascending);
+}
 
-  if (firstResult === true) return fiber;
+const isPromiseLike = <Result>(value: unknown): value is PromiseLike<Result> =>
+  (typeof value === "object" || typeof value === "function") &&
+  value !== null &&
+  "then" in value &&
+  typeof value.then === "function";
 
-  let child = ascending ? fiber.return : fiber.child;
-  while (child) {
-    const match = traverseFiberSync(child, selector, ascending);
-    if (match) return match;
-    child = ascending ? null : child.sibling;
-  }
-  return null;
-}
+const traverseFiberChildren = (
+  fiber: Fiber,
+  selector: FiberSelector,
+  ascending: boolean,
+): Fiber | null | Promise<Fiber | null> => {
+  const firstChild = ascending ? fiber.return : fiber.child;
+  return traverseFiberSiblings(firstChild, selector, ascending);
+};
 
-const traverseFiberSync = (
+const traverseFiberSiblings = (
   fiber: Fiber | null,
   selector: FiberSelector,
-  ascending = false,
-): Fiber | null => {
+  ascending: boolean,
+): Fiber | null | Promise<Fiber | null> => {
   if (!fiber) return null;
-  const selection = selector(fiber);
-  if (selection instanceof Promise) return null;
-  if (selection === true) return fiber;
-
-  let child = ascending ? fiber.return : fiber.child;
-  while (child) {
-    const match = traverseFiberSync(child, selector, ascending);
-    if (match) return match;
 
-    child = ascending ? null : child.sibling;
+  const nextSibling = ascending ? null : fiber.sibling;
+  const match = traverseFiberInternal(fiber, selector, ascending);
+  if (isPromiseLike<Fiber | null>(match)) {
+    return Promise.resolve(match).then(
+      (resolvedMatch) => resolvedMatch ?? traverseFiberSiblings(nextSibling, selector, ascending),
+    );
   }
-  return null;
+  return match ?? traverseFiberSiblings(nextSibling, selector, ascending);
 };
 
-const traverseFiberAsync = async (
+const traverseFiberInternal = (
   fiber: Fiber | null,
   selector: FiberSelector,
-  ascending = false,
-): Promise<Fiber | null> => {
+  ascending: boolean,
+): Fiber | null | Promise<Fiber | null> => {
   if (!fiber) return null;
-  if ((await selector(fiber)) === true) return fiber;
-
-  let child = ascending ? fiber.return : fiber.child;
-  while (child) {
-    const match = await traverseFiberAsync(child, selector, ascending);
-    if (match) return match;
 
-    child = ascending ? null : child.sibling;
+  const selection = selector(fiber);
+  if (isPromiseLike<boolean | void>(selection)) {
+    return Promise.resolve(selection).then((didSelectFiber) =>
+      didSelectFiber === true ? fiber : traverseFiberChildren(fiber, selector, ascending),
+    );
   }
-  return null;
+  if (selection === true) return fiber;
+
+  return traverseFiberChildren(fiber, selector, ascending);
 };
 
 /**
@@ -528,7 +506,7 @@ 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
@@ -605,35 +583,35 @@ export const getLatestFiber = (fiber: Fiber): Fiber => {
   }
   for (const root of _fiberRoots) {
     const latestFiber = traverseFiber(root.current, (innerFiber) => {
-      if (innerFiber === fiber) return true;
+      if (innerFiber === fiber || innerFiber === alternate) return true;
     });
     if (latestFiber) return latestFiber;
   }
   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);
+  if (Number.isSafeInteger(fiberId) && fiberId >= nextFiberId) {
+    nextFiberId = fiberId + 1;
+  }
 };
 
-// Fiber alternates share an identity across double-buffered commits.
 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 = (
@@ -652,7 +630,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,
@@ -682,7 +660,7 @@ const mountFiberRecursively = (
 const updateFiberRecursively = (
   onRender: RenderHandler,
   nextFiber: Fiber,
-  prevFiber: Fiber,
+  prevFiber: Fiber | null,
   parentFiber: Fiber | null,
 ): void => {
   if (!fiberIdMap.has(nextFiber)) {
@@ -693,7 +671,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)) {
@@ -780,7 +758,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");
@@ -789,7 +767,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) {
@@ -815,7 +794,7 @@ const unmountFiberChildrenRecursively = (onRender: RenderHandler, fiber: Fiber):
 
 let commitId = 0;
 const rootInstanceMap = new WeakMap<
-  FiberRoot,
+  Fiber | FiberRoot,
   {
     id: number;
     prevFiber: Fiber | null;
@@ -829,7 +808,7 @@ const rootInstanceMap = new WeakMap<
  *   console.log(phase)
  * })
  */
-export const traverseRenderedFibers = (root: FiberRoot, onRender: RenderHandler): void => {
+export const traverseRenderedFibers = (root: Fiber | FiberRoot, onRender: RenderHandler): void => {
   const fiber = "current" in root ? root.current : root;
 
   let rootInstance = rootInstanceMap.get(root);
@@ -878,9 +857,8 @@ let areOverrideRenderersWired = false;
 const wireOverrideRenderers = (): void => {
   if (!hasRDTHook()) return;
   const rdtHook = getRDTHook();
-  if (!rdtHook?.renderers) return;
 
-  ensureHookDispatchesToListeners(rdtHook);
+  setHookEventDispatchers(rdtHook);
   for (const renderer of rdtHook.renderers.values()) {
     overrideRenderers.add(renderer);
   }
@@ -897,14 +875,13 @@ const getRootRenderer = (fiber: Fiber): ReactRenderer | null => {
   while (hostRootFiber.return) {
     hostRootFiber = hostRootFiber.return;
   }
-  const rendererId = rootRendererIds.get(hostRootFiber.stateNode);
+  const fiberRoot = hostRootFiber.stateNode;
+  if (!isFiberRoot(fiberRoot)) return null;
+  const rendererId = rootRendererIds.get(fiberRoot);
   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);
@@ -930,7 +907,7 @@ 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;
   }
@@ -963,28 +940,33 @@ const isPOJO = (maybePOJO: unknown): maybePOJO is Record<string, unknown> => {
 const buildPathsFromValue = (
   maybePOJO: Record<string, unknown>,
   basePath: string[] = [],
-): Array<{ path: string[]; value: unknown }> => {
+  ancestors = new WeakSet<object>(),
+): ValueWrite[] => {
   if (!isPOJO(maybePOJO)) {
     return [{ path: basePath, value: maybePOJO }];
   }
+  if (ancestors.has(maybePOJO)) {
+    return [{ path: basePath, value: maybePOJO }];
+  }
 
-  const paths: Array<{ path: string[]; value: unknown }> = [];
+  ancestors.add(maybePOJO);
+  const paths: ValueWrite[] = [];
 
-  for (const key in maybePOJO) {
-    const value = maybePOJO[key];
+  for (const [key, value] of Object.entries(maybePOJO)) {
     const path = basePath.concat(key);
 
     if (isPOJO(value)) {
-      paths.push(...buildPathsFromValue(value, path));
+      paths.push(...buildPathsFromValue(value, path, ancestors));
     } else {
       paths.push({ path, value });
     }
   }
 
+  ancestors.delete(maybePOJO);
   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>) => {
@@ -1048,18 +1030,26 @@ export interface InstrumentationOptions {
   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"];
@@ -1069,6 +1059,7 @@ interface HookDispatchers {
 }
 
 const hookDispatchers = new WeakMap<ReactDevToolsGlobalHook, Partial<HookDispatchers>>();
+let didSubscribeToHookReplacements = false;
 
 const rootRendererIds = new WeakMap<FiberRoot, number>();
 
@@ -1077,7 +1068,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);
 
@@ -1092,8 +1083,13 @@ const ensureHookDispatchesToListeners = (rdtHook: ReactDevToolsGlobalHook): void
       priority,
       didError,
     ) => {
-      prevOnCommitFiberRoot?.(rendererID, root, priority, didError);
+      if (prevOnCommitFiberRoot) {
+        runReactDevToolsCallback("onCommitFiberRoot", () =>
+          prevOnCommitFiberRoot.call(rdtHook, rendererID, root, priority, didError),
+        );
+      }
       if (hookDispatchers.get(rdtHook)?.onCommitFiberRoot !== dispatchCommitFiberRoot) return;
+      setReactWorkTagsForFiber(root.current, rdtHook.renderers.get(rendererID));
       const rootMemoizedState = root.current.memoizedState;
       const isUnmounting =
         rootMemoizedState === null ||
@@ -1106,8 +1102,14 @@ const ensureHookDispatchesToListeners = (rdtHook: ReactDevToolsGlobalHook): void
         _fiberRoots.add(root);
         rootRendererIds.set(root, rendererID);
       }
-      for (const listener of commitFiberRootListeners) {
-        listener(rendererID, root, priority, didError);
+      for (const { options } of instrumentationSubscriptions) {
+        if (options.onCommitFiberRoot) {
+          runInstrumentationCallback(
+            options.name ?? BIPPY_INSTRUMENTATION_STRING,
+            "onCommitFiberRoot",
+            () => options.onCommitFiberRoot?.(rendererID, root, priority, didError),
+          );
+        }
       }
     };
     dispatchers.onCommitFiberRoot = dispatchCommitFiberRoot;
@@ -1123,12 +1125,23 @@ const ensureHookDispatchesToListeners = (rdtHook: ReactDevToolsGlobalHook): void
       rendererID,
       fiber,
     ) => {
-      prevOnCommitFiberUnmount?.(rendererID, fiber);
+      setReactWorkTagsForFiber(fiber, rdtHook.renderers.get(rendererID));
+      if (prevOnCommitFiberUnmount) {
+        runReactDevToolsCallback("onCommitFiberUnmount", () =>
+          prevOnCommitFiberUnmount.call(rdtHook, 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;
@@ -1144,12 +1157,22 @@ const ensureHookDispatchesToListeners = (rdtHook: ReactDevToolsGlobalHook): void
       rendererID,
       root,
     ) => {
-      prevOnPostCommitFiberRoot?.(rendererID, root);
+      if (prevOnPostCommitFiberRoot) {
+        runReactDevToolsCallback("onPostCommitFiberRoot", () =>
+          prevOnPostCommitFiberRoot.call(rdtHook, 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;
@@ -1166,10 +1189,20 @@ const ensureHookDispatchesToListeners = (rdtHook: ReactDevToolsGlobalHook): void
       root,
       children,
     ) => {
-      prevOnScheduleFiberRoot?.(rendererID, root, children);
+      if (prevOnScheduleFiberRoot) {
+        runReactDevToolsCallback("onScheduleFiberRoot", () =>
+          prevOnScheduleFiberRoot.call(rdtHook, 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;
@@ -1182,8 +1215,7 @@ const ensureHookDispatchesToListeners = (rdtHook: ReactDevToolsGlobalHook): void
  * dispatches to a set of listeners, so multiple `instrument` calls compose
  * without stacking patches. Returns an unsubscribe function that removes
  * exactly the handlers this call registered.
- * The returned function is also a `Disposable`, so it composes with other
- * bippy subscriptions through `using`.
+ * The unsubscribe function can also be disposed through `using`.
  * @example
  * const unsubscribe = instrument({
  *   onActive() {
@@ -1196,30 +1228,31 @@ 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);
-
-  return toUnsubscribe(() => {
+  setHookEventDispatchers(rdtHook);
+  const subscription: InstrumentationSubscription = { options };
+  instrumentationSubscriptions.add(subscription);
+
+  return createUnsubscribe(() => {
     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);
   });
 };
 
@@ -1307,6 +1340,18 @@ export const getFiberFromHostInstance = <T>(hostInstance: T): Fiber | null => {
   return null;
 };
 
-export * from "./rdt-hook.js";
-export * from "./unsubscribe.js";
-export type * from "./types.js";
+export {
+  BIPPY_INSTRUMENTATION_STRING,
+  _onActiveListeners,
+  _renderers,
+  getRDTHook,
+  hasRDTHook,
+  installRDTHook,
+  isRealReactDevtools,
+  onRendererInject,
+  patchRDTHook,
+  safelyInstallRDTHook,
+  version,
+} from "./rdt-hook.js";
+export type { Unsubscribe } from "./rdt-hook.js";
+export type * from "./react-internals/index.js";