Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
SeyyedKhandon opened this issue May 1, 2021 · 7 comments
Closed

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

SeyyedKhandon opened this issue May 1, 2021 · 7 comments
Labels
Component: Developer Tools Resolution: Duplicate Type: Bug

Comments

@SeyyedKhandon
Copy link

SeyyedKhandon commented May 1, 2021 •
edited

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)
This was referenced May 1, 2021
Closed
Closed
@SeyyedKhandon SeyyedKhandon changed the title Error: "Commit tree does not contain fiber "53". This is a bug in React DevTools." Error: "Commit tree does not contain fiber "53","61","304". This is a bug in React DevTools." May 1, 2021
@bvaughn
Copy link
Contributor

bvaughn commented May 1, 2021

@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 bvaughn closed this as completed May 1, 2021
@bvaughn
Copy link
Contributor

bvaughn commented May 1, 2021

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.

@bvaughn bvaughn mentioned this issue May 1, 2021
Closed
@SeyyedKhandon
Copy link
Author

SeyyedKhandon commented May 1, 2021 •
edited

@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
Copy link
Contributor

bvaughn commented May 3, 2021

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.

@bvaughn bvaughn mentioned this issue May 4, 2021
Merged
bvaughn pushed a commit to bvaughn/react that referenced this issue May 4, 2021
DevTools Store emits errors before throwing
ab302c8 
The Store should never throw an Error without also emitting an event. Otherwise Store errors will be invisible to users, but the downstream errors they cause will be reported as bugs. (For example, github.com/facebook/issues/21402)

Emitting an error event allows the ErrorBoundary to show the original error.

Throwing is still valuable for local development and for unit testing the Store itself.
bvaughn pushed a commit that referenced this issue May 4, 2021
DevTools Store emits errors before throwing (#21426)
d19257b 
The Store should never throw an Error without also emitting an event. Otherwise Store errors will be invisible to users, but the downstream errors they cause will be reported as bugs. (For example, github.com//issues/21402)

Emitting an error event allows the ErrorBoundary to show the original error.

Throwing is still valuable for local development and for unit testing the Store itself.
@bvaughn
Copy link
Contributor

bvaughn commented May 4, 2021 •
edited

Interestingly, if I trim down the repro a https://github.com/web-reprex/prettier-list-different to the minimal repro case, then copy that into a new create-react-app – with the same major dependency versions (e.g. react, react-dom, react-router-dom) the bug no longer happens. 🤔

@SeyyedKhandon
Copy link
Author

Interesting!!
Didn't you miss anything?

@bvaughn
Copy link
Contributor

bvaughn commented May 5, 2021

This bug fix has been released as 4.13.1

https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#4131-april-28-2021

koto pushed a commit to koto/react that referenced this issue Jun 15, 2021
@koto
DevTools Store emits errors before throwing (facebook#21426)
09d10e6 
The Store should never throw an Error without also emitting an event. Otherwise Store errors will be invisible to users, but the downstream errors they cause will be reported as bugs. (For example, github.com/facebook/issues/21402)

Emitting an error event allows the ErrorBoundary to show the original error.

Throwing is still valuable for local development and for unit testing the Store itself.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: Developer Tools Resolution: Duplicate Type: Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bvaughn @SeyyedKhandon