diff --git a/src/data/process-events.ts b/src/data/process-events.ts index 9defa20..56d1820 100644 --- a/src/data/process-events.ts +++ b/src/data/process-events.ts @@ -201,6 +201,13 @@ export function processEvents( } case "update": + // This check is potentially required (??) due to an unsupported app + // structure (e.g. multiple roots) or otherwise invalid react code. + // Knock-on effects of this check are mitigated in `../ui/fiber-maps` + if (!fiberById.has(event.fiberId)) { + continue; + } + updateCount++; fiber = fiberById.get(event.fiberId) as MessageFiber; diff --git a/src/ui/utils/fiber-maps.tsx b/src/ui/utils/fiber-maps.tsx index 32554c9..27fa74b 100644 --- a/src/ui/utils/fiber-maps.tsx +++ b/src/ui/utils/fiber-maps.tsx @@ -75,7 +75,20 @@ export const useFiberChildren = ( ) => { const { selectTree } = useFiberMaps(); const tree = selectTree(groupByParent, includeUnmounted); - const leaf = tree.getOrCreate(fiberId); + let leaf = tree.getOrCreate(fiberId); + + // Requesting the root node (fiber 0) returns an invalid fiber? + // This state is potentially (??) introduced due to an unsupported app + // structure and a subsequent workaround in `../data/process-events` + if (!fiberId && leaf?.fiber == null) { + // find the next node in the tree with a valid fiber and children + for (const [activeFiberId, { fiber, firstChild }] of tree.nodes) { + if (fiber && firstChild) { + leaf = tree.getOrCreate(activeFiberId); + break; + } + } + } const compute = React.useCallback(() => leaf.children || EMPTY_ARRAY, [leaf]);