DevTools bugfix: Ignore duplicate welcome "message" events

Author: Brian Vaughn

packages/react-devtools-extensions/src/backend.js

@@ -6,6 +6,8 @@
 
 'use strict';
 
+let welcomeHasInitialized;
+
 function welcome(event) {
   if (
     event.source !== window ||
@@ -14,6 +16,21 @@ function welcome(event) {
     return;
   }
 
+  // In some circumstances, this method is called more than once for a single welcome message.
+  // The exact circumstances of this are unclear, though it may have to do with 3rd part script event batching.
+  // Regardless, this can cause DevTools to add duplicate elements to the Store (and throw an error)
+  // or worse yet, choke up entirely and freeze the browser.
+  // The simplest solution is to ignore the duplicate events.
+  // See https://github.com/facebook/react/issues/24162
+  if (welcomeHasInitialized) {
+    console.warn(
+      'React DevTools detected duplicate welcome "message" events from the content script.',
+    );
+    return;
+  }
+
+  welcomeHasInitialized = true;
+
   window.removeEventListener('message', welcome);
 
   setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);

packages/react-devtools-extensions/src/contentScript.js

@@ -25,15 +25,15 @@ function handleMessageFromDevtools(message) {
   );
 }
 
-function handleMessageFromPage(evt) {
+function handleMessageFromPage(event) {
   if (
-    evt.source === window &&
-    evt.data &&
-    evt.data.source === 'react-devtools-bridge'
+    event.source === window &&
+    event.data &&
+    event.data.source === 'react-devtools-bridge'
   ) {
     backendInitialized = true;
 
-    port.postMessage(evt.data.payload);
+    port.postMessage(event.data.payload);
   }
 }