react: [DevTools Bug] Unsupported Bridge operation "0"

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)

As a workaround for anyone reading this, you could use an approach like Resolutions to work around the backend version mismatch, e.g.

  "resolutions": {
    "react-native/react-devtools-core": "4.24.0"
  },

I used a similar resolution in my test React Native project to force downgrade the backend to 4.19.1.

@usrbowe Bumping the version of the React DevTools (frontend) used in Flipper sounds like a good idea. 4.24.1 is more “compatible” with older backend versions.

Bug fix has been released as version 4.24.1 (#24100). You should be able to fix this issue by upgrading the frontend (the UI you run) to the latest NPM release.

Looking at the history of the Bridge protocol stuff, we basically have the following changes:

• Protocol changed from 0 to 1: 4.10.1 -> 4.11.0
• Protocol changed from 1 to 2: 4.21.0 -> 4.22.0

The source revisions for the above versions are:

• 4.10.1: f160547f47cb271bff09c639a6dae8f1b169bc14
• 4.11.0: d4cae99f2a59e0380871134960d29ec5ce2c4fd9
• 4.21.0: 6c7ef3fce5547da5db3d400ccf95a5023f8891f4
• 4.22.0: 0229baee21e8e6ecef04d4d76c41af84dfcca8bc

Exporting and comparing these revisions…

# Export
git archive -o ~/Desktop/DevTools/4.10.1.zip f160547f47cb271bff09c639a6dae8f1b169bc14
git archive -o ~/Desktop/DevTools/4.11.0.zip d4cae99f2a59e0380871134960d29ec5ce2c4fd9
git archive -o ~/Desktop/DevTools/4.21.0.zip 6c7ef3fce5547da5db3d400ccf95a5023f8891f4
git archive -o ~/Desktop/DevTools/4.22.0.zip 0229baee21e8e6ecef04d4d76c41af84dfcca8bc

# Extract...

# Diff:
diff \
  ./4.10.1/packages/react-devtools-shared/src/devtools/store.js \
  ./4.11.0/packages/react-devtools-shared/src/devtools/store.js \
  > 4.11.diff

diff \
  ./4.11.0/packages/react-devtools-shared/src/devtools/store.js \
  ./4.21.0/packages/react-devtools-shared/src/devtools/store.js \
  > 4.21.diff

diff \
  ./4.21.0/packages/react-devtools-shared/src/devtools/store.js \
  ./4.22.0/packages/react-devtools-shared/src/devtools/store.js \
  > 4.22.diff

Looking at the store diffs, I see the following changes between protocol changes::

• 0 to 1: Added TREE_OPERATION_REMOVE_ROOT and TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS messages. I think, maybe, this isn’t technically a breaking change since both operations are new.
• 1 to 2: Added two extra bits to the TREE_OPERATION_ADD message for new root nodes. These bits specified strict mode compatibility and owner metadata properties.

If I had thought to design the operations array up front to include its protocol version as the first bit, then we could easily support backwards compatability in cases like this. Really bad oversight on my part, in hindsight. As it is now, we could try to do this (if we already have the protocol version) but there would be cases we can’t handle (e.g. the backend is too old to report its protocol and the frontend times out).

Maybe we could queue up operations until we know (or infer) the backend version? I’m not sure how hard this would be to implement in practice, especially when considering cases like reload and profile. Probably hard.

I’m not sure there’s really a way to fix it at this point. If I could go back, unpublish and overwrite each of the older revisions to add this info, maybe…but NPM doesn’t support that kind of an operation.

Okay, after digging into this– I can repro it. I’m not sure there’s a great workaround or “fix” for it though. The underlying issue (explained in #21326) still needs to be handled.

Maybe React Native could do a better job of prompting/matching backend and frontend versions during installation? I’m not sure how React DevTools (the frontend UI) could do this other than via some protocol version check like we are already doing. (Although if anyone has ideas I’d love to talk about them.)

In hindsight, I should have made the very first parameter in the operations array a protocol version number. Then the frontend could treat messages different based on their known protocol. But it’s too late to make this change and so here we are.

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