Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Implement better reanimated logger with clean stack traces #6385

Merged
merged 28 commits into from
Aug 26, 2024

Conversation

MatiPl01
Copy link
Member

@MatiPl01 MatiPl01 commented Aug 7, 2024

Summary

This PR is a much cleaner approach than proposed in #6364. It includes metro-config modification which is essential to collapse logs from reanimated source code, which aren't helpful to the user while tracking down the issue. The previous approach was trimming logs from reanimated source code completely - this approach just collapses them, so that they are still available to the user and can be revealed above the presented stack trace part.

General idea

To get better logs, I had to implement the following 2 changes:

  1. metro config - the symbolicator must have been added to properly collapse stack frames that aren't meaningful to the user,
  2. logger object - the new logger object uses LogBox.addLog method, thanks to which we can get pretty stack traces when we log a warning from the UI thread (before such warnings didn't include meaningful stack trace as error stack was created inside LogBox after runOnJS was called, so we were getting a bit limited JS stack - see example 11 in the follow up PR).

Example improvement

(tested on a real project to see if it works there as well)

  • current logs either point to the reanimated source code or aren't readable at all (if warning is logged from the UI thread as in the example below)
  • new logger shows correct destination of the issue culprit in the code frame, collapses stack frames in the call stack that aren't interesting to the user (reanimated source code) and focuses on the file where the user included problematic code
Before After
Screen.Recording.2024-08-07.at.15.36.48.mp4
Screen.Recording.2024-08-07.at.15.40.33.mp4

Test plan

See the example in the next PR (#6387).

@MatiPl01 MatiPl01 self-assigned this Aug 7, 2024
@MatiPl01 MatiPl01 marked this pull request as ready for review August 8, 2024 09:38
@MatiPl01 MatiPl01 requested review from tjzel and tomekzaw August 8, 2024 09:47
@MatiPl01 MatiPl01 force-pushed the @matipl01/better-logs branch from 916756d to def4d34 Compare August 12, 2024 14:36
@MatiPl01 MatiPl01 requested a review from tjzel August 12, 2024 17:56
Copy link
Collaborator

@tjzel tjzel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks all good, let's figure out the types and also let's make sure we have defined behavior when copying errors from React Runtime to Workler Runtime, i.e.:

// React Runtime
const error = new ReanimatedError();
runOnUI(() => {
  console.log(error); // Should fail, let's make it verbose.
  };
)();

packages/react-native-reanimated/src/errors.ts Outdated Show resolved Hide resolved
@MatiPl01 MatiPl01 requested a review from tjzel August 13, 2024 09:44
packages/react-native-reanimated/plugin/src/globals.ts Outdated Show resolved Hide resolved
packages/react-native-reanimated/src/errors.ts Outdated Show resolved Hide resolved
packages/react-native-reanimated/src/globals.d.ts Outdated Show resolved Hide resolved
@MatiPl01 MatiPl01 force-pushed the @matipl01/better-logs branch from 522d301 to 9cb4433 Compare August 21, 2024 14:03
Copy link
Collaborator

@tjzel tjzel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work! I feel bad about being so demanding in the review process 😅. We're very close to merge it though!

packages/react-native-reanimated/src/globals.d.ts Outdated Show resolved Hide resolved
packages/react-native-reanimated/src/initializers.ts Outdated Show resolved Hide resolved
packages/react-native-reanimated/src/threads.ts Outdated Show resolved Hide resolved
packages/react-native-reanimated/src/threads.ts Outdated Show resolved Hide resolved
@MatiPl01 MatiPl01 requested a review from tjzel August 23, 2024 15:21
Copy link
Collaborator

@tjzel tjzel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Finally! I added only some minor comments but you can ignore them if you feel so. Let's merge this!

Just a reminder, please make sure to make a follow-up PR which adds information about this feature in our Docs.

packages/react-native-reanimated/src/threads.ts Outdated Show resolved Hide resolved
packages/react-native-reanimated/src/threads.ts Outdated Show resolved Hide resolved
packages/react-native-reanimated/src/threads.ts Outdated Show resolved Hide resolved
packages/react-native-reanimated/src/errors.ts Outdated Show resolved Hide resolved
packages/react-native-reanimated/src/errors.ts Outdated Show resolved Hide resolved
MatiPl01 and others added 7 commits August 26, 2024 11:22
Co-authored-by: Tomasz Żelawski <40713406+tjzel@users.noreply.github.com>
Co-authored-by: Tomasz Żelawski <40713406+tjzel@users.noreply.github.com>
Co-authored-by: Tomasz Żelawski <40713406+tjzel@users.noreply.github.com>
Co-authored-by: Tomasz Żelawski <40713406+tjzel@users.noreply.github.com>
@MatiPl01 MatiPl01 changed the title feat: Implement much better reanimated logger with clean stack traces feat: Implement better reanimated logger with clean stack traces Aug 26, 2024
@MatiPl01 MatiPl01 added this pull request to the merge queue Aug 26, 2024
Merged via the queue into main with commit 3b378fe Aug 26, 2024
11 checks passed
@MatiPl01 MatiPl01 deleted the @matipl01/better-logs branch August 26, 2024 10:17
Latropos pushed a commit that referenced this pull request Aug 26, 2024
## Summary

This PR is a much cleaner approach than proposed in #6364. It includes
metro-config modification which is essential to collapse logs from
reanimated source code, which aren't helpful to the user while tracking
down the issue. The previous approach was trimming logs from reanimated
source code completely - this approach just collapses them, so that they
are still available to the user and can be revealed above the presented
stack trace part.

## General idea

To get better logs, I had to implement the following 2 changes:
1. **metro config** - the `symbolicator` must have been added to
properly collapse stack frames that aren't meaningful to the user,
2. **logger object** - the new logger object uses `LogBox.addLog`
method, thanks to which we can get pretty stack traces when we log a
warning from the UI thread (before such warnings didn't include
meaningful stack trace as error stack was created inside `LogBox` after
`runOnJS` was called, so we were getting a bit limited JS stack - see
[example
11](#6387 (comment))
in the follow up PR).

## Example improvement
(tested on a real project to see if it works there as well)

- current logs either point to the reanimated source code or aren't
readable at all (if warning is logged from the UI thread as in the
example below)
- new logger shows correct destination of the issue culprit in the code
frame, collapses stack frames in the call stack that aren't interesting
to the user (reanimated source code) and focuses on the file where the
user included problematic code

| Before | After |
|-|-|
| <video
src="https://github.com/user-attachments/assets/a5302586-f4d0-4636-8bd8-6c406c9d8c73"
/> | <video
src="https://github.com/user-attachments/assets/3121636f-69a2-4b6f-8f38-b1889d4c62e1"
/> |

## Test plan

See the example in the next PR (#6387).

---------

Co-authored-by: Tomasz Żelawski <40713406+tjzel@users.noreply.github.com>
tjzel added a commit that referenced this pull request Aug 28, 2024
This PR is a much cleaner approach than proposed in #6364. It includes
metro-config modification which is essential to collapse logs from
reanimated source code, which aren't helpful to the user while tracking
down the issue. The previous approach was trimming logs from reanimated
source code completely - this approach just collapses them, so that they
are still available to the user and can be revealed above the presented
stack trace part.

To get better logs, I had to implement the following 2 changes:
1. **metro config** - the `symbolicator` must have been added to
properly collapse stack frames that aren't meaningful to the user,
2. **logger object** - the new logger object uses `LogBox.addLog`
method, thanks to which we can get pretty stack traces when we log a
warning from the UI thread (before such warnings didn't include
meaningful stack trace as error stack was created inside `LogBox` after
`runOnJS` was called, so we were getting a bit limited JS stack - see
[example
11](#6387 (comment))
in the follow up PR).

(tested on a real project to see if it works there as well)

- current logs either point to the reanimated source code or aren't
readable at all (if warning is logged from the UI thread as in the
example below)
- new logger shows correct destination of the issue culprit in the code
frame, collapses stack frames in the call stack that aren't interesting
to the user (reanimated source code) and focuses on the file where the
user included problematic code

| Before | After |
|-|-|
| <video
src="https://github.com/user-attachments/assets/a5302586-f4d0-4636-8bd8-6c406c9d8c73"
/> | <video
src="https://github.com/user-attachments/assets/3121636f-69a2-4b6f-8f38-b1889d4c62e1"
/> |

See the example in the next PR (#6387).

---------

Co-authored-by: Tomasz Żelawski <40713406+tjzel@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants