Skip to content

Name every worklet function #6163

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

Merged
merged 15 commits into from
Jul 16, 2024
Merged

Name every worklet function #6163

merged 15 commits into from
Jul 16, 2024

Conversation

tjzel
Copy link
Collaborator

@tjzel tjzel commented Jun 24, 2024

Summary

Currently, in case of unnamed worklets, such as

() => {
  'worklet';
  // some logic
}

function () {
  'worklet'
  // some logic
}

Those functions are named anonymous and parsed as such on the Worklet Runtime. However, this is a pitfall for Reanimated. When the anonymous function crashes and the stack trace is vague - it usually is, especially in production - the first suspicion is the error in Reanimated's core logic, since we don't know which function in particular has failed.

In case of a faulty logic in a third-party library this is double as harmful. It doesn't lead the creators of these libraries into the pit of success, since they might not be aware it's their code causing issues. Conversely, Reanimated maintainers receive a very obscure issue and engage in rather unpleasant debugging process - only to discover later the library's fault.

My idea is to:

  1. Add source library name to every worklet function.
  2. Add source file name to every worklet function.
  3. Add ID to every worklet function.

Test plan

  • Update the plugin test snapshots.
  • Add relevant test cases if not present already.
  • Try to recreate a crash for a third party library, compare the clarity of raised exceptions.
BeforeAfter
Production developer environment
Screenshot 2024-06-26 at 11 26 01
Sentry stack trace

Sentry stack traces are coming from Android. Unfortunately, regardless of these changes iOS Sentry stack traces look like this:

Screenshot 2024-06-26 at 12 42 24

@tjzel tjzel marked this pull request as ready for review July 2, 2024 08:29
r0h0gg6 pushed a commit to r0h0gg6/react-native-reanimated that referenced this pull request Jul 28, 2025
## Summary

Currently, in case of unnamed worklets, such as

```ts
() => {
  'worklet';
  // some logic
}

function () {
  'worklet'
  // some logic
}
```

Those functions are named `anonymous` and parsed as such on the Worklet
Runtime. However, this is a pitfall for Reanimated. When the `anonymous`
function crashes and the stack trace is vague - it usually is,
especially in production - the first suspicion is the error in
Reanimated's core logic, since we don't know which function in
particular has failed.

In case of a faulty logic in a third-party library this is double as
harmful. It doesn't lead the creators of these libraries into the pit of
success, since they might not be aware it's their code causing issues.
Conversely, Reanimated maintainers receive a very obscure issue and
engage in rather unpleasant debugging process - only to discover later
the library's fault.

My idea is to:

1. Add source library name to every worklet function.
2. Add source file name to every worklet function.
3. Add ID to every worklet function.

## Test plan

- [x] Update the plugin test snapshots.
- [x] Add relevant test cases if not present already.
- [x] Try to recreate a crash for a third party library, compare the
clarity of raised exceptions.

<table>
<th>Before</th><th>After</th>
<tr><td colspan=2>Production developer environment</td></tr>
<tr><td><img width="600"
src="https://github.com/software-mansion/react-native-reanimated/assets/40713406/b76dfc14-93d7-4783-821c-30cca00241c6)"/></td><td><img
width="600" alt="Screenshot 2024-06-26 at 11 26 01"
src="https://github.com/software-mansion/react-native-reanimated/assets/40713406/06da598b-baaa-4850-87ac-8c31a7a11c5b"></td></tr>
<tr><td colspan=2>Sentry stack trace</td></tr>
<tr><td><img width="600"
src="https://github.com/software-mansion/react-native-reanimated/assets/40713406/654c43e9-d869-4ac6-b09d-962779d51384)"/></td><td><img
width="600"
src="https://github.com/software-mansion/react-native-reanimated/assets/40713406/c18d164e-7b1b-4f2a-bc1c-6b536a881a59"/></td>
</tr>
</table>

Sentry stack traces are coming from Android. Unfortunately, regardless
of these changes iOS Sentry stack traces look like this:

![Screenshot 2024-06-26 at 12 42
24](https://github.com/software-mansion/react-native-reanimated/assets/40713406/da523f3c-3258-4c04-9356-d2816c1ec812)
r0h0gg6 pushed a commit to r0h0gg6/react-native-reanimated that referenced this pull request Jul 28, 2025
## Summary

After software-mansion#6163 was merged, each `worklet` function follows new naming
convention. Since `easings` are `worklets`, their `name` property has
also been changed. In web layout animations we were applying `easing`
based on its name, therefore changing it resulted in only default
`linear` easing being available on web.

This PR adds new `Symbol` into easing functions so that we can once
again get their name and apply correct easing to animations.

## Test plan

Tested on _**BasicLayoutAnimation**_ example with `Easing.exp`
r0h0gg6 pushed a commit to r0h0gg6/react-native-reanimated that referenced this pull request Jul 28, 2025
## Summary

Turns out that in software-mansion#6163 I overlooked the fact that we shouldn't rename
React part of worklet functions. This PR changes the naming behavior,
only worklet counterparts are renamed for better error verbosity. See
differences in snapshots for more details.

## Test plan

- [x] Upgraded jest unit tests pass
- [x] New runtime tests pass
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants