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

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: https://github.com/facebook/react/blob/bd5bf555e1167e7088a4391e5cd419dccb39714c/packages/react-devtools-shared/src/inspectedElementMutableSource.js#L67-L72

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: https://github.com/facebook/react/blob/bd5bf555e1167e7088a4391e5cd419dccb39714c/packages/react-devtools-shared/src/backend/renderer.js#L804-L807

To reset mostRecentlyInspectedElement:

mostRecentlyInspectedElement = null;

I believe #22160 fixes this.

Planning a release today.