How to debug performance issues
Many of the performance issues we encounter in our apps are caused by long-running JS code that blocks the JS thread, causing bottlenecks and prevents other code from running; for example, if the JS thread is busy it can't receive events from the native side, even though the native views can still be interacted with (for example: button press callbacks, scroll events, etc.), causing lags and ultimately result in an unresponsive app and a not so great experience for our end users.
 
In this guide, we will go over all the tools we currently have to diagnose and analyze which components/modules have performance issues.
 
Performance BI events
Most of our current tools and monitoring capabilities are based on BI event 1332 which is sent automatically for all the registered screens in our apps. This is helpful both for monitoring in production, but also for debugging locally. All performance related measurements are sent via this event.
 
Available events
ComponentLoad: measures the complete time it took for a component to show. It's the sum of the time it took for the constructor, the componentDidMount, and the first render to run, including re-renders.
RNN.ComponentDidAppear: measures how long react-native-navigation component appear event took to run. In case you're performing some long-running operation there it won't delay showing the screen, but since it happens almost immediately after the component is loaded it delays the time that the user can interact with the screen, leading to poor experience.
RNN.ComponentDidDisappear: in a similar manner to the previous event, this measures RNN's component disappear time. This also affects the time for interaction but for the screens that comes next (when you push a new screen), or the previous screen (when you pop);
woa-engine.invoke: measures how long it took to execute an invoked method. The time includes async operations like network calls, so it reflects the actual impact during this time the user is probably waiting for something to happen.
woa-engine.component: measures the mount time of a component when the withPerformanceBI API is used (note: this is not exactly like the ComponentLoad event, it only measures the time from constructor to componentDidMount).