Error: "Commit tree does not contain fiber "53","61","304". This is a bug in React DevTools."

[SeyyedKhandon]

I was in the middle of using dev-tools Profiler to check what components will be re-rendered, and this error happened when I pressed the stop button of the recorder...

This is the reprex project links: https://github.com/web-reprex/prettier-list-different

---

Please do not remove the text below this line

DevTools version: 4.13.0-2a7bb41548

Call stack: at updateTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:20430:21)
at getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:20275:26)
at ProfilingCache_ProfilingCache.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:20803:11)
at CommitFlamegraphAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35651:33)
at Qh (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13178:7)
at Bi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13879:7)
at uk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16673:86)
at tk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16193:11)
at qk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16185:23)
at jk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16169:5)

Component stack: at CommitFlamegraphAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35634:34)
at div
at div
at div
at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29016:3)
at Profiler_Profiler (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37064:34)
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30336:5)
at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30416:5)
at div
at div
at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34462:3)
at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25252:3)
at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25855:3)
at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30558:3)
at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37572:3)

[bvaughn]

@SeyyedKhandon I'm sorry you experienced this bug! 🙇

This bug has already been reported (#18859) so I'm going to mark this issue as a duplicate and close it.

However this error remains the highest reported DevTools bug and we still don't have a repro case so that I can fix it. Do you remember how to repro the error you saw above? Can you share the steps with me if so? It would be very helpful! Thank you 🙇🏼

[bvaughn]

I've checked out your project at https://github.com/web-reprex/prettier-list-different and run it locally. When I do, I'm able to see an error in DevTools:

Error: Cannot remove node "25" because no matching node was found in the Store.

This is very promising! I'll dig in.

[SeyyedKhandon]

@bvaughn ,Here is a video on one way of reprex for that codebase:
Thank you for your effort and care about solving issues.🌹🙏
https://user-images.githubusercontent.com/59599950/116784890-eac76e00-aaab-11eb-9a4b-2bb2ca595961.mp4

[bvaughn]

I think the case I'm seeing is this:

1. During initial render, a Suspense component is mounted.
2. It has an Offscreen child, b'c of how Suspense is implemented internally, but DevTools hides this implementation detail to avoid confusion. (What this actually means is that the DevTools backend never even tells the frontend that the Offscreen component exists.)
3. During login, stuff is updated and for some reason, the backend thinks it needs to unmount the Offscreen component (even though the frontend never knew about it). This causes an error to be thrown.