microsoft / microsoft/vscode-react-native
React Native Tools debugging fails with recent React Native 0.85 / 0.86 Android Hermes apps
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 295
- Avg merge
- 11h 17m
- Merged PRs (30d)
- 24
Description
🐛 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the README's "Attach to Hermes application" configuration and reproduce the failure using the minimal bare Android Hermes app described, comparing React Native 0.74.x with 0.85.3 and 0.86.x. Trace the attach path and breakpoint binding behavior for the reported null port and unbound breakpoints; done means VS Code attaches and binds or hits the App.tsx breakpoint on recent versions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript, vscode
- Domain
- devtools, mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100