Reset inspected element cache in the event of an error (#21821)

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);
 

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>

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);
   };
 

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);
+  });
+}