React Native Tools debugging fails with recent React Native 0.85 / 0.86 Android Hermes apps

[urbanst]

🐛 What is the bug? How can we reproduce it?

React Native Tools does not seem to work reliably with recent React Native versions, specifically RN 0.85.x and 0.86.x, when debugging a bare React Native Android Hermes app from VS Code.

We tested a minimal bare React Native Android app with a single button and a breakpoint / debugger; statement inside the button onPress handler.

The app itself builds and runs on Android emulator, Metro is running, and Hermes inspector target is visible from Metro, but VS Code debugging does not work.

Summary of what we observed

React Native 0.74.x

Debugging worked.

With React Native 0.74.x and React Native Tools 1.13.0, Hermes attach worked and breakpoints in App.tsx were hit.

React Native 0.85.3

Debugging does not work.

With React Native 0.85.3 and React Native Tools 1.13.0, the debugger attaches or appears to attach, but breakpoints become unbound and are not hit.

With React Native 0.85.3 and React Native Tools 1.14.0, the extension fails earlier with:

Cannot read properties of null (reading 'port')


This happens even with the minimal attach config from the README:
{
  "name": "Attach to Hermes application",
  "cwd": "${workspaceFolder}",
  "type": "reactnativedirect",
  "request": "attach"
}

We also tried an explicit config:
{
  "name": "Attach Hermes Android",
  "cwd": "${workspaceFolder}",
  "type": "reactnativedirect",
  "request": "attach",
  "platform": "android",
  "address": "localhost",
  "port": 8081,
  "useHermesEngine": true,
  "sourceMaps": true,
  "trace": "log"
}

Expected behavior
React Native Tools should attach to the running Hermes app and bind/hit breakpoints in App.tsx, like it did with RN 0.74.x.

Actual behavior
With recent RN versions:
RN 0.85.3 + React Native Tools 1.13.0: breakpoints become unbound and do not hit.
RN 0.85.3 + React Native Tools 1.14.0: attach fails with Cannot read properties of null (reading 'port').
RN 0.86.x: debugging was also not successful in our tests.

[urbanst]

Update after further debugging:

I narrowed this down to two separate issues in React Native Tools 1.14.0:

1. The debug adapter server reads debugServer.address().port immediately after listen(0, "127.0.0.1"). On my machine this can return null, causing:

• Cannot read properties of null (reading 'port')

2. For recent React Native / Metro versions, the Hermes inspector WebSocket rejects the DevTools connection when the WebSocket request has no Origin header. Metro logs:

• Connection from DevTools failed to be established for origin 'undefined' Was expecting origin: 'http://localhost:8081'

any way, fixes here worked for me

#2782