Skip to content

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

New issue
New issue
Closed
#23162
Closed
[DevTools Bug] Could not find ID for Fiber "App"#22970
#23162
Assignees
bvaughn
Labels
Component: Developer ToolsType: Bug
@skrat

Description

@skrat
skrat
opened on Dec 15, 2021

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://github.com/api/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

Activity

skrat
added
Component: Developer Tools
Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug
Type: Bug
on Dec 15, 2021
bvaughn
assigned
skrat
on Dec 17, 2021
bvaughn
added
Resolution: Needs More Information
on Dec 17, 2021
bvaughn

bvaughn commented on Dec 17, 2021

@bvaughn
bvaughn
on Dec 17, 2021
Contributor

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

radioprotector commented on Jan 1, 2022

@radioprotector
radioprotector
on Jan 1, 2022

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

bvaughn commented on Jan 4, 2022

@bvaughn
bvaughn
on Jan 4, 2022
Contributor

Thanks for the repro, @radioprotector!

bvaughn
removed
Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug
Resolution: Needs More Information
on Jan 4, 2022
bvaughn
unassigned
skrat
on Jan 4, 2022
halorgium

halorgium commented on Jan 7, 2022

@halorgium
halorgium
on Jan 7, 2022 · edited by halorgium

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://github.com/api/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

image

bvaughn

bvaughn commented on Jan 20, 2022

@bvaughn
bvaughn
on Jan 20, 2022 · edited by bvaughn
Contributor

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
mentioned this on Jan 21, 2022
bvaughn

bvaughn commented on Jan 21, 2022

@bvaughn
bvaughn
on Jan 21, 2022
Contributor

Repro from #23049 by @d-pollard:

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

  1. Install repo
  2. run repo
  3. visit /playground in your browser of choice.
  4. Navigate to the dev tools, and you should see the error
bvaughn
self-assigned this
on Jan 21, 2022
bvaughn
mentioned this on Jan 21, 2022
bvaughn
closed this as completedin #23162on Jan 21, 2022
bvaughn

bvaughn commented on Jan 24, 2022

@bvaughn
bvaughn
on Jan 24, 2022
Contributor

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.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Component: Developer ToolsType: Bug

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    Participants

    @halorgium@skrat@bvaughn@radioprotector

    Issue actions
      [DevTools Bug] Could not find ID for Fiber "App" · Issue #22970 · facebook/react