-
Notifications
You must be signed in to change notification settings - Fork 49k
Description
The problem
DevTools packages are published to NPM and follow semver for their public APIs (e.g. connectToDevTools
from react-devtools-core
). However the protocol used to communicate between the "backend" and "frontend" components is unversioned and may change between releases. Normally this does not cause a problem as the browser extensions, react-devtools-inline
package, and react-devtools
standalone package (used for browsers like Safari) all bundle these components together (e.g. the frontend injects or serves via an embedded web server the backend script so there's a 1:1 match).
However, React Native poses a special challenge. The React Native renderer embeds the "backend" component within renderer itself (in DEV mode), but the user launches the "frontend" UI via NPM or a tool like Flipper or the React Native Debugger. In either case, there is no guarantee that the version of the "frontend" UI will match the version of the embedded "backend". (React Native does specify a react-devtools-core
dependency but users are often running a globally installed version of the React DevTools or Flipper and so nothing even checks the dependency version.)
This means that updates to React Native (or more specifically, updates to the embedded DevTools backend) can cause DevTools installations to stop working without an apparent reason or an obvious solution.
The plan
The long term plan going forward (as implemented in #21331) is:
- Add an explicit version to the protocol used by the DevTools "backend" and "frontend" components to talk to each other.
- Check this protocol during initialization to ensure it matches.
- Show upgrade/downgrade instructions if there's a mismatch (or if the check times out without a response– indicating an older backend).
- Release this as 4.13.
The short term plan (as implemented in #21344) is:
- Branch and make a patch release of DevTools 4.10 that adds a protocol check to the frontend (to detect any newer backends).
- Upgrade Flipper (and recommend upgrade for the OSS React Native Debugger as well) to this new frontend.
- Wait a week or so for rollout and then upgrade React Native to the 4.13 backend.
Based on my not-very-scientific poll it seems like people mostly use DevTools via NPM, but Flipper and React Native Debugger have a pretty big user share too. The upgrade/downgrade instructions will then be geared primarily to NPM users but with an FBURL that links to a Gist with instructions for these other tools as well.
Checklist
- Add Bridge protocol version backend/frontend #21331: Add protocol to frontend and backend.DO NOT MERGE DevTools: Add Bridge protocol version backend/frontend #21344: Cherry pick change onto 4.10 and add an upgrade prompt.To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
Activity
bvaughn commentedon Apr 21, 2021
Here is my proposal:
Put another way, there are three cases we'll need to handle:
bvaughn commentedon Apr 21, 2021
I think ideally for Flipper and RN, React DevTools frontend would just support all backwards version of the backend protocol (kind of like it supports all recent React versions) but I don't think this is feasible for me to maintain. (Also the ship has already sailed with past releases that did not specify a protocol version.)
Even if that was not the case, I think frontend updates to things like inspecting element props and state (which use new React Suspense APIs) would just be too complicated to manage if I had to support multiple protocol versions.
In terms of managing that kind of complexity going forward, one theoretical option would be to somehow bundle multiple versions of the frontend into each NPM release and then dynamically load them based on the backend version, but I think this would also be a big lift and maybe isn't the most pragmatic solution.
bvaughn commentedon Apr 22, 2021
e.g. backend requires a newer protocol than the frontend supports
e.g. backend requires a older protocol than the frontend supports
Update react-devtools-core from ^4.10.1 to ~4.10.2 (#2243)
bvaughn commentedon Apr 28, 2021
I think this is done! The protocol check will release in 4.13 (soon).