[DevTools Bug] Unsupported Bridge operation "0"

[gitrthanki1]

Website or app

local app development

Repro steps

just install react devtools and downgrade to 4.11.0

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-core

DevTools version (automated)

4.23.0-e28a0db22

Error message (automated)

Unsupported Bridge operation "0"

Error call stack (automated)

at /Users/softwaremac/Desktop/Users/JigneshJani/RNProjects/WifiSwitch/WifiSwitchV2_29_5/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:53:333837
    at c.emit (/Users/softwaremac/Desktop/Users/JigneshJani/RNProjects/WifiSwitch/WifiSwitchV2_29_5/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:53:277732)
    at /Users/softwaremac/Desktop/Users/JigneshJani/RNProjects/WifiSwitch/WifiSwitchV2_29_5/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:53:279273
    at /Users/softwaremac/Desktop/Users/JigneshJani/RNProjects/WifiSwitch/WifiSwitchV2_29_5/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:53:659742
    at Array.forEach (<anonymous>)
    at A.e.onmessage (/Users/softwaremac/Desktop/Users/JigneshJani/RNProjects/WifiSwitch/WifiSwitchV2_29_5/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:53:659726)
    at A.t (/Users/softwaremac/Desktop/Users/JigneshJani/RNProjects/WifiSwitch/WifiSwitchV2_29_5/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:44:3009)
    at A.emit (events.js:315:20)
    at e.exports.L (/Users/softwaremac/Desktop/Users/JigneshJani/RNProjects/WifiSwitch/WifiSwitchV2_29_5/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:8:13567)
    at e.exports.emit (events.js:315:20)

Error component stack (automated)

No response

GitHub query string (automated)

https://api.github.com/search/issues?q=Unsupported Bridge operation  in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

[Mike2l8]

Wtf

[sanjeevyadavIT]

Facing same issue

The error was thrown at file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5441:339974
    at kr.emit (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5441:281413)
    at file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5441:283045
    at file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5441:688182
    at Array.forEach (<anonymous>)
    at A.oe.onmessage (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5441:688165)
    at A.t (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5432:3330)
    at A.emit (events.js:315:20)
    at oe.exports.L (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5396:14736)
    at oe.exports.emit (events.js:315:20)
    at oe.exports.dataMessage (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5396:21208)
    at oe.exports.getData (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5396:20405)
    at oe.exports.startLoop (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5396:17712)
    at oe.exports._write (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5396:17002)
    at doWrite (_stream_writable.js:403:12)
    at writeOrBuffer (_stream_writable.js:387:5)

I even tried toggling the "Use globally installed DevTools" and I have devtools installed globally but it didnt work

[MuhammedKpln]

Same issue here as well.

[lunaruan]

Hi, thanks everyone for commenting! Are any of you experiencing this issue with the most recent release of DevTools? If so, could you provide a codesandbox or a github repro? Unfortunately, we're not able to debug this issue without proper repro steps. Thanks!

[kyle-ssg]

I can confirm replicating this on a vanilla react-native app using flipper (where I believe this issue was created from), the issue also persists on 4.22 as well as 4.23, however using ❯ npm i -g react-devtools@4.21.0 sorts the issue for me

The error was thrown at file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5441:339974
    at kr.emit (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5441:281413)
    at file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5441:283045
    at file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5441:688182
    at Array.forEach (<anonymous>)
    at A.oe.onmessage (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5441:688165)
    at A.t (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5432:3330)
    at A.emit (events.js:315:20)
    at oe.exports.L (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5396:14736)
    at oe.exports.emit (events.js:315:20)
    at oe.exports.dataMessage (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5396:21208)
    at oe.exports.getData (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5396:20405)
    at oe.exports.startLoop (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5396:17712)
    at oe.exports._write (file:///Applications/Flipper.app/Contents/Resources/app.asar/bundle.js:5396:17002)
    at doWrite (_stream_writable.js:403:12)
    at writeOrBuffer (_stream_writable.js:387:5)

[lunaruan]

Hey! I just created a vanilla react native app using create-react-native app and tested React DevTools, and I couldn't repro the error. Could you give me an exact repro?

[DrOverbuild]

I ran into the same issue on a new React Native 0.67.3 app generated with react-native init

Clicking dismiss on the Unsupported Bridge operation "0" message removes that message but then I am presented with this error:

I checked which version of react-devtools-core that the Metro server is using:

$ npm explain react-devtools-core
  react-devtools-core@4.19.1
  node_modules/react-native/node_modules/react-devtools-core
    react-devtools-core@"4.19.1" from react-native@0.67.3
  ...

So React Native uses react-devtools-core 4.19.1, not too far behind the latest. So it should be compatible right?

Well by downgrading to use the exact version that React Native uses, it is now working for me. So I guess 4.19.1 and 4.23.0 are not compatible

npm remove -g react-devtools
npm install -g react-devtools@4.19.1

[bvaughn]

So React Native uses react-devtools-core 4.19.1, not too far behind the latest. So it should be compatible right?

No. This is why the dialog suggests downgrading the frontend.

We know this is not ideal, but the architecture of react-devtools and react-native has been around for a long time (predating those of us now working on the tooling side). For the browser extensions (most common use case) or even packages like react-devtools-inline – the frontend and backend are shipped together. For React Native, a backend version is embedded into the app (in DEV mode) so any mismatches between frontend and backend will break things. This is why there's a protocol check and a dialog like the one shown above.

Well by downgrading to use the exact version that React Native uses, it is now working for me. So I guess 4.19.1 and 4.23.0 are not compatible

That's correct.

[DrOverbuild]

The dialog suggests downgrading to a version prior to v4.11.0, but because the backend is running 4.19.1, following the directions in the dialog does not work. We are presented with a similar message, but instead the dialog suggests upgrading to ^4.13.0.

With the given semver notation, version 4.23.0 satisfies ^4.13.0, and that's what NPM installs.

It looks like the backend of 4.19.1 (presumably using bridge protocol version 1) communicates an incorrect bridge protocol version. Either that or the frontend of 4.23.0, which expects version 2, reads an incorrect bridge protocol version from the backend. Ether way, the dialog suggests a misleading downgrade command.

At any rate, the main point is if you're getting either Unsupported Bridge operation "0" or Unsupported DevTools backend version, check the backend version you're using (which, with React Native, it's currently 4.19.1) and make sure you have that exact version of the frontend.

[bvaughn]

The dialog's suggestion is based on which version of the backend React Native has embedded. If the frontend version you are currently using requires a newer protocol, you will be prompted to downgrade (to match). If the frontend version requires an older protocol version, you will be required to upgrade (to match).

At least, that is how it is supposed to work. Given this issue, it sounds like some combination(s) of backend and frontend version aren't working as designed.

@DrOverbuild Any chance you could give me a list of exactly which versions (backend and frontend) you used that showed that series of dialogs? I'd like to repro and dig into where things went wrong.

[DrOverbuild]

With not being able to respond due to the lockdown last week, I had some extra time to investigate the issue.

@DrOverbuild Any chance you could give me a list of exactly which versions (backend and frontend) you used that showed that series of dialogs? I'd like to repro and dig into where things went wrong.

To answer your question, the only backend I've tried is 4.19.1, bundled with React Native.

• Frontend v4.10.3 suggests to upgrade to ^4.13.0. It sees the correct bridge protocol version from the backend.
• Frontend versions up to 4.21.0 work (as that is the last version supporting bridge protocol v1).
• Frontend versions after 4.22.1 will suggest to downgrade to <4.11.0.

Looking at source code I see the front end assumes bridge protocol version 0 if it doesn't get a response within 10 seconds (because old versions of DevTools don't know about bridge protocol versioning). This timeout is further confirmed by the fact that I'm getting that downgrade message only after 10 seconds of staring at a blank inspector.

However, the manner through which I get the RN app to connect to devtools matters. If the app is already running and I open the debug menu in the RN app, devtools will timeout. If I terminate the app and run it again, devtools will timeout. But if I just reload the app, devtools does not timeout and shows that the backend is using bridge protocol 1.

I want to say this is more an issue with react-devtools-core in React Native than with the frontend.

[bvaughn]

Thank you for the extra context!

• Frontend versions after 4.22.1 will suggest to downgrade to <4.11.0.

This seems broken. I'm guessing the timeout is firing when it shouldn't, maybe b'c something isn't forwarding the protocol check message (or not forwarding it fast enough?)