Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DevTools Bug]: Chrome extension gets disconnected from the page after 30sec of inactivity #27119

Closed
jimousse opened this issue Jul 17, 2023 · 5 comments · Fixed by #27215
Closed

[DevTools Bug]: Chrome extension gets disconnected from the page after 30sec of inactivity #27119

jimousse opened this issue Jul 17, 2023 · 5 comments · Fixed by #27215
Labels
Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug

Comments

@jimousse
Copy link

jimousse commented Jul 17, 2023 •
edited
Loading

Website or app

https://react.dev/

Repro steps

Steps:

  1. go to a react page like https://react.dev/
  2. open the devtools Components tab, everything works correctly.
  3. change tab (a non react one) and wait 30 sec - 5 min (not super exact)
  4. go back to the tab that has the react page you're debugging
  5. the Components does not work anywore: you can't select and view components on the page.

Screenshot 2023-07-17 at 3 40 10 PM

My guess is that it's related to Chrome killing the service worker after inactivity on the page. See https://bugs.chromium.org/p/chromium/issues/detail?id=1152255#c185

Screenshot 2023-07-17 at 3 41 13 PM

Going back to the page doesn't seem to wake the serviceworker up.

Chrome: Version 114.0.5735.198 (Official Build) (x86_64)
React Extension: 4.28.0
macOS: 13.4.1

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
@jimousse jimousse added Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug labels Jul 17, 2023
@jimousse jimousse changed the title [DevTools Bug]: the extension gets disconnected from the page after 30sec of inactivity [DevTools Bug]: Chrome extension gets disconnected from the page after 30sec of inactivity Jul 17, 2023
@bharathkalyans
Copy link

Or could it be that some extensions are causing this issue?

@jimousse
Copy link
Author

Google made some changes on the lifetime of a service worker since Chrome 110: https://developer.chrome.com/docs/extensions/whatsnew/#m110-sw-idle
It seems to me that the extension is not prepared to deal with an inactive service worker.

@MrWangJustToDo
Copy link

🙏

@iwanderer
Copy link

Yes, me too..
image

@hoxyq hoxyq mentioned this issue Aug 2, 2023
Closed
@hoxyq hoxyq mentioned this issue Aug 11, 2023
Merged
hoxyq added a commit that referenced this issue Aug 29, 2023
@hoxyq
refactor: refactored devtools browser extension scripts to improve po…
8fbd307 
…rt management and service worker lifetime (#27215)

Fixes #27119,
#27185.

Fixed:
- React DevTools now works as expected when user performs in-tab
navigation, previously it was just stuck.


https://github.com/facebook/react/assets/28902667/b11c5f84-7155-47a5-8b5a-7e90baca5347

- When user closes browser DevTools panel, we now do some cleanup to
disconnect ports and emit shutdown event for bridge. This should fix the
issue with registering duplicated fibers with the same id in Store.

Changed:
- We reconnect proxy port once in 25 seconds, in order to [keep service
worker
alive](https://developer.chrome.com/docs/extensions/whatsnew/#m110-sw-idle).
- Instead of unregistering dynamically injected content scripts, wen now
get list of already registered scripts and filter them out from scripts
that we want to inject again, see dynamicallyInjectContentScripts.js.
- Split `main.js` and `background.js` into multiple files.

Tested on Chromium and Firefox browsers.
@hoxyq
Copy link
Contributor

hoxyq commented Oct 5, 2023

React DevTools extension v4.28.4 has been recently released in Chrome Web store. This version includes various fixes to port and service worker management, so this issue should no longer be reproducible.

Any feedback is much appreciated.

EdisonVan pushed a commit to EdisonVan/react that referenced this issue Apr 15, 2024
@hoxyq @AndyPengc12
refactor: refactored devtools browser extension scripts to improve po…
64fc660 
…rt management and service worker lifetime (facebook#27215)

Fixes facebook#27119,
facebook#27185.

Fixed:
- React DevTools now works as expected when user performs in-tab
navigation, previously it was just stuck.


https://github.com/facebook/react/assets/28902667/b11c5f84-7155-47a5-8b5a-7e90baca5347

- When user closes browser DevTools panel, we now do some cleanup to
disconnect ports and emit shutdown event for bridge. This should fix the
issue with registering duplicated fibers with the same id in Store.

Changed:
- We reconnect proxy port once in 25 seconds, in order to [keep service
worker
alive](https://developer.chrome.com/docs/extensions/whatsnew/#m110-sw-idle).
- Instead of unregistering dynamically injected content scripts, wen now
get list of already registered scripts and filter them out from scripts
that we want to inject again, see dynamicallyInjectContentScripts.js.
- Split `main.js` and `background.js` into multiple files.

Tested on Chromium and Firefox browsers.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug
Projects
None yet
Milestone
No milestone
5 participants
@iwanderer @jimousse @hoxyq @bharathkalyans @MrWangJustToDo