react / react/react

[DevTools Bug]: `sayHelloToBackendManager` continuously and pointlessly polls on every page

Open
#27,992 5 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: Developer Tools Status: Unconfirmed Type: Bug
Dominant language
JavaScript
Stars
251k
Forks
51.4k
Avg merge
2d 4h
Merged PRs (30d)
53

Description

Website or app

(all sites)

Repro steps

From any page:

const printMessage = (event) => {console.log(event)};
window.addEventListener('message', printMessage);

Since there isn't a place to actually describe the bug, i'll put it here:
sayHelloToBackendManager is set to poll here until backendInitialized is true: https://github.com/facebook/react/blob/b3003047101b4c7a643788a8faf576f7e370fb45/packages/react-devtools-extensions/src/contentScripts/proxy.js#L17-L23

The polling message has a source react-devtools-content-script: https://github.com/facebook/react/blob/b3003047101b4c7a643788a8faf576f7e370fb45/packages/react-devtools-extensions/src/contentScripts/proxy.js#L41

The switch to set backendInitialized = true checks for the message source react-devtools-bridge: https://github.com/facebook/react/blob/b3003047101b4c7a643788a8faf576f7e370fb45/packages/react-devtools-extensions/src/contentScripts/proxy.js#L65-L66

the react-devtools-bridge sourced message is sent from the backend by whatever invokes this: https://github.com/facebook/react/blob/b3003047101b4c7a643788a8faf576f7e370fb45/packages/react-devtools-extensions/src/contentScripts/backendManager.js#L127

but the handleMessageFromPage function returns if the event.source isn't the window object of the page. Presumably the backend does not have the same window object as the page, or else using postMessage() would be pointless: https://github.com/facebook/react/blob/b3003047101b4c7a643788a8faf576f7e370fb45/packages/react-devtools-extensions/src/contentScripts/proxy.js#L59

The 'react-devtools-bridge' message never flips backendInitialized = true, so the polling never terminates.

This is causing the bitwarden ppl to get a decent amount of heat, and it's actually devtools causing the problem - https://github.com/bitwarden/clients/issues/7575

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/react-devtools-extensions/src/contentScripts/proxy.js, especially the polling at lines 17-23 and message handling around lines 41 and 59-66. Trace the backend message from packages/react-devtools-extensions/src/contentScripts/backendManager.js around line 127 and reproduce the repeated window messages from any page. Done means the backend initialization message is recognized and polling stops.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
devtools
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.