[DevTools Bug] Could not inspect element with id "1335"

[duanelo]

Website or app

Web app we are developing for a client.

Repro steps

Open the components tab - no components will display
Close the components tab
Open the components tab again, this time the the components show but the error shows on the right pane.

How often does this bug happen?

Often

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.14.0-d0ec283819

Error message (automated)

Could not inspect element with id "1335"

Error call stack (automated)

No response

Error component stack (automated)

InspectedElementContextController@testErrorStack.js:109842:43
Suspense
ErrorBoundary_ErrorBoundary@testErrorStack.js:108452:5
div
InspectedElementErrorBoundaryWrapper@testErrorStack.js:108838:46
NativeStyleContextController@testErrorStack.js:111206:38
div
div
OwnersListContextController@testErrorStack.js:106680:37
SettingsModalContextController@testErrorStack.js:107121:40
Components_Components@testErrorStack.js:113123:52
ErrorBoundary_ErrorBoundary@testErrorStack.js:108452:5
PortaledContent@testErrorStack.js:108571:34
div
div
ProfilerContextController@testErrorStack.js:112748:35
TreeContextController@testErrorStack.js:103336:31
SettingsContextController@testErrorStack.js:103939:35
ModalDialogContextController@testErrorStack.js:108901:38
DevTools_DevTools@testErrorStack.js:115897:27

GitHub query string (automated)

https://api.github.com/search/issues?q=Could not inspect element with id  in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

[bvaughn]

Hi!

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

[bvaughn]

Website or app

Web app we are developing for a client.

More specifically, this field is asking for a website we can access. Just saying "a website we're developing for a client" doesn't get us any way to reproduce the issue.

[sskorol]

@bvaughn just noticed the same issue with the following public app: https://omatsuri.app
I just opened the Components tab, selected an element via inspector, then clicked by the highlighted node in a tree.

DevTools version 4.15.0-c6f2188ed

[bvaughn]

@sskorol Can you repro? I can't (on the website you linked)

[sskorol]

@bvaughn here's a link on video: https://drive.google.com/file/d/1imp0RKqYHDHtWUUX_92RUzNjFMY6mnCF/view?usp=sharing

Note that I'm running it on Chrome Version 92.0.4515.131 (Official Build) (x86_64) / BigSur 11.5.1 / DevTools version 4.15.0-c6f2188ed

Here are additional settings:

[bvaughn]

A video link doesn't help us unfortunately. We need to be able to reproduce the error (so we can inspect the code and see what/why it's breaking).

[sskorol]

You can try pulling their source code and run it locally on the same browser / extension version. As I'm able to reproduce it every time.

[bvaughn]

Unfortunately I already spent some time poking around on the page with DevTools, inspecting things, and was unable to reproduce the error.

[Aniganesh]

@bvaughn I have noticed this happens most often when I'm developing a react app and the app does a hot update because I just updated some code. On production websites it does not happen that often

[bvaughn]

@Aniganesh If you can come up with reliable steps to trigger it (even if they include running a dev server and editing files) I'd love to hear. I'd love to fix this bug.

[HonbraDev]

I think I just accidentally reproduced it with my website.

Here are the reproduction steps:

1. Go to https://timetable.honbra.com/
2. Open React devtools
3. Open the devtool settings and disable the default component filter
4. Select the "b" root element

Here is a video of me reproducing the bug and here is the website source code.

The "b" component is the "App" component and the website is being deployed on Vercel.

Hope this helps.

[bvaughn]

Thank you for the repro, @HonbraDev! 🙇🏼

Interestingly, this did not reproduce the error for me when I first tried it. Then I went to record a video showing that it worked and the second time, it did reproduce for me.

Enabling __DEBUG__ logging shows the following high level sequence:

When the page loads initially (host component filter enabled):

onBridgeOperations
Store onBridgeOperations 1,1,4,1,98,1,105,1,1,11,0,0,1,2,5,1,0,1,0,1,18,5,2,0,2,0
Store Add new root node 1
Store Add node 2 (b) as child of 1
Store Add node 18 (i) as child of 2
[root] (2)
  ▾ <b> (2)
      <i> (1)

When component filters are changed, first the old root is dropped:

onBridgeOperations
Store onBridgeOperations 1,1,0,6
Store Remove root 1

Then re-added with new (unfiltered) tree:

onBridgeOperations
Store onBridgeOperations 1,1,177,1,98,3,100,105,118,1,112,5,105,110,112,117,116,5,108,97,98,101,108,6,98,117,116,116,111,110,1,105,5,116,97,98,108,101,2,116,114,2,116,104,9,56,58,51,48,44,57,58,49,53,11,49,48,58,50,48,44,49,48,58,48,53,11,49,48,58,49,53,44,49,49,58,48,48,11,49,49,58,48,53,44,49,49,58,53,48,11,49,50,58,49,53,44,49,51,58,48,48,11,49,51,58,48,53,44,49,51,58,53,48,11,49,52,58,51,48,44,49,53,58,49,53,11,49,53,58,50,48,44,49,54,58,48,53,11,49,54,58,49,53,44,49,55,58,48,48,11,49,55,58,48,53,44,49,55,58,53,48,2,80,111,2,116,100,2,218,116,2,83,116,2,268,116,2,80,225,1,1,11,0,0,1,2,5,1,0,1,0,1,3,7,2,0,2,0,1,4,7,3,0,3,0,1,5,7,4,0,4,0,1,6,7,4,0,5,0,1,7,7,3,0,3,0,1,8,7,7,0,4,0,1,9,7,7,0,5,0,1,10,7,3,0,3,0,1,11,7,10,0,4,0,1,12,7,10,0,5,0,1,13,7,3,0,3,0,1,14,7,13,0,6,0,1,15,7,13,0,6,0,1,16,7,3,0,3,0,1,17,7,16,0,6,0,1,18,5,2,0,7,0,1,19,7,18,0,8,0,1,20,7,19,0,9,0,1,21,7,20,0,10,0,1,23,7,20,0,10,11,1,24,7,20,0,10,12,1,25,7,20,0,10,13,1,26,7,20,0,10,14,1,27,7,20,0,10,15,1,28,7,20,0,10,16,1,29,7,20,0,10,17,1,30,7,20,0,10,18,1,31,7,20,0,10,19,1,32,7,20,0,10,20,1,34,7,19,0,9,21,1,35,7,34,0,22,0,1,37,7,34,0,22,0,1,38,7,34,0,22,0,1,39,7,34,0,22,0,1,40,7,34,0,22,0,1,41,7,34,0,22,0,1,42,7,19,0,9,23,1,43,7,42,0,22,0,1,45,7,42,0,22,0,1,46,7,42,0,22,0,1,47,7,42,0,22,0,1,48,7,42,0,22,0,1,49,7,42,0,22,0,1,50,7,19,0,9,24,1,51,7,50,0,22,0,1,53,7,50,0,22,0,1,54,7,50,0,22,0,1,55,7,50,0,22,0,1,56,7,50,0,22,0,1,57,7,50,0,22,0,1,58,7,19,0,9,25,1,59,7,58,0,22,0,1,61,7,58,0,22,0,1,62,7,58,0,22,0,1,63,7,58,0,22,0,1,64,7,58,0,22,0,1,65,7,58,0,22,0,1,66,7,19,0,9,26,1,67,7,66,0,22,0,1,69,7,66,0,22,0,1,70,7,66,0,22,0,1,71,7,66,0,22,0,1,72,7,66,0,22,0,1,73,7,66,0,22,0
Store Add new root node 1
Store Add node 2 (b) as child of 1
...

The interesting part is this:

Store Add node 2 (b) as child of 1

The root element ("b") is being added from the backend with an id of 2 in both cases, but when the frontend tries to inspect the element with id 2 an error is thrown.

I think this is actually happening because of an optimization in how the frontend "inspects" an element. When the element is first selected, the backend inspects the props and state. After, the frontend periodically asks the backend to re-inspect. If the element hasn't rendered since it was last inspected, the backend tells the frontend there has been no change. The frontend then returns the same, previously inspected value:

react/packages/react-devtools-shared/src/inspectedElementMutableSource.js

Lines 67 to 72 in bd5bf55

	case 'no-change':
	// This is a no-op for the purposes of our cache.
	inspectedElement = inspectedElementMap.get(element);
	if (inspectedElement != null) {
	return [inspectedElement, type];
	}

In this case though, the inspectedElementMap has no entry for the Element with id 2 because the filter change dropped and recreated all of the elements.

I think the most straight forward way to fix this is to maybe have the backend generate new ids when a root is dropped like this. Need to think it over some and try to catch this case in a unit test first.

---

Edit 1: I think clearing the Fiber-to-id map on the backend when component filters change not be great either because it would cause us to lose any error/warning data associated with a fiber. I think a more narrowly focused fix would be to update this code:

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

Lines 804 to 807 in bd5bf55

	function applyComponentFilters(componentFilters: Array<ComponentFilter>) {
	hideElementsWithTypes.clear();
	hideElementsWithDisplayNames.clear();
	hideElementsWithPaths.clear();

To reset mostRecentlyInspectedElement:

mostRecentlyInspectedElement = null;

[bvaughn]

I believe #22160 fixes this.

[sskorol]

@bvaughn great news! When do you expect to release a new version?

[bvaughn]

Planning a release today.