Update React DevTools backend from 4.17.0 to 4.24.3

[bvaughn]

Relates to replayio/devtools#6075

This PR follows the steps outlined here to update the React DevTools (Firefox) react_devtools_backend.js:

• From: version 4.17.0 (created on 08/24/2021 from revision b9964684bd8c909fc3d88f1cd47aa1f45ea7ba32
• To: version 4.24.3 (created on 03/29/2022 from revision adb8ebc927ea091ba5ffba6a9f30dbe62eaee0c5

The update instructions don't mention how the hook.js file was created. Here's what I did to update it:

1. Opened packages/react-devtools-shared/src/hook.js in the React repo.
2. Stripped the Flow annotations from the file (using the Babel REPL for convenience.
3. Manually added the __DEV__, __EXTENSION__, and __TEST__ constants at the top of the file. (Normally these are injected during build time on the React DevTools side.)
4. Manually deleted the import statement at the top of the file. (The __EXTENSION__ === true value prevents this import from being used anyway.)
5. Manually re-add the exports.installHook = installHook; statement at the bottom of the file.

To compare the changes afterward to the changes made to the source file between versions, I used the following command:

git diff b9964684bd8c909fc3d88f1cd47aa1f45ea7ba32...adb8ebc927ea091ba5ffba6a9f30dbe62eaee0c5 -- packages/react-devtools-shared/src/hook.js

The result of this diff cam be viewed here.

I would say the process of updating the hook.js file seems pretty fragile and should be improved going forward if possible.

[bvaughn]

I am not yet sure how to test this 😁

Tried following the process outlined here but mach build fails for me and I'm not sure how to debug it.

---

Edit 1: There were a few missing setup steps for the M1:

1. Close Terminal and re-open in Rosetta mode (i386 arch)

2. Install rustup, cbindgen, and cbindgen:

arch -arm64 brew install rustup-init

rustup-init
rustup default stable-x86_64-apple-darwin

cargo install cbindgen

arch -arm64 brew install nasm

Then I was able to build with the following:

MACH_USE_SYSTEM_PYTHON=/usr/bin/python \
RUSTC_BOOTSTRAP=qcms \
  node build

---

Edit 2: This command took about 35 minutes to run but eventually finished without any obvious error. No idea how to test or use what it built yet. 😁

---

Edit 3: I see there was a mach run step that I completely overlooked.

[bvaughn]

Finally able to get the node build command to pass but when I try to record a new Replay, I see an error in the browser:

Unexpected recording error
Server error: Unknown build

In the Terminal I see slightly more output:

###!!! [Child][MessageChannel] Error: (msgtype=0x390098,name=PContent::Msg_InitBackground) Channel closing: too late to send/recv, messages will be lost

###!!! [Child][MessageChannel] Error: (msgtype=0x390098,name=PContent::Msg_InitBackground) Channel closing: too late to send/recv, messages will be lost

Redirecting call to abort() to mozalloc_abort

console.error: "Unstable recording: Server error: Unknown build"

###!!! [Parent][MessageChannel] Error: (msgtype=0x360002,name=PCompositorBridge::Msg_DidComposite) Channel error: cannot send/recv

CreateRecording f794bc4b-048e-463e-ae4d-ca58a6ef3b8f https://turdle.app/

Just to rule out this change, I built from the HEAD of the webreplay-release branch and I see the same error. Seems like maybe something wrong with my laptop/environment? (I am building with one of the newer M1 Macs.)

[hbenl]

For the backend to replay a recording it needs the browser executable with which the recording was made, so to test a locally built browser you need to use a local backend (or upload the browser to prod or cloud-dev, but I don't know if this is possible yet).
I tried this PR with the standalone container but the recording I created with it only contained one "RemoveFrame" message from the RDT backend (so no "operations" messages). I looked at the console output of the browser and the only log message that could be related to this was

JavaScript warning: resource://devtools/server/actors/utils/event-loop.js, line 79: debuggee 'http://localhost:8080/_next/static/chunks/pages/_app.js?ts=1649252267990 line 10557 > eval:18' would run

but I don't know how to proceed from here.

[bvaughn]

@hbenl Ah, right. That may be because my hooks.js update accidentally dropped the module export:

exports.installHook = installHook;

I fixed that just now and pushed. The process of updating hooks.js is pretty fragile.

Maybe we could pair and look at this together? I'm not able to build the backend currently because of Kubernetes issues so I'm temporarily blocked from verifying this locally.

[hbenl]

I tested this and now the recording contains more backend messages and also the protocol version is detected correctly. That means that the current frontend will complain about a protocol version mismatch. After upgrading react-devtools-inline to 4.24.3 however I see this error:

[bvaughn]

@hbenl Can you share that Replay with me?

[hbenl]

No, I can't because I used a local backend.

[bvaughn]

@hbenl When you're testing the replay, are you using the changes from this PR replayio/devtools#6075?

I suspect the "not a function" is the newer useSyncExternalStore hook which requires also updating react-dom and react, like I do in that PR.

[hbenl]

No I wasn't, I'll try that out.

[hbenl]

After upgrading to the experimental react version from that PR I got the same error. Then I upgraded to react 18 and then I get this:

[bvaughn]

After upgrading to the experimental react version from that PR I got the same error.

Just to clarify, did you upgrade both react and react-dom to the newer experimental version?

Then I upgraded to react 18 and then I get this

Yes. That's expected because some of the APIs DevTools is using (in this case useCacheRefresh) are not available (yet) in a stable release. (See the experimental note here.)

[hbenl]

did you upgrade both react and react-dom to the newer experimental version?

Yes. I tried with a newer experimental version (0.0.0-experimental-af730436c-20220405) but now I get

Module not found: Can't resolve 'react/jsx-dev-runtime' in '/home/holger/replay/devtools/pages'

when running npm run dev

[bvaughn]

That's...interesting. What's your package-lock.json look like, out of curiosity?

[hbenl]

Gist for my package-lock.json: https://gist.github.com/hbenl/b850e41ecd34a54101c44e3a87440bfb

[bvaughn]

@hbenl and I tested and verified that the changes in this PR and replayio/devtools#6075 are compatible. See that PR for remaining blockers to landing this.