Sort Server Components Track Group ahead of Client Scheduler/Components Tracks

Author: sebmarkbage

packages/react-client/src/ReactFlightClient.js

@@ -71,7 +71,10 @@ import {createBoundServerReference} from './ReactFlightReplyClient';
 
 import {readTemporaryReference} from './ReactFlightTemporaryReferences';
 
-import {logComponentRender} from './ReactFlightPerformanceTrack';
+import {
+  markAllTracksInOrder,
+  logComponentRender,
+} from './ReactFlightPerformanceTrack';
 
 import {
   REACT_LAZY_TYPE,
@@ -649,6 +652,7 @@ export function reportGlobalError(response: Response, error: Error): void {
     }
   });
   if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    markAllTracksInOrder();
     flushComponentPerformance(getChunk(response, 0), 0, -Infinity);
   }
 }

packages/react-client/src/ReactFlightPerformanceTrack.js

@@ -19,6 +19,26 @@ const supportsUserTiming =
 
 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);
+  }
+}
+
 // Reused to avoid thrashing the GC.
 const reusableComponentDevToolDetails = {
   color: 'primary',

packages/react-reconciler/src/ReactFiberPerformanceTrack.js

@@ -56,7 +56,7 @@ export function setCurrentTrackFromLanes(lanes: number): void {
 }
 
 const blockingLaneMarker = {
-  startTime: 0,
+  startTime: 0.003,
   detail: {
     devtools: {
       color: 'primary-light',
@@ -67,7 +67,7 @@ const blockingLaneMarker = {
 };
 
 const transitionLaneMarker = {
-  startTime: 0,
+  startTime: 0.003,
   detail: {
     devtools: {
       color: 'primary-light',
@@ -78,7 +78,7 @@ const transitionLaneMarker = {
 };
 
 const suspenseLaneMarker = {
-  startTime: 0,
+  startTime: 0.003,
   detail: {
     devtools: {
       color: 'primary-light',
@@ -89,7 +89,7 @@ const suspenseLaneMarker = {
 };
 
 const idleLaneMarker = {
-  startTime: 0,
+  startTime: 0.003,
   detail: {
     devtools: {
       color: 'primary-light',