Support Suspending/Erroring Virtual Instances

This finds the nearest Fiber Instance downwards filtered or otherwise.
Then from its parent we find the nearest Error or Suspense boundary.

That's because VirtualInstance will always have their inner Fiber as an
Instance but they might not have their parent since it might be filtered.

Author: sebmarkbage

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -5371,6 +5371,25 @@ export function attach(
     );
   }
 
+  function getNearestFiber(devtoolsInstance: DevToolsInstance): null | Fiber {
+    if (devtoolsInstance.kind === VIRTUAL_INSTANCE) {
+      let inst: DevToolsInstance = devtoolsInstance;
+      while (inst.kind === VIRTUAL_INSTANCE) {
+        // For virtual instances, we search deeper until we find a Fiber instance.
+        // Then we search upwards from that Fiber. That's because Virtual Instances
+        // will always have an Fiber child filtered or not. If we searched its parents
+        // we might skip through a filtered Error Boundary before we hit a FiberInstance.
+        if (inst.firstChild === null) {
+          return null;
+        }
+        inst = inst.firstChild;
+      }
+      return inst.data.return;
+    } else {
+      return devtoolsInstance.data;
+    }
+  }
+
   // React will switch between these implementations depending on whether
   // we have any manually suspended/errored-out Fibers or not.
   function shouldErrorFiberAlwaysNull() {
@@ -5435,27 +5454,27 @@ export function attach(
     if (devtoolsInstance === undefined) {
       return;
     }
-    if (devtoolsInstance.kind === FIBER_INSTANCE) {
-      let fiber = devtoolsInstance.data;
-      while (!isErrorBoundary(fiber)) {
-        if (fiber.return === null) {
-          return;
-        }
-        fiber = fiber.return;
-      }
-      forceErrorForFibers.set(fiber, forceError);
-      if (fiber.alternate !== null) {
-        // We only need one of the Fibers in the set.
-        forceErrorForFibers.delete(fiber.alternate);
-      }
-      if (forceErrorForFibers.size === 1) {
-        // First override is added. Switch React to slower path.
-        setErrorHandler(shouldErrorFiberAccordingToMap);
+    const nearestFiber = getNearestFiber(devtoolsInstance);
+    if (nearestFiber === null) {
+      return;
+    }
+    let fiber = nearestFiber;
+    while (!isErrorBoundary(fiber)) {
+      if (fiber.return === null) {
+        return;
       }
-      scheduleUpdate(fiber);
-    } else {
-      // TODO: Handle VirtualInstance.
+      fiber = fiber.return;
+    }
+    forceErrorForFibers.set(fiber, forceError);
+    if (fiber.alternate !== null) {
+      // We only need one of the Fibers in the set.
+      forceErrorForFibers.delete(fiber.alternate);
     }
+    if (forceErrorForFibers.size === 1) {
+      // First override is added. Switch React to slower path.
+      setErrorHandler(shouldErrorFiberAccordingToMap);
+    }
+    scheduleUpdate(fiber);
   }
 
   function shouldSuspendFiberAlwaysFalse() {
@@ -5484,36 +5503,36 @@ export function attach(
     if (devtoolsInstance === undefined) {
       return;
     }
-    if (devtoolsInstance.kind === FIBER_INSTANCE) {
-      let fiber = devtoolsInstance.data;
-      while (fiber.tag !== SuspenseComponent) {
-        if (fiber.return === null) {
-          return;
-        }
-        fiber = fiber.return;
+    const nearestFiber = getNearestFiber(devtoolsInstance);
+    if (nearestFiber === null) {
+      return;
+    }
+    let fiber = nearestFiber;
+    while (fiber.tag !== SuspenseComponent) {
+      if (fiber.return === null) {
+        return;
       }
+      fiber = fiber.return;
+    }
 
-      if (fiber.alternate !== null) {
-        // We only need one of the Fibers in the set.
-        forceFallbackForFibers.delete(fiber.alternate);
-      }
-      if (forceFallback) {
-        forceFallbackForFibers.add(fiber);
-        if (forceFallbackForFibers.size === 1) {
-          // First override is added. Switch React to slower path.
-          setSuspenseHandler(shouldSuspendFiberAccordingToSet);
-        }
-      } else {
-        forceFallbackForFibers.delete(fiber);
-        if (forceFallbackForFibers.size === 0) {
-          // Last override is gone. Switch React back to fast path.
-          setSuspenseHandler(shouldSuspendFiberAlwaysFalse);
-        }
+    if (fiber.alternate !== null) {
+      // We only need one of the Fibers in the set.
+      forceFallbackForFibers.delete(fiber.alternate);
+    }
+    if (forceFallback) {
+      forceFallbackForFibers.add(fiber);
+      if (forceFallbackForFibers.size === 1) {
+        // First override is added. Switch React to slower path.
+        setSuspenseHandler(shouldSuspendFiberAccordingToSet);
       }
-      scheduleUpdate(fiber);
     } else {
-      // TODO: Handle VirtualInstance.
+      forceFallbackForFibers.delete(fiber);
+      if (forceFallbackForFibers.size === 0) {
+        // Last override is gone. Switch React back to fast path.
+        setSuspenseHandler(shouldSuspendFiberAlwaysFalse);
+      }
     }
+    scheduleUpdate(fiber);
   }
 
   // Remember if we're trying to restore the selection after reload.