8507204b53
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/47623 Changelog: [iOS][Fixed] - "Reconnect DevTools" button not working sometimes Hotfix for "Reconnect DevTools" button not working: * T206141946 / [WP: Reconnecting dev tools does not work after restarting the app](https://fb.workplace.com/groups/rn.debugger.feedback/posts/1107620434125533) * T206754760 / [WP: Can't launch DevTools from Metro sometimes](https://fb.workplace.com/groups/rn.debugger.feedback/posts/1112235073664069/) Basically, this dialog will keep reappearing like a bad dream: {F1960030622} # Repro Part 1 (Fixed in base stack D65973309) 1. Do NOT have Metro ready. 1. Build and run RNTester/FB Wilde 1. They should be using the local bundled version. App may prompt you to start Metro. 1. Start Metro 1. Go to the device Dev Menu (rage shake) and select Reload 1. Press `r` or `d` in Metro Expected: Reload and Dev Menu work accordingly Actual: Metro fails with `No apps connected`: {F1960039703} Part 2 (Fixed in this diff) 1. Open React Native DevTools via Metro `j` key or Dev Menu (rage shake) 1. Kill Metro 1. The RN DevTools should show the "disconnected" dialog 1. Start Metro 1. Click "Reconnect DevTools" in RN DevTools Expected: reconnects Actual: dialog reappears with an error in Metro: {F1960043097} Interestingly, the `r` and `d` keys from Metro works. # Root cause(s) Part 1: See D65973309 Part 2: The error indicates the target/device failed to call `/inspector/device` to register itself. The subsequent calls to `/json/list` returns empty and `/open-debugger` throws. 1. But because `r` & `d` (heh) works, we can observe that there is some kind of auto-reconnect mechanism: https://www.internalfb.com/code/fbsource/[cfe1706a60b2]/xplat/js/react-native-github/packages/react-native/Libraries/WebSocket/RCTReconnectingWebSocket.m?lines=77-82 1. We do have auto-reconnect for `j` too: https://www.internalfb.com/code/fbsource/[cfe1706a60b2]/xplat/js/react-native-github/packages/react-native/ReactCommon/jsinspector-modern/InspectorPackagerConnection.cpp?lines=246-254 But unfortunately it only tries once. A long-term fix would be calling reconnect recursively like the Objective-C impl above, e.g. Edit: the long-term fix ! See V3 ``` delegate_->scheduleCallback( [weakSelf = weak_from_this()] { auto strongSelf = weakSelf.lock(); if (strongSelf && !strongSelf->closed_) { strongSelf->reconnectPending_ = false; strongSelf->connect(); // Keep trying. Never. Give. Up. if (!strongSelf->isConnected()) { strongSelf->reconnect(); } } }, RECONNECT_DELAY); ``` Edit: I snuck in some time during React Native London Conf and got the long-term fix going! ✌️ {gif:7iyrns4l} ~~It appears that the current impl of `isConnected()` is not a true reflection of the web socket state. My time box for this task ran out, so we'll do a hot fix for the short-term: since we know `r` & `d` reliably reconnects, we'll piggy-back on its lifecycle to attempt reconnection. This works. I'm going on PTO for the year, so the follow-up task is up for grabs here: T207775935.~~ # PS 1. If you start the app with Metro running in step 1, this bug is not present. This is the reason why FB Wilde/Marketplace/Quantum engineers run into this more often (because its custom menu changes the JS URL after start up) 2. This auto-reconnect does not mean the RN DevTools frontend will dismiss the dialog automatically. This is only about the `Metro <> Device` in `Frontend <> Metro <> Device`. 1. Current impl in Metro/Inspector Proxy means that whenever the `Metro <> Device` connection is terminated, the `Frontend <> Metro` connection is killed. 1. This diff helps restore the `Metro <> Device` connection. 1. The `Frontend <> Metro` connection does not currently get reconnected. We can make the Frontend do so, with consideration of preserving logs/states, etc. Reviewed By: robhogan Differential Revision: D65952134 fbshipit-source-id: 3abd16f6a7b7ed50e8acdb7c753cc4fbd3317236 |
||
|---|---|---|
| .bundle | ||
| .circleci | ||
| .github | ||
| flow-typed/npm | ||
| gradle/wrapper | ||
| jest | ||
| packages | ||
| scripts | ||
| tools | ||
| .babelrc | ||
| .clang-format | ||
| .editorconfig | ||
| .eslintignore | ||
| .eslintrc.js | ||
| .flowconfig | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc | ||
| build.gradle.kts | ||
| CHANGELOG-pre-060.md | ||
| CHANGELOG-pre-070.md | ||
| CHANGELOG.md | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| ECOSYSTEM.md | ||
| Gemfile | ||
| Gemfile.lock | ||
| gradle.properties | ||
| gradlew | ||
| gradlew.bat | ||
| jest.config.js | ||
| LICENSE | ||
| LICENSE-docs | ||
| package.json | ||
| react-native.code-workspace | ||
| README.md | ||
| runXcodeTests.sh | ||
| settings.gradle.kts | ||
| yarn.lock | ||
React Native
Learn once, write anywhere:
Build mobile apps with React.
Getting Started · Learn the Basics · Showcase · Contribute · Community · Support
React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.
- Declarative. React makes it painless to create interactive UIs. Declarative views make your code more predictable and easier to debug.
- Component-Based. Build encapsulated components that manage their state, then compose them to make complex UIs.
- Developer Velocity. See local changes in seconds. Changes to JavaScript code can be live reloaded without rebuilding the native app.
- Portability. Reuse code across iOS, Android, and other platforms.
React Native is developed and supported by many companies and individual core contributors. Find out more in our ecosystem overview.
Contents
- Requirements
- Building your first React Native app
- Documentation
- Upgrading
- How to Contribute
- Code of Conduct
- License
📋 Requirements
React Native apps may target iOS 13.4 and Android 6.0 (API 23) or newer. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS. Tools like Expo can be used to work around this.
🎉 Building your first React Native app
Follow the Getting Started guide. The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:
📖 Documentation
The full documentation for React Native can be found on our website.
The React Native documentation discusses components, APIs, and topics that are specific to React Native. For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.
The source for the React Native documentation and website is hosted on a separate repo, @facebook/react-native-website.
🚀 Upgrading
Upgrading to new versions of React Native may give you access to more APIs, views, developer tools, and other goodies. See the Upgrading Guide for instructions.
React Native releases are discussed in this discussion repo.
👏 How to Contribute
The main purpose of this repository is to continue evolving React Native core. We want to make contributing to this project as easy and transparent as possible, and we are grateful to the community for contributing bug fixes and improvements. Read below to learn how you can take part in improving React Native.
Code of Conduct
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
Contributing Guide
Read our Contributing Guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native.
Open Source Roadmap
You can learn more about our vision for React Native in the Roadmap.
Good First Issues
We have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
Discussions
Larger discussions and proposals are discussed in @react-native-community/discussions-and-proposals.
📄 License
React Native is MIT licensed, as found in the LICENSE file.
React Native documentation is Creative Commons licensed, as found in the LICENSE-docs file.