Handle errors from DOM.getAllBoundingClientRects (#10361)

src/ui/components/NodePickerContext.tsx

@@ -1,4 +1,4 @@
-import { ObjectId, PauseId } from "@replayio/protocol";
+import { NodeBounds, ObjectId, PauseId } from "@replayio/protocol";
 import {
   PropsWithChildren,
   createContext,
@@ -153,7 +153,7 @@ export function NodePickerContextRoot({ children }: PropsWithChildren<{}>) {
     }
 
     // Start loading rects eagerly; we'll need them in the hover/click handlers
-    const boundingRectsPromise = boundingRectsCache.readAsync(replayClient, pauseId);
+    boundingRectsCache.prefetch(replayClient, pauseId);
 
     const { limitToNodeIds, onSelected } = options;
 
@@ -162,10 +162,18 @@ export function NodePickerContextRoot({ children }: PropsWithChildren<{}>) {
       if (position != null) {
         const { x, y } = position;
 
-        const boundingRects = await boundingRectsPromise;
-        const nodeBounds = getMouseTarget(boundingRects, x, y, limitToNodeIds);
-
-        return nodeBounds?.node ?? null;
+        try {
+          const boundingRects = await boundingRectsCache.readAsync(replayClient, pauseId);
+          const nodeBounds = getMouseTarget(boundingRects, x, y, limitToNodeIds);
+
+          return nodeBounds?.node ?? null;
+        } catch {
+          setState({
+            status: "error",
+            options,
+          });
+          return null;
+        }
       }
 
       return null;