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.

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

[DevTools] improve error handling in extension #26068

Merged
merged 3 commits into from
Feb 7, 2023

Conversation

mondaychen
Copy link
Contributor

@mondaychen mondaychen commented Jan 27, 2023

Summary

This is to fix some edge cases I recently observed when developing and using the extension:

  • When you reload the page, there's a chance that a port (most likely the devtools one) is not properly unloaded. In this case, the React DevTools will stop working unless you create a new tab.
  • For unknown reasons, Chrome sometimes spins up two service worker processes. In this case, an error will be thrown "duplicate ID when registering content script" and sometimes interrupt the execution of the rest of service worker.

This is an attempt to make the logic more robust

  • Automatically shutting down the double pipe if the message fails, and allowing the runtime to rebuild the double pipe.
  • Log the error message so Chrome believes we've handled it and will not interrupt the execution.

This also seems to be helpful in fixing #25806.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jan 27, 2023
doublePipe(ports[tab].devtools, ports[tab]['content-script']);
doublePipe(ports[tab].devtools, ports[tab]['content-script'], tab);
// clean up so that we can rebuild the double pipe if the page is reloaded
ports[tab] = null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be moved to shutdown? On line 176, ports[id] is accessed. (although I don't know what it does)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. Fixed.

if (__DEV__) {
console.log(`Broken pipe ${tabId}: `, e);
}
shutdown();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would the postMessage fail because of a JS exception? I'm not sure if it will happen. I think if we shutdown here not during a page load, the devtools would stop working?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not a JS exception. It's a service worker exception when postMessage is fired on a tab that's offloaded. The error message looks like this:
image

It's weird that the listener was not removed since we already have one.onDisconnect.addListener(shutdown). Maybe Chrome doesn't treat reload as disconnect anymore?

@mondaychen mondaychen changed the title [DevTools] rebuild double pipe on extension [DevTools] improve error handling in extension Feb 2, 2023
@mondaychen mondaychen merged commit c12194f into facebook:main Feb 7, 2023
github-actions bot pushed a commit that referenced this pull request Feb 7, 2023
## Summary

This is to fix some edge cases I recently observed when developing and
using the extension:
- When you reload the page, there's a chance that a port (most likely
the devtools one) is not properly unloaded. In this case, the React
DevTools will stop working unless you create a new tab.
- For unknown reasons, Chrome sometimes spins up two service worker
processes. In this case, an error will be thrown "duplicate ID when
registering content script" and sometimes interrupt the execution of the
rest of service worker.

This is an attempt to make the logic more robust
- Automatically shutting down the double pipe if the message fails, and
allowing the runtime to rebuild the double pipe.
- Log the error message so Chrome believes we've handled it and will not
interrupt the execution.

This also seems to be helpful in fixing #25806.

DiffTrain build for [c12194f](c12194f)
[View git log for this commit](https://github.com/facebook/react/commits/c12194f7485f298fadc1e51cfffb93e63d61ad96)
@eps1lon eps1lon mentioned this pull request Feb 7, 2023
1 task
eps1lon added a commit that referenced this pull request Feb 7, 2023
## Summary

Prettier was bumped recently. So any branch not including that bump,
might bring in outdated formatting (e.g.
#26068)

## How did you test this change?

- [x] `yarn prettier-all`
github-actions bot pushed a commit that referenced this pull request Feb 7, 2023
## Summary

Prettier was bumped recently. So any branch not including that bump,
might bring in outdated formatting (e.g.
#26068)

## How did you test this change?

- [x] `yarn prettier-all`

DiffTrain build for [13f4ccf](13f4ccf)
[View git log for this commit](https://github.com/facebook/react/commits/13f4ccfdba06b599a5db7c5a192024cbfa365edc)
jerrydev0927 added a commit to jerrydev0927/react that referenced this pull request Jan 5, 2024
## Summary

Prettier was bumped recently. So any branch not including that bump,
might bring in outdated formatting (e.g.
facebook/react#26068)

## How did you test this change?

- [x] `yarn prettier-all`

DiffTrain build for [13f4ccfdba06b599a5db7c5a192024cbfa365edc](facebook/react@13f4ccf)
[View git log for this commit](https://github.com/facebook/react/commits/13f4ccfdba06b599a5db7c5a192024cbfa365edc)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants