[DevTools Bug] Could not find node with id "18" in commit tree

[wolfcomp]

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_URL to https://apimodelsaber.rainemods.io in 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)

at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25574:13
    at Map.forEach (<anonymous>)
    at RankedChartBuilder_getChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25570:24)
    at ProfilingCache_ProfilingCache.getRankedChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25686:11)
    at CommitRankedAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43680:32)
    at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:15400:7)
    at zj (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16741:7)
    at jl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:19201:86)
    at il (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:18756:11)
    at hl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:18748:23)

Error component stack (automated)

at CommitRankedAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43659:34)
    at div
    at div
    at div
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35975:3)
    at Profiler_Profiler (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53276:34)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37375:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37548:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3)
    at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42700:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42146:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30256:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30878:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37927:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53807:3)

GitHub query string (automated)

https://api.github.com/search/issues?q=Could not find node with id  in commit tree in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

[lunaruan]

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!

[wolfcomp]

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.

[wolfcomp]

If you try and load, https://modelsaber.rainemods.io/ you should get access to the profiler on the page now.

[wolfcomp]

Update from my side.
Tested the same thing on my laptop I use for work, and it seems to not be happening there.
Will test more on the pc that causes the error and see if it's possible that it has a corrupt install of the extension.

[wolfcomp]

Update again.
It seems to revolve around Suspense that causes the crash, and it's only on the Ranked tab and not Flamegraph tab.

[ImanMahmoudinasab]

I have the same issue.

Uncaught Error: Could not find node with id "13" in commit tree

Version
4.23.0 (1/24/2022)

more info:

The error was thrown at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25574:13
    at Map.forEach (<anonymous>)
    at RankedChartBuilder_getChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25570:24)
    at ProfilingCache_ProfilingCache.getRankedChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25686:11)
    at CommitRankedAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43680:32)
    at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:15400:7)
    at zj (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16741:7)
    at jl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:19201:86)
    at il (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:18756:11)
    at hl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:18748:23)

The error occurred at CommitRankedAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43659:34)
    at div
    at div
    at div
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35975:3)
    at Profiler_Profiler (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53276:34)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37375:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37548:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37518:3)
    at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42700:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42146:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30256:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30878:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37927:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53807:3)

it's only on the Ranked tab and not Flamegraph tab.

The same for me.

[ImanMahmoudinasab]

@lunaruan Any update on this issue? This issue stops us from debugging our app.

[lunaruan]

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

[wolfcomp]

Code: https://github.com/ModelSaber/ModelSaber.Main
Website: https://modelsaber.rainemods.io

The react app is in ClientApp in the code base as it is running with an ASP.NET instance as the server

[bvaughn]

If you try and load, https://modelsaber.rainemods.io/ you should get access to the profiler on the page now.

I can repro the error being reported by @wolfcomp by:

1. Reload and profile
2. Click the "Ranked" tab
3. Click on the 2nd commit

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 getRankedChartData (or the code it calls) which does at least help narrow it down.

The specific error, which I'm able to consistently reproduce, is:

RankedChartBuilder.js - Uncaught Error: Could not find node with id "16" in commit tree

Digging in further, I see that this is a context consumer component (for the Router router). This component is also not filtered out of the tree– although it may be part of a suspended subtree.

[bvaughn]

@wolfcomp

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 build.sh in the main repo, for one.

---

Edit 2: Looks like systemctl is required after the dotnet build, and I don't have a Linux box. Maybe there's a launchctl equivalent– but really, I don't want to get bogged down in this GraphQL stuff. Is there some way to just stub out the backend response? I'll try to just hard code that.

---

Edit 3: I stubbed out the GraphQL server, and now I'm also seeing another error in the console: SyntaxError: Unexpected token < in JSON at position 0. This one seems to be non-fatal though so I'm going to ignore it.

---

Edit 4: I can still repro the error even if I stub the GraphQL responses as shown below:

GetModelCursors

{
  "data": {
    "modelCursors": [
      "p37bdvs7D0-RdRJe8vVTfA"
    ]
  }
}

GetModels

{
  "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:

App.tsx

import { Route, Routes } from "react-router";
const Home = lazy(() => import("./Home"));

function App(): any {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  );
};

Home.tsx

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:
Index.tsx

// This is required:
const GQLClient = lazy(() => import("./GQLClient"));

// This isn't sufficient to repro:
import GQLClient from "./components/GQLClient";

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)