Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Route JS errors from UI runtime throught RN's LogBox module (#3846)
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. 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. 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(); })(); } ``` ![simulator_screenshot_3CECE7D6-DA04-4661-93C3-C25EF4A19423](https://user-images.githubusercontent.com/726445/206585057-e3d74c5f-bd02-4e9b-a4ae-ea8cd6fbb709.png) Co-authored-by: Tomek Zawadzki <tomasz.zawadzki@swmansion.com> Co-authored-by: Krzysztof Piaskowy <krzysztof.piaskowy@swmansion.com> Co-authored-by: Juliusz Wajgelt <49338439+jwajgelt@users.noreply.github.com>
- Loading branch information