Known issues of Hermes debugging

[RedMickey]

This issue continues that one #1099 in terms of debugging via js-debug extension.

The extension has experimental support for React Native Hermes debugging. At this moment we know about several issues related to Hermes debugging. Please see the list of known issues below.

The table of problems consists of two columns: the first one illustrates the problem when the extension is used for debugging an Hermes app , the second one - when Google Chrome is used for debugging an app.

If you faced new issues with React Native Hermes debugging via React Native Tools, please send them to the commentaries section of this issue.

The list of issues

1. An application crashes when we are trying to watch content of some properties/objects on debugging. The problem is no longer reproducible on Android since React Native 0.66.0, but remains on iOS Hermes. See the issue Application crashes on debugging Map and Set objects.

Debugging using VS Code RNT Hermes debugger prototype	Debugging using Chrome	Resolved
		Android resolved

2. Sometimes the debugger cannot attach to an application correctly, which makes it impossible to set a breakpoint and view application logs in the debug console. An application could crash in case of incorrect attachment (js-debug refactoring).

Debugging using VS Code RNT Hermes debugger prototype	Debugging using Chrome	Resolved

3. Hermes engine doesn't support Runtime.callFunctionOn method. See the issue Runtime.callFunctionOn returns an empty value on debugging.

4. [Android]:Hermes app crash when a second debugger tries to connect (https://github.com/facebook/hermes/issues/792)

[EricCornelson]

Is №1 still happening? In the linked issue it looks like the issue is resolved on the Hermes side.

[RedMickey]

@EricCornelson, we tried React Native 0.63.0-rc.1 and there the first issue still remains. We decided to wait for the next RN version and check if this issue has been fixed.

[liquidvisual]

Still seems to be an issue on React Native 0.67.3 as of 2022. Attempting to debug crashes the app on Android, where as iOS fails to connect to dev tools.

[EzioLi01]

The no.1 issue is still existing on Chrome debugger and Flipper. Keep tracking.

[EzioLi01]

The second issue is not repro currently.

[evelant]

I have also noticed that Hermes debugging seems to fail whenever the app is reloaded. You must detach the debugger and reattach it. That makes it impossible to hit breakpoints that happen on app load.

[sjungwirth]

I'm having the issue described in https://stackoverflow.com/questions/73362632/react-native-typescript-number-0-read-as-nan where 0 is showing as NaN for variable inspection when debugging. This only started recently when updating from RN 68.x to 71.x

[evelant]

With expo 50.0.6 and react-native 0.73.4 debugging hermes doesn't work at all. Breakpoints never bind. May not be this plugin's fault however, it seems there are a lot of bugs in hermes CDP implementation.

[evelant]

Trying to set a breakpoint with verbose logging shows this

[2024-2-6 20:06:53] [Reply From Debugger To Target] {
  "id": 1030,
  "method": "Debugger.setBreakpointByUrl",
  "params": {
    "urlRegex": "file:\\/\\/\\/Users\\/imagio\\/dev\\/TaskHero\\/apps\\/taskhero\\/build\\/src\\/components\\/hero\\/HeroAvatarImage\\.js($|\\?)|\\/Users\\/imagio\\/dev\\/TaskHero\\/apps\\/taskhero\\/build\\/src\\/components\\/hero\\/HeroAvatarImage\\.js($|\\?)",
    "lineNumber": 995,
    "columnNumber": 32
  }
}

[2024-2-6 20:06:53] [Reply From Debugger To Target] {
  "id": 1031,
  "method": "Debugger.setBreakpointByUrl",
  "params": {
    "urlRegex": "file:\\/\\/\\/Users\\/imagio\\/dev\\/TaskHero\\/apps\\/taskhero\\/src\\/components\\/hero\\/HeroAvatarImage\\.tsx($|\\?)|\\/Users\\/imagio\\/dev\\/TaskHero\\/apps\\/taskhero\\/src\\/components\\/hero\\/HeroAvatarImage\\.tsx($|\\?)",
    "lineNumber": 1270,
    "columnNumber": 0
  }
}

[2024-2-6 20:06:53] [Reply From Target To Debugger] {
  "id": 1030,
  "result": {
    "breakpointId": "0",
    "locations": []
  }
}

[2024-2-6 20:06:53] [Reply From Target To Debugger] {
  "id": 1031,
  "result": {
    "breakpointId": "9",
    "locations": []
  }
}