Ensure sync-xhr is allowed before reload and profile

packages/react-devtools-shared/src/backend/agent.js

@@ -38,6 +38,7 @@ import type {
   RendererInterface,
 } from './types';
 import type {ComponentFilter} from '../types';
+import {isSynchronousXHRSupported} from './utils';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -492,16 +493,20 @@ export default class Agent extends EventEmitter<{|
   };
 
   reloadAndProfile = (recordChangeDescriptions: boolean) => {
-    sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
-    sessionStorageSetItem(
-      SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
-      recordChangeDescriptions ? 'true' : 'false',
-    );
+    if (isSynchronousXHRSupported()) {
+      sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
+      sessionStorageSetItem(
+        SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
+        recordChangeDescriptions ? 'true' : 'false',
+      );
 
-    // This code path should only be hit if the shell has explicitly told the Store that it supports profiling.
-    // In that case, the shell must also listen for this specific message to know when it needs to reload the app.
-    // The agent can't do this in a way that is renderer agnostic.
-    this._bridge.send('reloadAppForProfiling');
+      // This code path should only be hit if the shell has explicitly told the Store that it supports profiling.
+      // In that case, the shell must also listen for this specific message to know when it needs to reload the app.
+      // The agent can't do this in a way that is renderer agnostic.
+      this._bridge.send('reloadAppForProfiling');
+    } else {
+      this._bridge.send('isSynchronousXHRSupported', false);
+    }
   };
 
   renamePath = ({

packages/react-devtools-shared/src/backend/utils.js

@@ -183,3 +183,10 @@ export function format(
 
   return '' + formatted;
 }
+
+export function isSynchronousXHRSupported() {
+  return (
+    window.document.featurePolicy &&
+    window.document.featurePolicy.allowsFeature('sync-xhr')
+  );
+}

packages/react-devtools-shared/src/bridge.js

@@ -134,6 +134,7 @@ export type BackendEvents = {|
   syncSelectionFromNativeElementsPanel: [],
   syncSelectionToNativeElementsPanel: [],
   unsupportedRendererVersion: [RendererID],
+  isSynchronousXHRSupported: [boolean],
 
   // React Native style editor plug-in.
   isNativeStyleEditorSupported: [

packages/react-devtools-shared/src/devtools/store.js

@@ -77,6 +77,7 @@ export default class Store extends EventEmitter<{|
   supportsProfiling: [],
   supportsReloadAndProfile: [],
   unsupportedRendererVersionDetected: [],
+  supportsSynchronousXHR: [],
 |}> {
   _bridge: FrontendBridge;
 
@@ -141,6 +142,9 @@ export default class Store extends EventEmitter<{|
   _supportsReloadAndProfile: boolean = false;
   _supportsTraceUpdates: boolean = false;
 
+  // Needed for reload and profile - assume supported until told otherwise
+  _supportsSynchronousXHR: boolean = true;
+
   _unsupportedRendererVersionDetected: boolean = false;
 
   // Total number of visible elements (within all roots).
@@ -205,6 +209,10 @@ export default class Store extends EventEmitter<{|
       'unsupportedRendererVersion',
       this.onBridgeUnsupportedRendererVersion,
     );
+    bridge.addListener(
+      'isSynchronousXHRSupported',
+      this.onBridgeSynchronousXHRSupported,
+    );
 
     this._profilerStore = new ProfilerStore(bridge, this, isProfiling);
   }
@@ -365,6 +373,9 @@ export default class Store extends EventEmitter<{|
     // Both of these are required for the reload-and-profile feature to work.
     return this._supportsReloadAndProfile && this._isBackendStorageAPISupported;
   }
+  get supportsSynchronousXHR(): boolean {
+    return this._supportsSynchronousXHR;
+  }
 
   get supportsTraceUpdates(): boolean {
     return this._supportsTraceUpdates;
@@ -1149,4 +1160,10 @@ export default class Store extends EventEmitter<{|
 
     this.emit('unsupportedRendererVersionDetected');
   };
+
+  onBridgeSynchronousXHRSupported = (isSynchronousXHRSupported: boolean) => {
+    this._supportsSynchronousXHR = isSynchronousXHRSupported;
+
+    this.emit('supportsSynchronousXHR');
+  };
 }

packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js

@@ -8,15 +8,17 @@
  */
 
 import * as React from 'react';
-import {useCallback, useContext, useMemo} from 'react';
+import {useCallback, useContext, useMemo, useEffect} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import {BridgeContext, StoreContext} from '../context';
 import {useSubscription} from '../hooks';
+import {ModalDialogContext} from '../ModalDialog';
 
 type SubscriptionData = {|
   recordChangeDescriptions: boolean,
   supportsReloadAndProfile: boolean,
+  supportsSynchronousXHR: boolean,
 |};
 
 export default function ReloadAndProfileButton() {
@@ -28,13 +30,16 @@ export default function ReloadAndProfileButton() {
       getCurrentValue: () => ({
         recordChangeDescriptions: store.recordChangeDescriptions,
         supportsReloadAndProfile: store.supportsReloadAndProfile,
+        supportsSynchronousXHR: store.supportsSynchronousXHR,
       }),
       subscribe: (callback: Function) => {
         store.addListener('recordChangeDescriptions', callback);
         store.addListener('supportsReloadAndProfile', callback);
+        store.addListener('supportsSynchronousXHR', callback);
         return () => {
           store.removeListener('recordChangeDescriptions', callback);
           store.removeListener('supportsReloadAndProfile', callback);
+          store.removeListener('supportsSynchronousXHR', callback);
         };
       },
     }),
@@ -43,8 +48,20 @@ export default function ReloadAndProfileButton() {
   const {
     recordChangeDescriptions,
     supportsReloadAndProfile,
+    supportsSynchronousXHR,
   } = useSubscription<SubscriptionData>(subscription);
 
+  const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
+  useEffect(() => {
+    if (!supportsSynchronousXHR) {
+      modalDialogDispatch({
+        type: 'SHOW',
+        content:
+          'Synchronous XHR is required for reload and profile but is disabled on this site.',
+      });
+    }
+  }, [supportsSynchronousXHR, modalDialogDispatch]);
+
   const reloadAndProfile = useCallback(() => {
     // TODO If we want to support reload-and-profile for e.g. React Native,
     // we might need to also start profiling here before reloading the app (since DevTools itself isn't reloaded).
@@ -61,7 +78,7 @@ export default function ReloadAndProfileButton() {
 
   return (
     <Button
-      disabled={!store.supportsProfiling}
+      disabled={!store.supportsProfiling || !supportsSynchronousXHR}
       onClick={reloadAndProfile}
       title="Reload and start profiling">
       <ButtonIcon type="reload" />