How to use startScreenTrace?

[floydkim]

Hi everyone,

I need guidance on using the startScreenTrace function.
I've checked the documentation, but I'm still unsure about how to apply it to screen components in my app.
Can anyone provide a simple example of how to implement this for tracking screen performance? Any help would be much appreciated!

Thanks!

[mikehardy]

I'm sorry I don't understand, you state you have read the documentation, but you want a simple example.

The documentation contains a simple example

Perhaps you should describe the tests you have performed (with the code you used), the results you obtained, why they are confusing, and where specifically you need help in order to obtain the results you want related to the tests you provided.

https://stackoverflow.com/help/how-to-ask
https://stackoverflow.com/help/mcve

[floydkim]

@mikehardy

I'm sorry for asking the question without providing enough context.

After reviewing the docs, I'm still unsure about the correct way to use startTrace function in React components.

the example in docs

async function screenTrace() {
  // Define & start a screen trace
  try {
    const trace = await perf().startScreenTrace('FooScreen');
    // Stop the trace
    await trace.stop();
  } catch (e) {
    // rejects if iOS or (Android == 8 || Android == 8.1)
    // or if hardware acceleration is off
  }
}

Here's how I attempted to use it:

function FooScreen() {
    screenTrace()

    return <SomeView />
}

However, I'm concerned that calling start and stop in rapid succession, as shown in the documentation's example, may not provide accurate measurements. I was expecting an implementation that aligns with the react component's mount-unmount lifecycle.

Also I'm unsure whether this function should be called within the React component or outside it.

Could you clarify the best practice for using startTrace in a React component to track screen performance accurately?

[anujmpec]

@floydkim Did you get the proper result from performance monitoring?

[floydkim]

@anujmpec no 🥲 It's out of my interest now.

[stee1ix]

I have a custom implementation. I use onStateChange of NavigationContainer and start on a route mount and stop on route change. I'm not sure if this works correctly or not. I inherited this piece of code. Does the tracer continues with the instance till stop is called, or we need to let the await on startScreenTrace handle itself? @mikehardy

// screenTrace.js
import perf from '@react-native-firebase/perf';
import crashlytics from '@react-native-firebase/crashlytics';

async function screenTrace(screenName) {
  try {
    const trace = await perf().startScreenTrace(screenName);
    return {
      async stop() {
        try {
          await trace.stop();
        } catch (err) {
          crashlytics().recordError(err)
        }
      },
    };
  } catch (err) {
    crashlytics().recordError(err)
    return null;
  }
}

export default screenTrace;


// onStateChange
if (previousRouteKey !== currentRouteKey) {
      if (!prevRoutePerfRef.current) {
        screenTrace(currentRouteName).then((trace) => {
          prevRoutePerfRef.current = trace;
        });
      } else {
        // Close the previous trace
        prevRoutePerfRef.current?.stop?.().then(() =>
          screenTrace(currentRouteName).then((trace) => {
            prevRoutePerfRef.current = trace;
          })
        );
      }
}