Enable debugging on Reanimated's runtime using Chrome DevTools

[Kwasow]

Description

This PR is related to #1960 (and its replacement #2047). It adds the ability to use Chrome DevTools to add breakpoints and debug worklets (or the UI context in general) both on Android and iOS.

Major changes

Runtime creation has been moved to ReanimatedRuntime for both Android and iOS (in the Common/cpp/ReanimatedRuntime directory).

Before (Android) [file: NativeProxy.cpp]:

#if JS_RUNTIME_HERMES
  auto config =
      ::hermes::vm::RuntimeConfig::Builder().withEnableSampleProfiling(false);
  std::shared_ptr<jsi::Runtime> animatedRuntime =
      facebook::hermes::makeHermesRuntime(config.build());
#elif JS_RUNTIME_V8
      …
#else
      …
#endif

After (shared) [file: NativeProxy.cpp]:

ReanimatedRuntime::make(jsQueue);

The custom build config has been removed, as sample profiling is set to false by default.

The created HermesRuntimeManager object is the stored inside ReanimatedNativeModule as it is important that it’s lifetime is synced with the lifetime of the module.

Testing

• Builds on Android
• Builds on Android in release mode
• App reloads work on Android
• Builds on iOS
• Builds on iOS in release mode
• App reloads work on iOS
• JSC still works
• JSC debugging in Safari with iOS still works
• Paper still works

Versions of React-Native tested: 0.70

Things to look into

• Breakpoint labels do not appear on iOS
  I tested this on a new app with Flipper on the main JS thread, and it was also the case, so it seem to not be an issue on our side
• After removing a breakpoint on iOS it can't be set in the same location again
  This seems to be an issue with Chrome DevTools as connecting to Reanimated's runtime through Flipper fully works
• Edge-case: the app will crash if a reload is performed while the debugger is open
  Will be fixed in a PR to metro and 58e9e7b
• The latest release of Chrome (105) broke source maps, so only Flipper works now. I reported the issue here, and I'm waiting for a response from the Chromium team

TODO

• Open PR to update debugging docs in documentation (will be included in Added debugging docs #3446)
• Open PR in facebook/flipper to enable Flipper support on custom runtimes (Allow other runtimes to use the Hermes Debugger plugin for React Native facebook/flipper#4047)
• Open PR in facebook/metro to support debugger reloads on custom runtimes (Enable app reloads for other runtimes than Hermes React Native facebook/metro#864)

[tomekzaw]

debugging.mp4

[tomekzaw]

ios.mp4

[tomekzaw]

Congratulations on this PR! You have completed a task that many have attempted but no one succeeded. A lot of research had to be done to make this happen. Certainly, it takes a lot of skills and patience to dive into and navigate through the deepest trenches of React Native ecosystem, in particular exploring undocumented areas of codebase of external tools such as Flipper and Metro. The solution you have proposed involves several programming languages including C++, Objective-C, Ruby, Java, Groovy, TypeScript and Flow as well as various development tools such as npm, yarn, Babel, Gradle, CMake, CocoaPods and Docusaurus. It was a pleasure to watch the progress of the work, follow your findings and conclusions, and finally discuss various aspects of the implementation, from code style to architecture and versioning. This feature is a game-changer and it will certainly be highly appreciated by the community. Thank you!

[piaskowyk]

[capezzbr]

This PR broke integration with V8 engine

node_modules/react-native-reanimated/Common/cpp/ReanimatedRuntime/ReanimatedRuntime.cpp:40:38: error: use of undeclared identifier 'runtime_'

[tomekzaw]

Thanks for letting us know @capezzbr, we'll definitely need to take a look at this. We don't have any V8 example app in our repo yet so there's no CI that checks V8 integration. I will try to setup the app anytime soon.

[capezzbr]

Hey @tomekzaw, here is my attempt to fix the issue: #3736. Let me know what you think 👍