Skip to content

Commit 7608516

Browse files
authored
refactor[react-devtools/extensions]: dont debounce cleanup logic on navigation (#30027)
## Summary There is a race condition in the way we poll if React is on the page and when we actually clear this polling instance. When user navigates to a different page, we will debounce a callback for 500ms, which will: 1. Cleanup previous React polling instance 2. Start a new React polling instance Since the cleanup logic is debounced, there is a small chance that by the time we are going to clean up this polling instance, it will be `eval`-ed on the page, that is using React. For example, when user is navigating from the page which doesn't have React running, to a page that has React running. Next, we incorrectly will try to mount React DevTools panels twice, which will result into conflicts in the Store, and the error will be shown to the user ## How did you test this change? Since this is a race condition, it is hard to reproduce consistently, but you can try this flow: 1. Open a page that is using React, open browser DevTools and React DevTools components panel 2. Open a page that is NOT using React, like google.com, wait ~5 seconds until you see `"Looks like this page doesn't have React, or it hasn't been loaded yet"` message in RDT panel 3. Open a page that is using React, observe the error `"Uncaught Error: Cannot add node "1" because a node with that id is already in the Store."` Couldn't been able to reproduce this with these changes.
1 parent 27e9476 commit 7608516

File tree

1 file changed

+10
-4
lines changed
  • packages/react-devtools-extensions/src/main

1 file changed

+10
-4
lines changed

packages/react-devtools-extensions/src/main/index.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -412,13 +412,19 @@ chrome.devtools.network.onNavigated.addListener(syncSavedPreferences);
412412
// into subscribing to the same events from Bridge and window multiple times
413413
// In this case, we will handle `operations` event twice or more and user will see
414414
// `Cannot add node "1" because a node with that id is already in the Store.`
415-
const debouncedOnNavigatedListener = debounce(() => {
415+
const debouncedMountReactDevToolsCallback = debounce(
416+
mountReactDevToolsWhenReactHasLoaded,
417+
500,
418+
);
419+
420+
// Clean up everything, but start mounting React DevTools panels if user stays at this page
421+
function onNavigatedToOtherPage() {
416422
performInTabNavigationCleanup();
417-
mountReactDevToolsWhenReactHasLoaded();
418-
}, 500);
423+
debouncedMountReactDevToolsCallback();
424+
}
419425

420426
// Cleanup previous page state and remount everything
421-
chrome.devtools.network.onNavigated.addListener(debouncedOnNavigatedListener);
427+
chrome.devtools.network.onNavigated.addListener(onNavigatedToOtherPage);
422428

423429
// Should be emitted when browser DevTools are closed
424430
if (__IS_FIREFOX__) {

0 commit comments

Comments
 (0)