[DevTools Bug] Could not find node with id "18" in commit tree #23283
Comments
wolfcomp
added
Component: Developer Tools
Status: Unconfirmed
|
Hey! Thanks so much for reporting! I tried going through your repro steps but I got this error Could you let me know how to fix this so I can start your app or could you maybe make a smaller repro (perhaps in codesandbox) so it's easier for me to test? Thanks! |
|
I could possibly setup the dev server to run in Debug mode instead of Release so all of the development scripts are running for React. I'm also a little confused why you are getting postcss errors when that comes from react-scripts. |
|
If you try and load, https://modelsaber.rainemods.io/ you should get access to the profiler on the page now. |
|
Update from my side. |
|
Update again. |
|
I have the same issue.
Version more info:
The same for me. |
|
@lunaruan Any update on this issue? This issue stops us from debugging our app. |
|
Hey, could either of you give me access to the codebase where this crash is happening? Unfortunately without a code repro I'm unable to debug this issue |
|
Code: https://github.com/ModelSaber/ModelSaber.Main The react app is in |
I can repro the error being reported by @wolfcomp by:
It is interesting/unexpected that this bug only happens when the Ranked tab is open. I think that means the error must be somewhere in The specific error, which I'm able to consistently reproduce, is:
Digging in further, I see that this is a context consumer component (for the |
|
I tried to checkout the main modelsaber repo and get the client running locally so I could narrow down the repro case, but it seems like the READMEs are missing some instructions for how to get things running (like how to start the Apollo server). Any pointers? Edit 1: Looks like I need to install .NET and run Edit 2: Looks like Edit 3: I stubbed out the GraphQL server, and now I'm also seeing another error in the console: Edit 4: I can still repro the error even if I stub the GraphQL responses as shown below:
{
"data": {
"modelCursors": [
"p37bdvs7D0-RdRJe8vVTfA"
]
}
}
{
"data": {
"models": {
"items": [],
"pageInfo": {
"endCursor": "p37bdvs7D0-RdRJe8vVTfA",
"hasNextPage": true,
"hasPreviousPage": false,
"__typename": "PageInfo"
},
"__typename": "ModelConnection"
}
}
}Edit 5: I have been able to reduce the client app to a pretty small shell while still reproducing the error:
import { Route, Routes } from "react-router";
const Home = lazy(() => import("./Home"));
function App(): any {
return (
<Routes>
<Route path="/" element={<Home />} />
</Routes>
);
};
function Home(): any {
return null;
};Edit 6: I have not been able to repro this in a Code Sandbox (codesandbox.io/s/nameless-monad-opbrrv) even though I'm using the same version of react, react-dom, react-router, and react-router-dom. Edit 7: Seems like this is a key part of the repro: Not sure how to move this into Code Sandbox yet (getting a runtime error from the "graphql" package at the moment) but still looking. Edit 8: I've got a repro (see below) |
|
I've got a repro that's been reduced about far as I am able to reduce it: // Does repro the error
import React, { lazy, Suspense, useEffect } from "react";
import { render } from "react-dom";
function Component({ children = null }) {
return children;
}
let resolveComponentA = null;
const LazyComponentA = lazy(() => new Promise(resolve => {
resolveComponentA = () => {
resolve({ default: Component });
};
}));
let resolveComponentB = null;
const LazyComponentB = lazy(() => new Promise(resolve => {
resolveComponentB = () => {
resolve({ default: Component });
};
}));
function Index() {
useEffect(() => {
setTimeout(() => {
resolveComponentA();
}, 500);
}, []);
return (
<React.StrictMode>
<Suspense fallback={null}>
<LazyComponentA>
<App />
</LazyComponentA>
</Suspense>
</React.StrictMode>
);
}
function App() {
useEffect(() => {
setTimeout(() => {
resolveComponentB();
}, 500);
}, []);
return <LazyComponentB />;
}
render(<Index />, document.getElementById("root"));Repro steps:
Reliably throws: I have tried (unsuccessfully so far) to replicate this repro in a Jest test: // Does not repro the error
function Component({ children = null, label }) {
return children;
}
let resolveComponentA = null;
const ComponentA = React.lazy(() => new Promise(resolve => {
resolveComponentA = () => {
resolve({ default: Component });
};
}));
let resolveComponentB = null;
const ComponentB = React.lazy(() => new Promise(resolve => {
resolveComponentB = () => {
resolve({ default: Component });
};
}));
function Index() {
React.useEffect(() => {
setTimeout(() => {
resolveComponentA();
}, 500);
}, []);
return (
<React.StrictMode>
<React.Suspense fallback={null}>
<ComponentA label="A">
<App />
</ComponentA>
</React.Suspense>
</React.StrictMode>
);
}
function App() {
React.useEffect(() => {
setTimeout(() => {
resolveComponentB();
}, 500);
}, []);
return <ComponentB label="B" />;
}
utils.act(() => store.profilerStore.startProfiling());
await utils.actAsync(async () => {
legacyRender(<Index />, document.createElement('div'));
});
utils.act(() => store.profilerStore.stopProfiling());
const TestRenderer = utils.requireTestRenderer();
const rootID = store.roots[0];
let renderFinished = false;
function Validator({commitIndex, rootID}) {
const commitTree = store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
const chartData = store.profilerStore.profilingCache.getRankedChartData(
{
commitIndex,
commitTree,
rootID,
},
);
renderFinished = true;
return null;
}
for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
renderFinished = false;
utils.act(() => {
TestRenderer.create(
<Validator commitIndex={commitIndex} rootID={rootID} />,
);
});
expect(renderFinished).toBe(true);
} |
|
Inspecting DevTools internals after this error has occurred, I can see that the But for some reason, the tree built up by the I have occasionally seen the Profiler not error (and the Update Looking closer, I see the |
|
Picking back up on this thread today. The problem is definitely a misalignment between the operations arrays and the commit data. I think this might be because the backend is preemptively filtering out an "empty" commit (nothing that affects the profiler UI?) which causes the ranked builder to falter. Need to dig in a little more. Edit 1: I think the issue might be that we filter "empty" commits (or commits that fall below a certain duration threshold) in one place – but we don't respect that filter in another (the chart builder). Need to look at this closer after lunch. -- Edit 2: I think this is the culprit: react/packages/react-devtools-shared/src/backend/renderer.js Lines 2725 to 2730 in cb1e7b1 I'm not sure why it only affects ranked view yet though. |
|
@lunaruan any progress on this bug? |
|
@ImanMahmoudinasab There is a trail of comments on the issue right above yours that show progress. |
|
#24031 has the fix. Soon as it's reviewed (tomorrow?) we'll release it to NPM and the browsers. |
|
@bvaughn Thank you for your great work! |
|
4.24 release will be made today. Fix should roll out as soon as the release goes live. |
Website or app
https://github.com/ModelSaber/ModelSaber.Main
Repro steps
Just try and load the 2/5 and 3/5 report from a reload and start profiling instance.
Change
REACT_APP_API_URLtohttps://apimodelsaber.rainemods.ioin order to launch the app without needing the full .NET 6 environment and the corresponding data in the postgres database.How often does this bug happen?
Every time
DevTools package (automated)
react-devtools-extensions
DevTools version (automated)
4.23.0-e28a0db22
Error message (automated)
Could not find node with id "18" in commit tree
Error call stack (automated)
Error component stack (automated)
GitHub query string (automated)
The text was updated successfully, but these errors were encountered: