From 92f3414d03d8744c420e15e55d7dc832deb2fa53 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 8 Jul 2021 14:07:15 -0400
Subject: [PATCH] Reset inspected element cache in the event of an error
 (#21821)

---
 .../Components/InspectedElementContext.js      |  2 +-
 .../InspectedElementErrorBoundary.js           | 18 ++++++++++++++++--
 .../views/ErrorBoundary/ErrorBoundary.js       |  6 ++++++
 .../src/inspectedElementCache.js               |  7 +++++++
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index 6234aec4f1..c7dd028c5c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -108,8 +108,8 @@ export function InspectedElementContextController({children}: Props) {
   }
 
   // Don't load a stale element from the backend; it wastes bridge bandwidth.
-  let inspectedElement = null;
   let hookNames: HookNames | null = null;
+  let inspectedElement = null;
   if (!elementHasChanged && element !== null) {
     inspectedElement = inspectElement(element, state.path, store, bridge);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
index 249c374636..76b7d96bf7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
@@ -8,9 +8,14 @@
  */
 
 import * as React from 'react';
-import {useContext} from 'react';
+import {
+  useCallback,
+  useContext,
+  unstable_useCacheRefresh as useCacheRefresh,
+} from 'react';
 import ErrorBoundary from '../ErrorBoundary';
 import {TreeStateContext} from './TreeContext';
+import {clearCacheBecauseOfError} from '../../../inspectedElementCache';
 import styles from './InspectedElementErrorBoundary.css';
 
 type WrapperProps = {|
@@ -23,9 +28,18 @@ export default function InspectedElementErrorBoundaryWrapper({
   // Key on the selected element ID so that changing the selected element automatically hides the boundary.
   // This seems best since an error inspecting one element isn't likely to be relevant to another element.
   const {selectedElementID} = useContext(TreeStateContext);
+
+  const refresh = useCacheRefresh();
+  const handleDsmiss = useCallback(() => {
+    clearCacheBecauseOfError(refresh);
+  }, [refresh]);
+
   return (
     <div className={styles.Wrapper}>
-      <ErrorBoundary key={selectedElementID} canDismiss={true}>
+      <ErrorBoundary
+        key={selectedElementID}
+        canDismiss={true}
+        onBeforeDismissCallback={handleDsmiss}>
         {children}
       </ErrorBoundary>
     </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index 3ffa7536b7..c7aa20dcd5 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -17,6 +17,7 @@ import SuspendingErrorView from './SuspendingErrorView';
 type Props = {|
   children: React$Node,
   canDismiss?: boolean,
+  onBeforeDismissCallback?: () => void,
   store?: Store,
 |};
 
@@ -118,6 +119,11 @@ export default class ErrorBoundary extends Component<Props, State> {
   }
 
   _dismissError = () => {
+    const onBeforeDismissCallback = this.props.onBeforeDismissCallback;
+    if (typeof onBeforeDismissCallback === 'function') {
+      onBeforeDismissCallback();
+    }
+
     this.setState(InitialState);
   };
 
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index 4d12ec70b9..f5d1ba5b98 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -190,3 +190,10 @@ export function checkForUpdate({
     );
   }
 }
+
+export function clearCacheBecauseOfError(refresh: RefreshFunction): void {
+  startTransition(() => {
+    const map = createMap();
+    refresh(createMap, map);
+  });
+}