mirror of
https://github.com/facebook/react.git
synced 2026-02-21 19:31:52 +00:00
[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:
@@ -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,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -5581,10 +5581,12 @@ export function attach(
|
||||
}
|
||||
recordConsoleLogs(fiberInstance, componentLogsEntry);
|
||||
|
||||
const isProfilingSupported =
|
||||
nextFiber.hasOwnProperty('treeBaseDuration');
|
||||
if (isProfilingSupported) {
|
||||
recordProfilingDurations(fiberInstance, prevFiber);
|
||||
if (!isInDisconnectedSubtree) {
|
||||
const isProfilingSupported =
|
||||
nextFiber.hasOwnProperty('treeBaseDuration');
|
||||
if (isProfilingSupported) {
|
||||
recordProfilingDurations(fiberInstance, prevFiber);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user