[Placeholder] Multi-host compatibility for Network and Performance in React Native DevTools

[huntie]

If you're on this page, you might have seen the following message in React Native DevTools in versions 0.83 and onwards.

What this means

Why am I affected?

When are we fixing this?

[mjmasn]

[In progress] Multi-host detection false positive for legacy Hermes ConnectionDemux targets

@huntie just to check, if we're seeing the '...multiple React Native hosts, which is not currently supported' message on the network and performance tabs in RN 0.83.0-rc.x, is that likely due to something like react-native-worklets (used by react-native-reanimated)?

[huntie]

Hey @mjmasn, this message should only occur when using multiple React Native hosts (i.e. RCTHost, ReactHostImpl), rather than multiple runtimes. AFAIK, react-native-worklets only causes the latter (WorkletRuntime.cpp). Is there a chance you're in a specialised/brownfield app setup?

[mjmasn]

@huntie interesting, it's a fairly standard plain RN app (no Expo). I'll do some more digging / see if I can repro with a new app.

[mjmasn]

@huntie yep I can repro with a new app. Steps were something like:

• set up the new app:

npx @react-native-community/cli@latest init DebuggerIssue --version=0.83.0-rc.3
npm install react-native-reanimated react-native-worklets
(cd ios && bundle install && bundle exec pod install)
yarn start --reset-cache

• add an Animated.View & Animated.Text to App.tsx
• run the app from Xcode using the xcworkspace

(I also ran the app before installing reanimated + worklets and all worked fine.)

After installing reanimated + worklets, pressing j for debugger gives:

Multiple debug targets available, please select:
   1  - "org.reactjs.native.example.DebuggerIssue (iPhone 17 Pro Max)"
   2  - "org.reactjs.native.example.DebuggerIssue (iPhone 17 Pro Max)"   

Pressing 1 opens the debugger but Networking / Performance tabs are disabled

Pressing 2 gives:

 WARN  Ignoring DevTools app debug target for 'org.reactjs.native.example.DebuggerIssue' with title 'org.reactjs.native.example.DebuggerIssue (iPhone 17 Pro Max)' and 'nativePageReloads' capability set to 'false'.
 INFO  Launching DevTools...
 WARN  No compatible apps connected. React Native DevTools can only be used with the Hermes engine.

Repro repo here: https://github.com/mjmasn/DebuggerIssue

[huntie]

@mjmasn Thanks for the repro.

Yup, it's how we've implemented tracking multiple hosts — I guess misaligned, as our concept of addPage (add a new debugger page, conceptually 1:1 with a host) actually gets called by the legacy ConnectionDemux code path (Hermes direct debugging, used by Reanimated for a worklet — i.e. runtime).

And clarifying what I mean by these concepts:

Host (~app)
└── Instance (~window)
    └── Runtime (JS runtime, ~worklet)

The fix will be us adjusting this call site to a place in the modern debugger stack only, or alternatively ignoring legacy addPage calls.

Leave it with me 👍🏻

Sidenote: We're working with Software Mansion to modernise debugger registration for RN Worklets to use the React Native DevTools backend and add additional runtime(s). (It's one of the last cases of something depending on the legacy Hermes debugger!)