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: Add performance measurements #1264

Merged
merged 11 commits into from
Jan 17, 2025

Conversation

Ldoppea
Copy link
Member

@Ldoppea Ldoppea commented Dec 19, 2024

This PR adds tooling for measuring app's performances.

It is based on recent CozyClient implementation of Performance API and on react-native-performances plugin

This has been done to mitigate missing RN native Performance APIs that implements performances.now() but not preformances.mark() nor preformances.measure()

The result is that we can now analyze performance through Flipper's plugin flipper-plugin-performance

image

Or with a bit of tooling (see commit named feat: Add conversion script to allow opening logs in Chrome devtools) it is possible to import those metrics into Google Chrome's devtools

image

TODO:

### ✨ Features

*

### 🐛 Bug Fixes

*

### 🔧 Tech

* Add tooling to measure app's performances

src/App.js Outdated Show resolved Hide resolved
@Ldoppea Ldoppea force-pushed the feat/add_performance_measurements branch 3 times, most recently from e76e118 to 9477980 Compare December 20, 2024 17:32
@Ldoppea Ldoppea changed the base branch from feat/meta_offline to feat/upgrade_client December 20, 2024 17:34
@Ldoppea Ldoppea force-pushed the feat/add_performance_measurements branch from 9477980 to 550084c Compare December 20, 2024 19:37
@Ldoppea Ldoppea force-pushed the feat/upgrade_client branch from ef219cf to d897dcd Compare December 20, 2024 19:54
@Ldoppea Ldoppea force-pushed the feat/add_performance_measurements branch from 550084c to 4c6ccc2 Compare December 20, 2024 19:54
@Ldoppea Ldoppea force-pushed the feat/upgrade_client branch from d897dcd to ab61511 Compare December 20, 2024 20:05
@Ldoppea Ldoppea force-pushed the feat/add_performance_measurements branch from 4c6ccc2 to fabbd4e Compare December 20, 2024 20:08
@Ldoppea Ldoppea force-pushed the feat/upgrade_client branch from ab61511 to 921476b Compare December 20, 2024 20:12
@Ldoppea Ldoppea force-pushed the feat/add_performance_measurements branch from fabbd4e to 8821f44 Compare December 20, 2024 20:20
markName: markNameNav,
measureName: 'Mount <Nav />'
})
}, [markNameNav])
Copy link
Contributor

@zatteo zatteo Jan 2, 2025

Choose a reason for hiding this comment

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

nit: What do you think of an extracted hook like usePerformanceMeasure(markName, mesureName) ?

Copy link
Member Author

Choose a reason for hiding this comment

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

Not sure how to implement it right now, so I propose to implement it in the future if we need it

@Ldoppea Ldoppea force-pushed the feat/add_performance_measurements branch from 8821f44 to 07cefb5 Compare January 9, 2025 10:50
Base automatically changed from feat/upgrade_client to feat/meta_offline January 16, 2025 11:46
ReactNative only support a subset of the web's Performance API

In order to measure our code performance, we want to use
`performance.mark()` and `performance.measure()` methods that are not
natively supported by ReactNative

`react-native-performance` plugin provide those methods and also allow
to se results in realtime thanks to
`react-native-performance-flipper-reporter` plugin
As we encounter some performances issues in the app startup, we want to
add some metrics to understand where time is consumed

All measurement are made through the `measure.ts` helper that wraps the
`react-native-performance` library and fit the incoming CozyClient
performance API

Related PR: cozy/cozy-client#1574
`cozy-client` and `cozy-pouch-link` has been upgraded to `51.7.0` in
order to retrieve the new Performance API implementation

Related PR: cozy/cozy-client#1574
In cozy/cozy-client#1574 we implemented a new CozyClient API that allow
to enable CozyClient's internal performances measurements

This PR configure CozyClient and related links with a react-native
compatible Performance API

This will allow us to analyse performances issues on CozyClient when
used in the Flagship App environment
We suspected and found some performances issues due to Redux store
mutations

This commit patches the Redux package in order to measure CozyClient's
store updates
Previous commits enabled performances measurements in the app

Those performances measures can be read using a Flipper plugin

This may be not enough as we want to analyse performance issues on real
users devices for which Flipper is not enabled

To fix this we introduce a new UniversalLink that allows the user to
send their performance data to the Cozy support if they want to

To send performance logs, the following links can be used:
- https://links.mycozy.cloud/flagship/sendperfs
- cozy://sendperfs
This would ease distinguishing the date from the time when reading file
name
In previous commit we allowed the users to send their performance logs
by email to Cozy's support

The sent file contains raw measurement data that cannot be easily read

This script allows to convert the sent file to a format supported by
Google Chrome's performance devtools

In order to make it work, retrieve some user's logs and run the
following command:
```shell
yarn perf:convert <some_log_file_path>
```

A new file with the same name suffixed by `_converted` will be
generated and can be imported to Google Chrome's performance devtools
By default, `react-native-performance-flipper-reporter` does not
support custom measurement categories

This commit patches `react-native-performance-flipper-reporter` so it
will display as many categories as provided to the
`rnperformances.measure()` method calls
@Ldoppea Ldoppea force-pushed the feat/add_performance_measurements branch from 07cefb5 to 6b4861a Compare January 16, 2025 12:26
@Ldoppea Ldoppea force-pushed the feat/add_performance_measurements branch from 6b4861a to 1cc6687 Compare January 16, 2025 12:31
@Ldoppea
Copy link
Member Author

Ldoppea commented Jan 16, 2025

I added the documentation in docs/how-to-debug-performances.md

Copy link
Contributor

@paultranvan paultranvan left a comment

Choose a reason for hiding this comment

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

Nice job!

@Ldoppea Ldoppea merged commit 1bd2a8a into feat/meta_offline Jan 17, 2025
1 check passed
@Ldoppea Ldoppea deleted the feat/add_performance_measurements branch January 17, 2025 10:05
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.

3 participants