Tekno & Sains7 September 2019 18:00
Logging React Native Startup Time on Android
Over the past weeks, I have been tasked to understand and identify kumparan mobile app startup performance on android. As we wait for Fabric and TurboModules we want to optimize our app performance with the tools we currently have.
On this article, I want to share the first step in that journey. Building up the instrumentation to understand our application startup time better.
Do you think react-native startup performance in android is slower?
For us to understand and identify our startup performance issue, we know that we will need to set up instrumentation to understand the application startup time better. Not only that this instrumentation will help us on debugging but also we use this on a production app to log all of our user's start-up performance time. We do this to ensure that we have a clear understanding backed with data about our user experience using our app.
- The logging starts when onCreate method on android is called. When the method is called, we log a unix timestamp and send it back to js when react context is ready.
- The logging ends when our getTime() method is called on JS. The method will return elapsed time of your app. With that data, you can do anything you want, whether it be sending the data back to your backend or logging it to sentry, etc.
Now let's get started shall we?.
For us to send back the UNIX timestamp from Java to JS we can use a global variable for this and send it back via getCatalystInstance.
- Copy the contents of the file PerfLogger.java below to your app's <app_root>/android/app/src/main/java/com/your_app_name/PerfLogger.java. Don't forget to change the package!.
- on MainApplication.java, look for the onCreate method, and initialize the PerfLogger just after the super.onCreate(); line using this new PerfLogger(getReactNativeHost()).initialize();
For us to get the total elapsed time, we need to put this piece of code into our app.
After you put the code into your app we can use it like this.
Don't forget to import the getTrace method!.
In the example above we run the getTrace method right after our SplashScreen.hide() function. But, you can put the method anywhere you like. The return of the method will always be a number. The sentry implementation is optional, and you can change the logic inside to whatever you want.
That's it, you can record the startup time of your react-native android app now. In the next article for our series, we will continue the discussion about TurboModules.