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

[skrat]

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

[bvaughn]

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]

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]

Thanks for the repro, @radioprotector!

[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://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]

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]

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