Breakpoints only work for a while when direct debugging the Hermes JS engine

[gabor-seres-sap]

Problem Description

We as an SAP development team want to upgrade React Native Windows from 0.71.37 to 0.71.46. After we’ve done, we faced Hermes direct debugging issue:

• Breakpoints hit and stop the execution just for a while
• Breakpoints are later disabled, and warning sign indicates that they are no longer available

Steps To Reproduce

1. Create a RNW app based on the default template.
   Create a 0.71.46 React Native Windows app with C# and Hermes usage then run it in Debug:

npx [email protected] init "RNW_71_46" --version "0.71.19"
cd RNW_71_46
npx react-native-windows-init --overwrite --version "0.71.46" --language "cs" --useHermes
npx react-native run-windows

2. Enable direct debugging through developer menu

3. Direct debug RNW app using Hermes JS engine with VS Code (1.89.1) using the React Native Tools extension (v1.13.0), 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

Option B: Attach VS Code to Metro that's already running

4. Add and remove breakpoints several times during the debugging session

---

Another variant for this issue is when the execution stops at non-existent breakpoints that we removed earlier:

RNW 0.71.46 introduced 0.1.21 version of Microsoft.JavaScript.Hermes NuGet package: https://www.nuget.org/packages/Microsoft.JavaScript.Hermes/0.1.21

• Side note: this seems to have solved the JS expression evaluation related problem: Variables in watch window are not evaluated when direct debug RNW apps using the Hermes JS engine #12654

Expected Results

We need debugging experience like we had before using RNW 0.71.37 which includes ReactNative.Hermes.Windows NuGet package: https://www.nuget.org/packages/ReactNative.Hermes.Windows/

CLI version

10.2.7

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz
    Memory: 31.96 GB / 63.71 GB
  Binaries:
    Node: 18.19.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.2.3 - 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.10.34928.147 (Visual Studio Enterprise 2022), 17.4.34729.48 (Visual Studio Enterprise 2022), 17.6.34302.98 (Visual Studio Enterprise 2022)
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.19 => 0.71.19
    react-native-windows: 0.71.46 => 0.71.46
  npmGlobalPackages:
    *react-native*: Not Found

Community Modules

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]

We're tracking issues with Hermes debugging here: #12982
I'll add this to the tracking list.
You're on a version that's outside the support window, although for this issue in particular it may exist on latest (0.74).

[gabor-seres-sap]

Hey @chrisglein, I was also able to reproduce the issue with 0.74.8

"dependencies": {
    "react": "18.2.0",
    "react-native": "0.74.1",
    "react-native-windows": "0.74.8"
  }

I assume that's because the same 0.1.21 version of Microsoft.JavaScript.Hermes NuGet package belongs to both RNW versions: https://www.nuget.org/packages/Microsoft.JavaScript.Hermes/0.1.21