Port Disconnection

[jguerrero35]

Description

After an undetermined amount of time of idling, Reactime will disconnect from Chrome's port. Upon disconnection from Chrome's port, Reactime will no longer be able to communicate with background scripts and will no longer respond to any user inputs or record state changes.

Hitting reconnect will notify the user that Reactime already appears to be connected. Accepting the reload of the extension will fail to detect the React Dev Tools.

The current workaround is to refresh Reactime within the Chrome Extension tab, refresh the page, and then reload the frame within the Chrome Dev Tools. Clicking on the Reconnect button will occasionally result in Reactime failing to find a target application, requiring the above steps to guarantee a connection.

Reproduction

Currently, there is no way to consistently reproduce this bug, however, it appears to happen after allowing Reactime to idle for some time.

System information

System:
OS: macOS 14.3.1
CPU: (8) arm64 Apple M2
Memory: 97.17 MB / 8.00 GB
Shell: 3.6.1 - /opt/homebrew/bin/fish
Binaries:
Node: 18.18.2 - ~/Desktop/codesmith/reactime-v24/node_modules/.bin/node
npm: 10.2.4 - /opt/homebrew/bin/npm
Browsers:
Chrome: 122.0.6261.57
Safari: 17.3.1
npmPackages:
@emotion/react: ^11.11.1 => 11.11.3
@emotion/styled: ^11.11.0 => 11.11.0
@mui/icons-material: ^5.15.1 => 5.15.5
@mui/material: ^5.15.1 => 5.15.5
@mui/system: ^5.15.1 => 5.15.5
@reduxjs/toolkit: ^2.0.1 => 2.0.1
@testing-library/jest-dom: ^6.1.5 => 6.2.0
@testing-library/react: ^14.1.2 => 14.1.2
@testing-library/user-event: ^14.5.1 => 14.5.2
@types/chrome: ^0.0.254 => 0.0.254
@types/jest: ^29.5.11 => 29.5.11
@types/node: ^20.10.5 => 20.11.5
@typescript-eslint/eslint-plugin: ^6.15.0 => 6.19.0
@visx/axis: ^3.5.0 => 3.5.0
@visx/event: ^3.3.0 => 3.3.0
@visx/gradient: ^3.3.0 => 3.3.0
@visx/grid: ^3.5.0 => 3.5.0
@visx/group: ^3.3.0 => 3.3.0
@visx/hierarchy: ^3.3.0 => 3.3.0
@visx/responsive: ^3.3.0 => 3.3.0
@visx/scale: ^3.5.0 => 3.5.0
@visx/shape: ^3.5.0 => 3.5.0
@visx/text: ^3.3.0 => 3.3.0
@visx/tooltip: ^3.3.0 => 3.3.0
copy-webpack-plugin: ^11.0.0 => 11.0.0
cross-env: ^7.0.3 => 7.0.3
css-loader: ^6.8.1 => 6.9.1
d3: ^7.8.5 => 7.8.5
d3-scale-chromatic: ^3.0.0 => 3.0.0
d3-shape: ^3.2.0 => 3.2.0
dotenv: ^16.3.1 => 16.3.2
eslint-plugin-jest: ^27.6.0 => 27.6.3
eslint-plugin-jest-dom: ^5.1.0 => 5.1.0
eslint-plugin-react: ^7.33.2 => 7.33.2
eslint-plugin-react-hooks: ^4.6.0 => 4.6.0
eslint-plugin-testing-library: ^6.2.0 => 6.2.0
express: ^4.18.2 => 4.18.2
html-react-parser: ^5.0.11 => 5.1.1
html-webpack-plugin: ^5.5.4 => 5.6.0
identity-obj-proxy: ^3.0.0 => 3.0.0
intro.js: ^7.2.0 => 7.2.0
intro.js-react: ^1.0.0 => 1.0.0
jsdom: ^23.0.1 => 23.2.0
jsondiffpatch: ^0.5.0 => 0.5.0
lodash: ^4.17.21 => 4.17.21
node: ^18.12.1 => 18.18.2
prettier: ^3.1.1 => 3.2.4
rc-slider: ^10.5.0 => 10.5.0
rc-tooltip: ^6.1.3 => 6.1.3
react: ^18.2.0 => 18.2.0
react-apexcharts: ^1.4.1 => 1.4.1
react-dom: ^18.2.0 => 18.2.0
react-hover: ^3.0.1 => 3.0.1
react-json-tree: ^0.18.0 => 0.18.0
react-redux: ^9.0.4 => 9.1.0
react-router-dom: ^6.21.1 => 6.21.3
react-select: ^5.8.0 => 5.8.0
react-spinners: ^0.13.8 => 0.13.8
redux: ^5.0.0 => 5.0.1
regenerator-runtime: ^0.14.1 => 0.14.1
sass: ^1.69.5 => 1.70.0
sass-loader: ^13.3.2 => 13.3.3
style-loader: ^3.3.3 => 3.3.4
styled-components: ^6.1.2 => 6.1.8
ts-loader: ^9.5.1 => 9.5.1
typedoc: ^0.25.4 => 0.25.7
typescript: ^5.3.3 => 5.3.3
web-vitals: ^3.5.0 => 3.5.1
webpack: ^5.89.0 => 5.89.0
webpack-cli: ^5.1.4 => 5.1.4

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!

[garrettlchow]

Great news! The port disconnection issue has been resolved in Reactime 26.0 with significant improvements to connection persistence during idle time and tab switches.
Great news! The port disconnection issue has been resolved in Reactime 26.0 with significant improvements to connection persistence during idle time and tab switches.

If you do experience a disconnection:

• Simply click the "reconnect" button to resume monitoring
• No need for the previous complex workaround of refreshing multiple components

The reconnection process is now much more reliable and straightforward. You should no longer experience the connection detection issues that previously required multiple refresh steps.

If you continue to experience any persistent connection issues after updating to the latest version, please let us know with:

• Your Chrome version
• Reactime version
• Steps to reproduce the behavior

Thanks for helping us identify and improve Reactime's connection stability!

Closing as resolved ✨
If you do experience a disconnection:

• Simply click the "reconnect" button to resume monitoring
• No need for the previous complex workaround of refreshing multiple components

The reconnection process is now much more reliable and straightforward. You should no longer experience the connection detection issues that previously required multiple refresh steps.

If you continue to experience any persistent connection issues after updating to the latest version, please let us know with:

• Your Chrome version
• Reactime version
• Steps to reproduce the behavior

Thanks for helping us identify and improve Reactime's connection stability!

Closing as resolved ✨