[DevTools Bug] Could not find ID for Fiber "App" #22970

skrat · 2021-12-15T20:20:58Z

Website or app

not public

Repro steps

I have two code bases in a yarn workspaces linked monorepo. One is using react-three-fiber (the lib), and the other one is really thin wrapper around it with some simple UI, just couple of buttons. Both are using multiple (3) zustand stores.

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.21.0-2f8f60ca8

Error message (automated)

Could not find ID for Fiber "App"

Error call stack (automated)

at getFiberIDThrows (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:5836:11)
    at fiberToSerializedElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:7543:11)
    at inspectElementRaw (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:7712:21)
    at Object.inspectElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8004:38)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:9837:56
    at Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:4257:18)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:10500:12
    at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:11737:9)

Error component stack (automated)

at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:38726:3)
    at Suspense
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37092:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37572:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40146:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35254:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35695:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42085:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37092:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37222:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37256:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37222:3)
    at SchedulingProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43423:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:41711:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30116:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30727:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37635:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53004:3)

GitHub query string (automated)

https://api.github.com/search/issues?q=Could not find ID for Fiber "App" in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

The text was updated successfully, but these errors were encountered:

bvaughn · 2021-12-17T14:28:28Z

Hi @skrat. I'm sorry you ran into this problem 😦

Unfortunately, it doesn't look like this issue has enough info for one of us to reproduce it though. This means that it's going to be very hard for us to fix.

Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

radioprotector · 2022-01-01T21:20:36Z

I have experienced the same issue in Firefox, also with the use of react-three-fiber and zustand. If it helps isolate the issue, I only experience it for development builds but do not experience it for production builds.

Repository: https://github.com/radioprotector/edenator
Browser: Firefox 95.0.2 (64-bit), Windows 10

Sample video: https://user-images.githubusercontent.com/8010294/147860358-1777e9ce-7256-412b-9314-f19856e68964.mp4

The error message in the pane:

The error was thrown fiberToSerializedElement@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:7878:11
inspectElementRaw@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:8047:21
inspectElement@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:8350:38
agent_Agent/<@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:10183:56
emit@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:4225:18
Bridge/this._wallUnlisten<@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:4868:14
listener@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:12176:11
EventListener.handleEvent*listen@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:12179:14
Bridge@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:4866:31
setup@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:12169:18
welcome@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:12148:8
EventListener.handleEvent*@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:12151:8
__webpack_require__@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:20:30
@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:84:18
@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/react_devtools_backend.js:87:10

The error occurred InspectedElementContextController@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:38949:43
Suspense
ErrorBoundary_ErrorBoundary@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:37307:5
div
InspectedElementErrorBoundaryWrapper@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:37795:46
NativeStyleContextController@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:40435:38
div
div
OwnersListContextController@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:33293:37
SettingsModalContextController@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:35906:40
Components_Components@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:42439:52
ErrorBoundary_ErrorBoundary@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:37307:5
div
div
ThemeProvider@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:37449:23
PortaledContent@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:37479:34
div
div
div
ThemeProvider@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:37449:23
TimelineContextController@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:42618:35
ProfilerContextController@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:42064:35
TreeContextController@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:30203:31
SettingsContextController@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:30825:35
ModalDialogContextController@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:37858:38
DevTools_DevTools@moz-extension://6c644801-bf3a-4b20-a08b-6438f31fc2d8/build/main.js:53731:27

bvaughn · 2022-01-04T15:31:30Z

Thanks for the repro, @radioprotector!

halorgium · 2022-01-07T00:58:57Z

I, too, have had this issue and spent a bit of time reducing the surface area to a really small combo of react + canvas.

https://github.com/halorgium/react-missing-fiber-devtools-repro

Hopefully, this breaks in a way that is helpful.

DevTools version

4.22.0-0229baee2

Error message

Could not find ID for Fiber "Component1"

Error call stack

    at getFiberIDThrows (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:6140:11)
    at fiberToSerializedElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:7878:11)
    at inspectElementRaw (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8047:21)
    at Object.inspectElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8350:38)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:10183:56
    at Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:4225:18)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:4868:14
    at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:12176:9)

Error component stack


    at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:38950:3)
    at Suspense
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37307:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37796:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40436:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:33294:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35907:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42439:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37307:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37450:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37480:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37450:3)
    at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42619:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42065:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30204:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30826:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37859:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53732:3)

GitHub query string

https://api.github.com/search/issues?q=Could not find ID for Fiber "Component1" in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

bvaughn · 2022-01-20T21:53:57Z

Possibly fixed by #23156.

Possible requires an additional change made to this method to replace getFiberIDThrows with getFiberIDUnsafe (and we can just skip Fibers with a null ID).

react/packages/react-devtools-shared/src/backend/renderer.js

Lines 1289 to 1306 in 7bee137

    
           function updateContextsForFiber(fiber: Fiber) { 
        
             switch (getElementTypeForFiber(fiber)) { 
        
               case ElementTypeClass: 
        
               case ElementTypeForwardRef: 
        
               case ElementTypeFunction: 
        
               case ElementTypeMemo: 
        
                 if (idToContextsMap !== null) { 
        
                   const id = getFiberIDThrows(fiber); 
        
                   const contexts = getContextsForFiber(fiber); 
        
                   if (contexts !== null) { 
        
                     idToContextsMap.set(id, contexts); 
        
                   } 
        
                 } 
        
                 break; 
        
               default: 
        
                 break; 
        
             } 
        
           }

bvaughn · 2022-01-21T15:39:32Z

Repro from #23049 by @d-pollard:

https://github.com/d-pollard/react-konva-devtools-issue

Install repo
run repo
visit /playground in your browser of choice.
Navigate to the dev tools, and you should see the error

bvaughn · 2022-01-24T15:07:21Z

Fix released on Jan 24 as version 4.23.0:
https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md#4230-january-24-2022

Give it a couple of days to propagate to all of the browsers. (Chrome usually takes the longest.)

skrat added Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug labels Dec 15, 2021

bvaughn assigned skrat Dec 17, 2021

bvaughn added the Resolution: Needs More Information label Dec 17, 2021

bvaughn removed Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Resolution: Needs More Information labels Jan 4, 2022

bvaughn unassigned skrat Jan 4, 2022

bvaughn mentioned this issue Jan 21, 2022

[DevTools Bug]: Error: Could not find ID for Fiber "..." #23049

Closed

bvaughn self-assigned this Jan 21, 2022

bvaughn mentioned this issue Jan 21, 2022

DevTools should not crawl unmounted subtrees when profiling starts #23162

Merged

bvaughn closed this as completed in #23162 Jan 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DevTools Bug] Could not find ID for Fiber "App" #22970

[DevTools Bug] Could not find ID for Fiber "App" #22970

skrat commented Dec 15, 2021

bvaughn commented Dec 17, 2021

radioprotector commented Jan 1, 2022

bvaughn commented Jan 4, 2022

halorgium commented Jan 7, 2022 •

edited

Loading

bvaughn commented Jan 20, 2022 •

edited

Loading

bvaughn commented Jan 21, 2022

bvaughn commented Jan 24, 2022

[DevTools Bug] Could not find ID for Fiber "App" #22970

[DevTools Bug] Could not find ID for Fiber "App" #22970

Comments

skrat commented Dec 15, 2021

Website or app

Repro steps

How often does this bug happen?

DevTools package (automated)

DevTools version (automated)

Error message (automated)

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)

bvaughn commented Dec 17, 2021

radioprotector commented Jan 1, 2022

bvaughn commented Jan 4, 2022

halorgium commented Jan 7, 2022 • edited Loading

bvaughn commented Jan 20, 2022 • edited Loading

bvaughn commented Jan 21, 2022

bvaughn commented Jan 24, 2022

halorgium commented Jan 7, 2022 •

edited

Loading

bvaughn commented Jan 20, 2022 •

edited

Loading