DevTools bugfix: Ignore duplicate welcome "message" events (#24186)
Brian Vaughn committed
Mar 28, 2022 at 14:25 UTC
ba0aee5d71874202ebf8760a802bb1d6f2f61a5e
2 files changed
+26
-5
packages/react-devtools-extensions/src/backend.js
+21
@@ -6,6 +6,8 @@
6
7
'use strict';
8
9
+let welcomeHasInitialized = false;
10
+
11
function welcome(event) {
12
if (
13
event.source !== window ||
@@ -14,6 +16,25 @@ function welcome(event) {
16
return;
17
}
18
19
+ // In some circumstances, this method is called more than once for a single welcome message.
20
+ // The exact circumstances of this are unclear, though it seems related to 3rd party event batching code.
21
+ //
22
+ // Regardless, call this method multiple times can cause DevTools to add duplicate elements to the Store
23
+ // (and throw an error) or worse yet, choke up entirely and freeze the browser.
24
+ //
25
+ // The simplest solution is to ignore the duplicate events.
26
+ // To be clear, this SHOULD NOT BE NECESSARY, since we remove the event handler below.
27
+ //
28
+ // See https://github.com/facebook/react/issues/24162
29
+ if (welcomeHasInitialized) {
30
+ console.warn(
31
+ 'React DevTools detected duplicate welcome "message" events from the content script.',
32
+ );
33
+ return;
34
+ }
35
+
36
+ welcomeHasInitialized = true;
37
+
38
window.removeEventListener('message', welcome);
39
40
setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
packages/react-devtools-extensions/src/contentScript.js
+5
-5
@@ -25,15 +25,15 @@ function handleMessageFromDevtools(message) {
25
);
26
}
27
28
-function handleMessageFromPage(evt) {
28
+function handleMessageFromPage(event) {
29
if (
30
- evt.source === window &&
31
- evt.data &&
32
- evt.data.source === 'react-devtools-bridge'
30
+ event.source === window &&
31
+ event.data &&
32
+ event.data.source === 'react-devtools-bridge'
33
) {
34
backendInitialized = true;
35
36
- port.postMessage(evt.data.payload);
36
+ port.postMessage(event.data.payload);
37
}
38
}
39