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

gabor-seres-sap commented 4 weeks ago

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

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 react-native@0.71.19 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

Enable direct debugging through developer menu
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

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: https://github.com/microsoft/react-native-windows/issues/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 commented 3 weeks ago

We're tracking issues with Hermes debugging here: https://github.com/microsoft/react-native-windows/issues/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 commented 3 weeks ago

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

microsoft / react-native-windows