Discrepancy in Firebase Performance Metrics Between iOS and Android for React Native App

[RohitVGL]

We are observing a significant difference in Firebase Performance metrics between iOS and Android platforms for the React Native app. While Firebase reports show high latency and delays, the actual app performance doesn't reflect such issues. Moreover, the discrepancy between both platforms' metrics is notable, adding to the confusion. We need support in investigating the cause of this variance and ensuring consistent and accurate performance monitoring across both platforms.

Like:
On some pages, we have added the custom trace for Firebase, but these traces show different durations for Android and iOS.

ProductListPage:
Android: 10.29s on 11K samples
iOS: 3.75s on 11K samples

Code Snippet:
Functions

async function startTrace(name) {
    try {
      const test = await pref().startTrace(name);
      setTrace(test);
    } catch (error) {
      console.log('Trace Error', error);
    }
  }

  async function stopTrace() {
    if (trace) {
      try {
        await trace.stop();
      } catch (error) {
        console.log('Trace Error', error);
      }
    } else {
    }
  }

Functions Calls

useEffect(() => {
  const isProductListLoad = isFocused && loadingProductListData;

  if (isProductListLoad) {
    if (trace) {
    } else {
      startTrace('ProductListPage');
    }
  }

  if (!isProductListLoad) {
    stopTrace();
  }
}, [isFocused, loadingProductListData]);

It's also happening for the automatically captured trace like _app_start. we are getting different durations for Android and iOS.

Thanks

[mikehardy]

Hi there! With apologies I'm not sure anyone will have time to look at this and your project appears to be a great reproducer at the moment
I encourage you to reach right in to the node_modules code for @react-native-firebase/perf and instrument the code with native logging statements (I recommend you persist your work for safety via patch-package) then attempt to reproduce it to see what happens around our native code calls to the underlying firebase-ios-sdk to see if the difference is at the react-native-firebase layer or the firebase-ios-sdk layer (or perhaps in the react-native layer somehow?

If it's in react-native-firebase obviously we'd happily merge a patch.
If it's above us in react-native that would depend on what's going on (but you might want to start with a completely clean integration of just react-native and react-native-firebase first to make sure it's not some other thing - https://github.com/mikehardy/rnfbdemo/blob/main/make-demo.sh)
If it's below us in firebase-ios-sdk then you'd want to go for support there after doing a quick comparison with a reproducer built on https://github.com/firebase/quickstart-ios/tree/main/performance (note: these starter projects make doing a quick throwaway "what's it look like?" test really really easy IMHO, worth trying)

[RohitVGL]

Hey Team,
Thanks for the prompt response.

We have integrated the Firebase in our project through the React Native Firebase and we are following the steps for performance monitoring which is mentioned in the Firebase Performance Monitoring documentation.

Below are the details of the Firebase dependencies in package.json.

    "@react-native-firebase/analytics": "^21.2.0",
    "@react-native-firebase/app": "^21.2.0",
    "@react-native-firebase/crashlytics": "^21.2.0",
    "@react-native-firebase/database": "^21.2.0",
    "@react-native-firebase/perf": "^21.2.0",

Once any customer comes to the particular page then on the page focus and API call for the particular page, we start the trace for that page. and once we get the API response then we are stopping the trace for the page.

Please find the below code snippet for start/stop traces.

We are sending the link on the Product List Page and based on the link dependency we are calling the API.

 useEffect(() => {
    if (
      route.params.link !== undefined &&
      route.params.link !== null &&
      route.params.link.length > 0
    ) {
      setTimeout(() => {
        setFilterValue('');
        setSortValue('relevance');
        setCurrentPage(0);
        const prodListPayload = {
          link: route.params.link,
          page: 0,
          filter: '',
          sort: '',
        };

        dispatch(ProductListAPIAction(prodListPayload)); //API Call
      }, 1000);
    }
  }, [route?.params?.link]);

Below is the state which is defined in the reducer through which we are identifying whether that API is calling or not.

const loadingProductListData = useSelector(state => {
    return state?.ProductReducer?.onLoad;
  });

Below is the useEffect which is dependent on the isFocused & loadingProductListData state.

useEffect(() => {
  const isProductListLoad = isFocused && loadingProductListData;

  if (isProductListLoad) {
    if (trace) {
    } else {
      startTrace('ProductListPage');
    }
  }

  if (!isProductListLoad) {
    stopTrace();
  }
}, [isFocused, loadingProductListData]);

Start Trace Functions

async function startTrace(name) {
    try {
      const test = await pref().startTrace(name);
      setTrace(test);
    } catch (error) {
      console.log('Trace Error', error);
    }
  }

Stop Trace Functions

async function stopTrace() {
   if (trace) {
     try {
       await trace.stop();
     } catch (error) {
       console.log('Trace Error', error);
     }
   } else {
   }
 }

but we are getting a significant difference in Firebase performance metrics on both platforms Android and iOS. Please suggests.

Thanks

[mikehardy]

@RohitVGL did you read my comment? It does not seem like any of my suggestions were attempted --> #8168 (comment)

[RohitVGL]

@mikehardy, Can you please clarify more about the last comment action points?

[mikehardy]

I just re-read them, they seem clear to me. I can't clarify more without knowing what you want clarified.

To summarize:

• add logging statements directly in the native code - that is, you code native code that does native logging
• reproduce your issue while looking at the native logging to get a sense of the timing for the logging calls

You'll make decisions based on the logging output about where the problem is in terms of layers. Could be native SDK (firebase-ios-sdk or firebase-android-sdk). Could be react-native-firebase. Could be react-native.

You will do this work and request support in the appropriate area. My hunch is that it is not in the react-native-firebase layer. I suggest how to approach support directly with firebase-ios-sdk if it's at their layer.

Is any of that not clear? If so ask very specifically for the thing you need clarified, however, if it is a technical implementation question (for example, "how do I implement native logging" or "how do I see native logging on iOS"), I will refer to stackoverflow, as they explain much better than I do and they have examples.