Reset inspected element cache in the event of an error (#21821)
Brian Vaughn committed
Jul 8, 2021 at 14:07 UTC
92f3414d03d8744c420e15e55d7dc832deb2fa53
4 files changed
+30
-3
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+1
-1
@@ -108,8 +108,8 @@ export function InspectedElementContextController({children}: Props) {
108
}
109
110
// Don't load a stale element from the backend; it wastes bridge bandwidth.
111
- let inspectedElement = null;
111
let hookNames: HookNames | null = null;
112
+ let inspectedElement = null;
113
if (!elementHasChanged && element !== null) {
114
inspectedElement = inspectElement(element, state.path, store, bridge);
115
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
+16
-2
@@ -8,9 +8,14 @@
8
*/
9
10
import * as React from 'react';
11
-import {useContext} from 'react';
11
+import {
12
+ useCallback,
13
+ useContext,
14
+ unstable_useCacheRefresh as useCacheRefresh,
15
+} from 'react';
16
import ErrorBoundary from '../ErrorBoundary';
17
import {TreeStateContext} from './TreeContext';
18
+import {clearCacheBecauseOfError} from '../../../inspectedElementCache';
19
import styles from './InspectedElementErrorBoundary.css';
20
21
type WrapperProps = {|
@@ -23,9 +28,18 @@ export default function InspectedElementErrorBoundaryWrapper({
28
// Key on the selected element ID so that changing the selected element automatically hides the boundary.
29
// This seems best since an error inspecting one element isn't likely to be relevant to another element.
30
const {selectedElementID} = useContext(TreeStateContext);
31
+
32
+ const refresh = useCacheRefresh();
33
+ const handleDsmiss = useCallback(() => {
34
+ clearCacheBecauseOfError(refresh);
35
+ }, [refresh]);
36
+
37
return (
38
<div className={styles.Wrapper}>
28
- <ErrorBoundary key={selectedElementID} canDismiss={true}>
39
+ <ErrorBoundary
40
+ key={selectedElementID}
41
+ canDismiss={true}
42
+ onBeforeDismissCallback={handleDsmiss}>
43
{children}
44
</ErrorBoundary>
45
</div>
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+6
@@ -17,6 +17,7 @@ import SuspendingErrorView from './SuspendingErrorView';
17
type Props = {|
18
children: React$Node,
19
canDismiss?: boolean,
20
+ onBeforeDismissCallback?: () => void,
21
store?: Store,
22
|};
23
@@ -118,6 +119,11 @@ export default class ErrorBoundary extends Component<Props, State> {
119
}
120
121
_dismissError = () => {
122
+ const onBeforeDismissCallback = this.props.onBeforeDismissCallback;
123
+ if (typeof onBeforeDismissCallback === 'function') {
124
+ onBeforeDismissCallback();
125
+ }
126
+
127
this.setState(InitialState);
128
};
129
packages/react-devtools-shared/src/inspectedElementCache.js
+7
@@ -190,3 +190,10 @@ export function checkForUpdate({
190
);
191
}
192
}
193
+
194
+export function clearCacheBecauseOfError(refresh: RefreshFunction): void {
195
+ startTransition(() => {
196
+ const map = createMap();
197
+ refresh(createMap, map);
198
+ });
199
+}