Variables in watch window are not evaluated when direct debug RNW apps using the Hermes JS engine

gabor-seres-sap commented 7 months ago

Problem Description

We as an SAP development team want to use Hermes direct debugging feature. We have synchronous calls to native module methods so Web debugging is not an option for us. After we upgraded from React Native Windows 0.71.37 to 0.72.24 we faced Hermes direct debugging issue:

Breakpoints hit and stop the execution
But the scope variables and Watch window cannot be evaluated

Steps To Reproduce

Create a RNW app based on the default template. The issue affects both RNW 0.72.24 and 0.73.4:

Create a 0.72.24 React Native Windows app with C# and Hermes usage then run it in Debug:

npx react-native@0.72.6 init "RNW_72_24" --version "0.72.6" cd RNW_72_24 npx react-native-windows-init --overwrite --version "0.72.24" --language "cs" --useHermes npx react-native run-windows

OR

Create a 0.73.4 React Native Windows app with C# and Hermes usage then run it in Debug:

npx react-native@0.73.0 init "RNW_73_4" --version "0.73.0" cd RNW_73_4 npx react-native-windows-init --overwrite --version "0.73.4" --language "cs" --useHermes npx react-native run-windows

Enable direct debugging through developer menu
Choose one of the possible approaches below (a. b. c. or d.)

a. Direct debug RNW apps using the Hermes JS engine with Edge by using the Edge Developer Tools, according to: https://github.com/microsoft/react-native-windows-samples/blob/main/docs/debugging-javascript.md#using-the-edge-developer-tools-1

EdgeDevTools

b. Direct debug RNW apps using the Hermes JS engine with VS Code's built-in Node.js debugger, according to https://github.com/microsoft/react-native-windows-samples/blob/main/docs/debugging-javascript.md#using-visual-studio-code

VSCode_Node

c. Direct debug RNW apps using the Hermes JS engine with VS Code (v1.85.2) using the React Native Tools extension (v1.12.3), according to https://github.com/microsoft/react-native-windows-samples/blob/main/docs/debugging-javascript.md#using-visual-studio-code-with-the-react-native-tools-1

VSCode_RNToolsExtension

d. Flipper (0.239.0) We could attach to Hermes using Flipper previously when we had RNW 0.71.37. When RNW version is 0.72.24 or 0.73.4 then React Dev Tools and Logs work fine but Hermes Debugger indicates “Metro is connected but no Hermes apps were found.”

Flipper

Direct debug RNW apps using the Hermes JS engine with Visual Studio (LTSC 17.6.10) with the debugger from the Node.js development workload according to https://github.com/microsoft/react-native-windows-samples/blob/main/docs/debugging-javascript.md#using-visual-studio-hermes

This approach throws an error when try to attach Hermes, this symptom should be scope of another issue.

The content of http://localhost:8081/json

[
    {
        "id": "0-1",
        "title": "Hermes",
        "faviconUrl": "https://reactjs.org/favicon.ico",
        "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D1",
        "type": "node",
        "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=0&page=1",
        "vm": "Hermes",
        "deviceName": "*****"
    }
]

Expected Results

When direct debug Hermes JS engine then scope variables and the watch window should be evaluated properly when breakpoints hit and stop the execution. Similar to direct debug RNW apps using the (default) Chakra JS engine with Visual Studio's built-in Script debugger which works fine using RNW 0.72.24 and 0.73.4, according to https://github.com/microsoft/react-native-windows-samples/blob/main/docs/debugging-javascript.md#using-visual-studio-chakra

Variables are evaluated properly in Watch:

VisualStudio_Chakra

CLI version

11.3.7

Environment

System:
  OS: Windows 11 10.0.22631
  CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz
  Memory: 28.46 GB / 63.71 GB
Binaries:
  Node:
    version: 18.19.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 10.2.3
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.6.34302.98 (Visual Studio Enterprise 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.6
    wanted: 0.72.6
  react-native-windows:
    installed: 0.72.24
    wanted: 0.72.24
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

10.0.19041

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

No response

chrisglein commented 7 months ago

Is it just the Watch window that doesn't work? Or is the same true for the Locals window?

gabor-seres-sap commented 7 months ago

Is it just the Watch window that doesn't work? Or is the same true for the Locals window?

There is no way to retrieve the value of any variables:

Scope / Local variables are not loaded at all (You can see it on the screenshots in the description of this issue)
Hovering over a variable doesn't work
Writing to the Console doesn't return the value of any variables from the scope
Expression failed to be evaluated in the Watch

When I switch to RNW 0.71.x then all of the above approaches work fine:

EdgeDevTools-RNW_0_71_37

gabor-seres-sap commented 6 months ago

Can we expect to have a fix for 0.72 version?

gabor-seres-sap commented 6 months ago

One addition: in RNW 0.72 https://www.nuget.org/packages/ReactNative.Hermes.Windows/ NuGet package was replaced with https://www.nuget.org/packages/Microsoft.JavaScript.Hermes

jonthysell commented 6 months ago

This issue seems to be related to this upstream Hermes issue: https://github.com/facebook/hermes/issues/1087.

It's possible this may require getting an update into hermes-windows with this commit: https://github.com/microsoft/hermes-windows/commit/f6aed0e0fe1e106fe22a65e701e35246515f0900

jonthysell commented 6 months ago

It should also be noted that breakpoints are not lining up to the correct lines with any debuggers with Hermes, which should also be fixed if we integrate a newer hermes build

chrisglein commented 6 months ago

Adding link to documentation PR that adds workarounds and references this issue: https://github.com/microsoft/react-native-windows-samples/pull/931

microsoft / react-native-windows