Use console.timeStamp instead of performance.measure in Component Performance Track

packages/react-client/src/ReactFlightPerformanceTrack.js

@@ -7,52 +7,35 @@
  * @flow
  */
 
+/* eslint-disable react-internal/no-production-logging */
+
 import type {ReactComponentInfo} from 'shared/ReactTypes';
 
 import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
 
 const supportsUserTiming =
   enableProfilerTimer &&
-  typeof performance !== 'undefined' &&
-  // $FlowFixMe[method-unbinding]
-  typeof performance.measure === 'function';
+  typeof console !== 'undefined' &&
+  typeof console.timeStamp === 'function';
 
 const COMPONENTS_TRACK = 'Server Components ⚛';
 
-const componentsTrackMarker = {
-  startTime: 0.001,
-  detail: {
-    devtools: {
-      color: 'primary-light',
-      track: 'Primary',
-      trackGroup: COMPONENTS_TRACK,
-    },
-  },
-};
-
 export function markAllTracksInOrder() {
   if (supportsUserTiming) {
     // Ensure we create the Server Component track groups earlier than the Client Scheduler
     // and Client Components. We can always add the 0 time slot even if it's in the past.
     // That's still considered for ordering.
-    performance.mark('Server Components Track', componentsTrackMarker);
+    console.timeStamp(
+      'Server Components Track',
+      0.001,
+      0.001,
+      'Primary',
+      COMPONENTS_TRACK,
+      'primary-light',
+    );
   }
 }
 
-// Reused to avoid thrashing the GC.
-const reusableComponentDevToolDetails = {
-  color: 'primary',
-  track: '',
-  trackGroup: COMPONENTS_TRACK,
-};
-const reusableComponentOptions = {
-  start: -0,
-  end: -0,
-  detail: {
-    devtools: reusableComponentDevToolDetails,
-  },
-};
-
 const trackNames = [
   'Primary',
   'Parallel',
@@ -79,7 +62,7 @@ export function logComponentRender(
     const name = componentInfo.name;
     const isPrimaryEnv = env === rootEnv;
     const selfTime = endTime - startTime;
-    reusableComponentDevToolDetails.color =
+    const color =
       selfTime < 0.5
         ? isPrimaryEnv
           ? 'primary-light'
@@ -93,12 +76,16 @@ export function logComponentRender(
               ? 'primary-dark'
               : 'secondary-dark'
             : 'error';
-    reusableComponentDevToolDetails.track = trackNames[trackIdx];
-    reusableComponentOptions.start = startTime < 0 ? 0 : startTime;
-    reusableComponentOptions.end = childrenEndTime;
     const entryName =
       isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
-    performance.measure(entryName, reusableComponentOptions);
+    console.timeStamp(
+      entryName,
+      startTime < 0 ? 0 : startTime,
+      childrenEndTime,
+      trackNames[trackIdx],
+      COMPONENTS_TRACK,
+      color,
+    );
   }
 }
 
@@ -112,8 +99,17 @@ export function logComponentErrored(
   error: mixed,
 ): void {
   if (supportsUserTiming) {
-    const properties = [];
-    if (__DEV__) {
+    const env = componentInfo.env;
+    const name = componentInfo.name;
+    const isPrimaryEnv = env === rootEnv;
+    const entryName =
+      isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
+    if (
+      __DEV__ &&
+      typeof performance !== 'undefined' &&
+      // $FlowFixMe[method-unbinding]
+      typeof performance.measure === 'function'
+    ) {
       const message =
         typeof error === 'object' &&
         error !== null &&
@@ -122,26 +118,30 @@ export function logComponentErrored(
             String(error.message)
           : // eslint-disable-next-line react-internal/safe-string-coercion
             String(error);
-      properties.push(['Error', message]);
-    }
-    const env = componentInfo.env;
-    const name = componentInfo.name;
-    const isPrimaryEnv = env === rootEnv;
-    const entryName =
-      isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
-    performance.measure(entryName, {
-      start: startTime < 0 ? 0 : startTime,
-      end: childrenEndTime,
-      detail: {
-        devtools: {
-          color: 'error',
-          track: trackNames[trackIdx],
-          trackGroup: COMPONENTS_TRACK,
-          tooltipText: entryName + ' Errored',
-          properties,
+      const properties = [['Error', message]];
+      performance.measure(entryName, {
+        start: startTime < 0 ? 0 : startTime,
+        end: childrenEndTime,
+        detail: {
+          devtools: {
+            color: 'error',
+            track: trackNames[trackIdx],
+            trackGroup: COMPONENTS_TRACK,
+            tooltipText: entryName + ' Errored',
+            properties,
+          },
         },
-      },
-    });
+      });
+    } else {
+      console.timeStamp(
+        entryName,
+        startTime < 0 ? 0 : startTime,
+        childrenEndTime,
+        trackNames[trackIdx],
+        COMPONENTS_TRACK,
+        'error',
+      );
+    }
   }
 }
 
@@ -153,11 +153,14 @@ export function logDedupedComponentRender(
 ): void {
   if (supportsUserTiming && endTime >= 0 && trackIdx < 10) {
     const name = componentInfo.name;
-    reusableComponentDevToolDetails.color = 'tertiary-light';
-    reusableComponentDevToolDetails.track = trackNames[trackIdx];
-    reusableComponentOptions.start = startTime < 0 ? 0 : startTime;
-    reusableComponentOptions.end = endTime;
     const entryName = name + ' [deduped]';
-    performance.measure(entryName, reusableComponentOptions);
+    console.timeStamp(
+      entryName,
+      startTime < 0 ? 0 : startTime,
+      endTime,
+      trackNames[trackIdx],
+      COMPONENTS_TRACK,
+      'tertiary-light',
+    );
   }
 }