[DevTools] Don't capture durations for disconnected subtrees when profiling (#35718)

After https://github.com/facebook/react/pull/34089, when updating
(possibly, mounting) inside disconnected subtree, we don't record this
as an operation. This only happens during reconnect. The issue is that
`recordProfilingDurations()` can be called, which diffs tree base
duration and reports it to the Frontend:

65db1000b9/packages/react-devtools-shared/src/backend/fiber/renderer.js (L4506-L4521)

This operation can be recorded before the "Add" operation, and it will
not be resolved properly on the Frontend side.

Before the fix:
```
commit tree › Suspense › should handle transitioning from fallback back to content during profiling

    Could not clone the node: commit tree does not contain fiber "5". This is a bug in React DevTools.

      162 |     const existingNode = nodes.get(id);
      163 |     if (existingNode == null) {
    > 164 |       throw new Error(
          |             ^
      165 |         `Could not clone the node: commit tree does not contain fiber "${id}". This is a bug in React DevTools.`,
      166 |       );
      167 |     }

      at getClonedNode (packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js:164:13)
      at updateTree (packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js:348:24)
      at getCommitTree (packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js:112:20)
      at ProfilingCache.getCommitTree (packages/react-devtools-shared/src/devtools/ProfilingCache.js:40:46)
      at Object.<anonymous> (packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js:257:44)
```
This commit is contained in:
Ruslan Lesiutin
2026-02-09 22:18:17 +00:00
committed by GitHub
parent 6a939d0b54
commit c6bb26bf83
2 changed files with 75 additions and 4 deletions

View File

@@ -191,4 +191,73 @@ describe('commit tree', () => {
expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>
});
});
describe('Suspense', () => {
it('should handle transitioning from fallback back to content during profiling', async () => {
let resolvePromise;
let promise = null;
let childTreeBaseDuration = 10;
function Wrapper({children}) {
Scheduler.unstable_advanceTime(2);
return children;
}
function Child() {
Scheduler.unstable_advanceTime(childTreeBaseDuration);
if (promise !== null) {
React.use(promise);
}
return <GrandChild />;
}
function GrandChild() {
Scheduler.unstable_advanceTime(5);
return null;
}
function Fallback() {
Scheduler.unstable_advanceTime(2);
return null;
}
function App() {
Scheduler.unstable_advanceTime(1);
return (
<React.Suspense fallback={<Fallback />}>
<Wrapper>
<Child />
</Wrapper>
</React.Suspense>
);
}
utils.act(() => store.profilerStore.startProfiling());
// Commit 1: Mount with primary
utils.act(() => render(<App step={1} />));
// Commit 2: Suspend, show fallback
promise = new Promise(resolve => (resolvePromise = resolve));
await utils.actAsync(() => render(<App step={2} />));
// Commit 3: Resolve suspended promise, show primary content with a different duration.
childTreeBaseDuration = 20;
promise = null;
await utils.actAsync(resolvePromise);
utils.act(() => render(<App step={3} />));
utils.act(() => store.profilerStore.stopProfiling());
const rootID = store.roots[0];
const dataForRoot = store.profilerStore.getDataForRoot(rootID);
const numCommits = dataForRoot.commitData.length;
for (let commitIndex = 0; commitIndex < numCommits; commitIndex++) {
store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
}
});
});
});

View File

@@ -5581,6 +5581,7 @@ export function attach(
}
recordConsoleLogs(fiberInstance, componentLogsEntry);
if (!isInDisconnectedSubtree) {
const isProfilingSupported =
nextFiber.hasOwnProperty('treeBaseDuration');
if (isProfilingSupported) {
@@ -5588,6 +5589,7 @@ export function attach(
}
}
}
}
if ((updateFlags & ShouldResetChildren) !== NoUpdate) {
// We need to crawl the subtree for closest non-filtered Fibers