Route JS errors from UI runtime throught RN's LogBox module

[kmagiera]

This PR changes the way we report errors in development. Previously we'd use RCTLog native module which would result in a relatively ugly red screen displaying an error. In addition the stack trace wouldn't be symbolicated so it was difficult to reason about the root cause of the problem when the crash happened on the UI runtime.

With this change we provide a symbolicated version of trace to ErroUtil module which results in the crash being displayed in the same way as it were to occur on the regular RN runtime.

Summary

The main motivation is to provide better guidance for developers about the crashes on the UI JS runtime as well as to use a familiar UI for displaying those.

In a nutshell, the method we use relies on an extended version of "eval" for processing the javascript code when loading on the UI runtime. We now expose evalWithSourceUrl that beside the code also allows for assiging the source url that is then included in the traces, and evalWithSourceMap (only on hermes) that allows to provide JSON encoded source map that is then used by the javascript engine to symbolicate the stack trace.

For JS engines that does not support source maps (JSC), what we do instead, is that we provide the worklet hash as a part of the source url, this allows us to recognize which worklet a given stack entry is coming from and allows us to map the provided line from that worklet into a line of the whole JS bundle. In order to do so, we now generate an "error" object in the place where worklet is generated such that we can get its position in the Javascript bundle.

Below is a summary of changes this PR makes:

1. Changes in plugin focus on removing location metadata (we now use a string in a format "worklet_7263" where the number is worklet's hash), adding source maps in a form of JSON encoded string, and adding new error object to the worklet object which is used to remap worklet line number into the bundle line number
2. For the latter, we added some additional logic that replaces entries in the provided error and replaces "worklet_23746:16:2" with the bundle URL along with the remapped line numbers
3. We now route all JS calls via a new method "guardCall" that adds a catch statement and passes the exception back to the main JS runtime where we use ErrorUtils module to trigger the default React Native's LogBox
4. We extend hermes runtime by exposing evalWithSourceMap method – this method is only added for debug builds and only on hermes.
5. On other runtimes we register additional global method evalWIthSourceURL that makes it possible to provide URLs along the code that needs to be evaluated.

Test plan

Run method "something" from the following snippet and expect an error that should result in a redbox being desplayed. Note that the presented stack trace should have correct line numbers. See the expected result on iOS under the snippet. On Android the errors aren't as nicely formatted but should contain valid trace entries. This needs to be tested on both JSC and Hermes configurations.

function makeWorklet() {
  return () => {
    'worklet';
    throw new Error('Randomly crashing');
  };
}

const crashRandomly = makeWorklet();

function anotherWorklet() {
  'worklet';
  crashRandomly();
}

function something() {
  runOnUI(() => {
    'worklet';
    anotherWorklet();
  })();
}

[tomekzaw]

Tested fbb3110 on WorkletExample.tsx:

• iOS / Paper / debug → works like charm, all errors thrown in worklets (except those from gesture handler callbacks) are presented in a relatively nice LogBox ✅
• iOS / Paper / release → works as expected, all errors are silently ignored and the app runs later on (fun fact is that throwing an error on main RN JS runtime crashes the app) ✅
• Android / Paper / debug → same as iOS / Paper / debug ✅
• Android / Paper / release → each error in worklet crashes the app (@kmagiera says this is okay) ✅
• iOS / Fabric / debug → same as iOS / Paper / debug, however some worklets are labeled as "_f" instead of "anonymous" in the stack trace ✅
• iOS / Fabric / release → didn't check yet ⌛
• Android / Fabric / debug → all errors thrown in worklets are presented in LogBox, except for errors in gesture handler callbacks which crash the app (this might be related to NDK version since FabricExample uses NDK 24 where exception handling is broken, use NDK 21 instead, see Fix Android crash when worklet throws error #3558 for details) ✅
• Android / Fabric / release → didn't check yet ⌛

TODO later:

1. Update docs on debugging worklets in Flipper → this PR removes sourcemaps from worklets (//# sourceMappingURL=) and thus the possibility to debug worklet runtime with Flipper. The reason was that sourcemaps contained the source code of the whole file which significantly increased bundle size as well as JS runtime memory usage. As discussed offline, we won't fix it in this PR - instead we will add the instructions in the docs on how to patch plugin.js to restore sourcemaps.
2. Show errors from gesture-handler callbacks in LogBox as well → use callGuard in WorkletEventHandler, check if we still need to use callWithThis
3. Adapt Reanimated SWC plugin to the changes from this PR (and also shareable_rewrite in general)

[tomekzaw]

👏