Render Pass Report produce negative value for timeToRenderMillis in Android

[nguyen315]

Current behavior

• Issue: when navigating from Screen A to Screen B, the render pass report produces a negative value for timeToRenderMillis
• Due to some reasons, the onPress of CustomComponent does not have uiEvent args.

// Screen A
const startNavigationTTITimer = useStartProfiler();
<CustomComponent 
  onPress ={() => {
    console.log(new Date().getTime());
    startNavigationTTITimer({
      source: 'ScreenA',
    });
    navigation.navigate(SCREEN_B)
}}/>

// data is get from a fetch request

const ScreenB = () => {
  <PerformanceMeasureView screenName="ScreenB" interactive={!!data}>
    {renderComponent()}
  </PerformanceMeasureView>
}

The console.log(new Date().getTime()); statement output timestamp 1694745039299, which is smaller than flowStartTimeSinceEpochMillis: 1694745039300 a little bit

Render Pass Report

{
    "reportId": "71fd8112-a9f4-4899-8adc-52eee0b86094",
    "resourceAcquisitionStatus": {
        "totalTimeMillis": 0,
        "components": {}
    },
    "flowInstanceId": "da59df7d-6f69-4aed-96d0-9af5badbb486",
    "sourceScreen": "ScreenA",
    "destinationScreen": "ScreenB",
    "flowStartTimeSinceEpochMillis": 1694745039300,
    "timeToConsumeTouchEventMillis": 0,
    "renderPassName": "loading",
    "timeToRenderMillis": -632,
    "interactive": false
}

{
    "reportId": "967c3dc6-79b6-499e-96da-7573d6aa48cd",
    "resourceAcquisitionStatus": {
        "totalTimeMillis": 0,
        "components": {}
    },
    "flowInstanceId": "da59df7d-6f69-4aed-96d0-9af5badbb486",
    "sourceScreen": "ScreenA",
    "destinationScreen": "ScreenB",
    "flowStartTimeSinceEpochMillis": 1694745039300,
    "timeToConsumeTouchEventMillis": 0,
    "renderPassName": "interactive",
    "timeToRenderMillis": 336,
    "interactive": true
}

Expected behavior

I believe that timeToRenderMillis should consistently have a positive value in every report. If this is not the case, could you please explain the significance of a negative value for timeToRenderMillis?

To Reproduce

Platform:

• iOS
• Android

Packages

Which packages are affected by the issue?

• @shopify/react-native-performance
• @shopify/react-native-performance-lists-profiler
• flipper-plugin-shopify-react-native-performance
• @shopify/react-native-performance-navigation
• @shopify/react-native-performance-navigation-bottom-tabs
• @shopify/react-native-performance-navigation-drawer

Environment

• I've removed the packages that I don't use

package	version
@shopify/react-native-performance	4.1.2
@shopify/react-native-performance-lists-profiler	x.y.z
flipper-plugin-shopify-react-native-performance	x.y.z
@shopify/react-native-performance-navigation	3.0.0
@shopify/react-native-performance-navigation-bottom-tabs	x.y.z
@shopify/react-native-performance-navigation-drawer	x.y.z
@react-navigation/native	5.9.8
@react-navigation/bottom-tabs	5.5.2
@react-navigation/drawer	x.y.z
@react-navigation/stack	5.4.2
react-native	0.69.9