Refactor perf

front_end/core/host/RNPerfMetrics.ts

@@ -53,6 +53,17 @@ class RNPerfMetrics {
     }
   }
 
+  registerPerfMetricsGlobalPostMessageHandler(): void {
+    if (globalThis.enableReactNativePerfMetrics !== true ||
+        globalThis.enableReactNativePerfMetricsGlobalPostMessage !== true) {
+      return;
+    }
+
+    this.addEventListener(event => {
+      window.postMessage({event, tag: 'react-native-chrome-devtools-perf-metrics'}, window.location.origin);
+    });
+  }
+
   setLaunchId(launchId: string|null): void {
     this.#launchId = launchId;
   }
@@ -80,17 +91,6 @@ function getPerfTimestamp(): DOMHighResTimeStamp {
   return performance.timeOrigin + performance.now();
 }
 
-export function registerPerfMetricsGlobalPostMessageHandler(): void {
-  if (globalThis.enableReactNativePerfMetrics !== true ||
-      globalThis.enableReactNativePerfMetricsGlobalPostMessage !== true) {
-    return;
-  }
-
-  getInstance().addEventListener(event => {
-    window.postMessage({event, tag: 'react-native-chrome-devtools-perf-metrics'}, window.location.origin);
-  });
-}
-
 type CommonEventFields = Readonly<{
   timestamp: DOMHighResTimeStamp,
   launchId: string | void | null,

front_end/entrypoints/rn_fusebox/rn_fusebox.ts

@@ -22,11 +22,18 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Main from '../main/main.js';
 
-import type * as InspectorBackend from '../../core/protocol_client/InspectorBackend.js';
 import type * as Platform from '../../core/platform/platform.js';
 import type * as Sources from '../../panels/sources/sources.js';
 import * as RNExperiments from '../../core/rn_experiments/rn_experiments.js';
 
+/*
+ * To ensure accurate timing measurements,
+ * please make sure these perf metrics lines are called ahead of everything else
+ */
+Host.rnPerfMetrics.registerPerfMetricsGlobalPostMessageHandler();
+Host.rnPerfMetrics.setLaunchId(Root.Runtime.Runtime.queryParam('launchId'));
+Host.rnPerfMetrics.entryPointLoadingStarted('rn_fusebox');
+
 const UIStrings = {
   /**
    *@description Title of the 'React Native' tool in the Network Navigator View, which is part of the Sources tool
@@ -67,11 +74,6 @@ RNExperiments.RNExperimentsImpl.Instance.enableExperimentsByDefault([
   Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
 ]);
 
-Host.RNPerfMetrics.registerPerfMetricsGlobalPostMessageHandler();
-
-Host.rnPerfMetrics.setLaunchId(Root.Runtime.Runtime.queryParam('launchId'));
-Host.rnPerfMetrics.entryPointLoadingStarted('rn_fusebox');
-
 class FuseboxClientMetadataModel extends SDK.SDKModel.SDKModel<void> {
   constructor(target: SDK.Target.Target) {
     super(target);

front_end/entrypoints/rn_inspector/rn_inspector.ts

@@ -23,8 +23,11 @@ import type * as Sources from '../../panels/sources/sources.js';
 import * as RNExperiments from '../../core/rn_experiments/rn_experiments.js';
 import * as Host from '../../core/host/host.js';
 
-Host.RNPerfMetrics.registerPerfMetricsGlobalPostMessageHandler();
-
+/*
+ * To ensure accurate timing measurements,
+ * please make sure these perf metrics lines are called ahead of everything else
+ */
+Host.rnPerfMetrics.registerPerfMetricsGlobalPostMessageHandler();
 Host.rnPerfMetrics.setLaunchId(Root.Runtime.Runtime.queryParam('launchId'));
 Host.rnPerfMetrics.entryPointLoadingStarted('rn_inspector');