From b6ff9ad1630b4f1d7cb98e9b9ec46bca315bb302 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 20 Aug 2021 17:55:42 +0200
Subject: [PATCH] DevTools: update error indices when elements are
 added/removed (#22144)

---
 .../src/__tests__/treeContext-test.js         | 58 +++++++++++++++++++
 .../src/devtools/store.js                     | 12 ++++
 2 files changed, 70 insertions(+)

diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
index 0db248c017..30d21c0335 100644
--- a/packages/react-devtools-shared/src/__tests__/treeContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
@@ -2119,6 +2119,64 @@ describe('TreeListContext', () => {
       `);
     });
 
+    it('should update correctly when elements are added/removed', () => {
+      const container = document.createElement('div');
+      let errored = false;
+      function ErrorOnce() {
+        if (!errored) {
+          errored = true;
+          console.error('test-only:one-time-error');
+        }
+        return null;
+      }
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          legacyRender(
+            <React.Fragment>
+              <ErrorOnce key="error" />
+            </React.Fragment>,
+            container,
+          ),
+        ),
+      );
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+             <ErrorOnce key="error"> ✕
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          legacyRender(
+            <React.Fragment>
+              <Child />
+              <ErrorOnce key="error" />
+            </React.Fragment>,
+            container,
+          ),
+        ),
+      );
+
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+             <Child>
+             <ErrorOnce key="error"> ✕
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+             <Child>
+        →    <ErrorOnce key="error"> ✕
+      `);
+    });
+
     it('should update select and auto-expand parts components within hidden parts of the tree', () => {
       const Wrapper = ({children}) => children;
 
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 16bc56ae64..7cd5c41e8b 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -1187,6 +1187,18 @@ export default class Store extends EventEmitter<{|
       console.groupEnd();
     }
 
+    const indicesOfCachedErrorsOrWarningsAreStale =
+      !haveErrorsOrWarningsChanged &&
+      (addedElementIDs.length > 0 || removedElementIDs.size > 0);
+    if (indicesOfCachedErrorsOrWarningsAreStale) {
+      this._cachedErrorAndWarningTuples.forEach(entry => {
+        const index = this.getIndexOfElementID(entry.id);
+        if (index !== null) {
+          entry.index = index;
+        }
+      });
+    }
+
     this.emit('mutated', [addedElementIDs, removedElementIDs]);
   };