@samitouri / QOS-React-2 / commits / 9b4f847d93

refactor[devtools/extension]: migrate from using setInterval for polling if react is loaded (#27323)

`chrome.devtools.inspectedWindow.eval` is asynchronous, so using it in `setInterval` is a mistake. Sometimes this results into mounting React DevTools twice, and user sees errors about duplicated fibers in store. With these changes, `executeIfReactHasLoaded` executed recursively with a threshold (in case if page doesn't have react). Although we minimize the risk of mounting DevTools twice here, this approach is not the best way to have this problem solved. Dumping some thoughts and ideas that I've tried, but which are out of the scope for this release, because they can be too risky and time-consuming. Potential changes: - Have 2 content scripts: - One `prepareInjection` to notify service worker on renderer attached - One which runs on `document_idle` to finalize check, in case if there is no react - Service worker will notify devtools page that it is ready to mount React DevTools panels or should show that there is no React to be found - Extension port from devtools page should be persistent and connected when `main.js` is executed - Might require refactoring the logic of how we connect devtools and proxy ports Some corner cases: - Navigating to restricted pages, like `chrome://<something>` and back - When react is lazily loaded, like in an attached iframe, or just opened modal - In-tab navigation with pre-cached pages, I think only Chrome does it - Firefox is still on manifest v2 and it doesn't allow running content scripts in ExecutionWorld.MAIN, so it requires a different approach

Ruslan Lesiutin committed Sep 1, 2023 at 16:23 UTC 9b4f847d93aa302c953543ae0631023c06408ad3
1 file changed +28 -21
packages/react-devtools-extensions/src/main/index.js
+28 -21
@@ -29,7 +29,23 @@ import registerEventsLogger from './registerEventsLogger';
29 import getProfilingFlags from './getProfilingFlags';
30 import './requestAnimationFramePolyfill';
31
32 -function executeIfReactHasLoaded(callback) {
32 +// Try polling for at least 5 seconds, in case if it takes too long to load react
33 +const REACT_POLLING_TICK_COOLDOWN = 250;
34 +const REACT_POLLING_ATTEMPTS_THRESHOLD = 20;
35 +
36 +let reactPollingTimeoutId = null;
37 +function clearReactPollingTimeout() {
38 + clearTimeout(reactPollingTimeoutId);
39 + reactPollingTimeoutId = null;
40 +}
41 +
42 +function executeIfReactHasLoaded(callback, attempt = 1) {
43 + reactPollingTimeoutId = null;
44 +
45 + if (attempt > REACT_POLLING_ATTEMPTS_THRESHOLD) {
46 + return;
47 + }
48 +
49 chrome.devtools.inspectedWindow.eval(
50 'window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0',
51 (pageHasReact, exceptionInfo) => {
@@ -53,6 +69,13 @@ function executeIfReactHasLoaded(callback) {
69
70 if (pageHasReact) {
71 callback();
72 + } else {
73 + reactPollingTimeoutId = setTimeout(
74 + executeIfReactHasLoaded,
75 + REACT_POLLING_TICK_COOLDOWN,
76 + callback,
77 + attempt + 1,
78 + );
79 }
80 },
81 );
@@ -413,7 +436,7 @@ function createProfilerPanel() {
436
437 function performInTabNavigationCleanup() {
438 // Potentially, if react hasn't loaded yet and user performs in-tab navigation
416 - clearReactPollingInterval();
439 + clearReactPollingTimeout();
440
441 if (store !== null) {
442 // Store profiling data, so it can be used later
@@ -453,7 +476,7 @@ function performInTabNavigationCleanup() {
476
477 function performFullCleanup() {
478 // Potentially, if react hasn't loaded yet and user closed the browser DevTools
456 - clearReactPollingInterval();
479 + clearReactPollingTimeout();
480
481 if ((componentsPortalContainer || profilerPortalContainer) && root) {
482 // This should also emit bridge.shutdown, but only if this root was mounted
@@ -504,23 +527,14 @@ function mountReactDevTools() {
527 // TODO: display some disclaimer if user performs in-tab navigation to non-react application
528 // when React DevTools panels are already opened, currently we will display just blank white block
529 function mountReactDevToolsWhenReactHasLoaded() {
507 - const checkIfReactHasLoaded = () => executeIfReactHasLoaded(onReactReady);
508 -
509 - // Check to see if React has loaded in case React is added after page load
510 - reactPollingIntervalId = setInterval(() => {
511 - checkIfReactHasLoaded();
512 - }, 500);
513 -
530 function onReactReady() {
515 - clearReactPollingInterval();
531 + clearReactPollingTimeout();
532 mountReactDevTools();
533 }
534
519 - checkIfReactHasLoaded();
535 + executeIfReactHasLoaded(onReactReady);
536 }
537
522 -let reactPollingIntervalId = null;
523 -
538 let bridge = null;
539 let store = null;
540
@@ -543,8 +557,6 @@ chrome.devtools.network.onNavigated.addListener(syncSavedPreferences);
557
558 // Cleanup previous page state and remount everything
559 chrome.devtools.network.onNavigated.addListener(() => {
546 - clearReactPollingInterval();
547 -
560 performInTabNavigationCleanup();
561 mountReactDevToolsWhenReactHasLoaded();
562 });
@@ -557,10 +569,5 @@ if (IS_FIREFOX) {
569 window.addEventListener('beforeunload', performFullCleanup);
570 }
571
560 -function clearReactPollingInterval() {
561 - clearInterval(reactPollingIntervalId);
562 - reactPollingIntervalId = null;
563 -}
564 -
572 syncSavedPreferences();
573 mountReactDevToolsWhenReactHasLoaded();