Time to the time space of the payload when forwarding debug info

facebook · Dec 10, 2024 · f9fc19f · f9fc19f
1 parent 208d67e
commit f9fc19f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 21 deletions.
diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -2744,12 +2744,13 @@ describe('ReactFlight', () => {
           : undefined,
       );
       const result = await promise;
+
       const thirdPartyChildren = await result.props.children[1];
       // We expect the debug info to be transferred from the inner stream to the outer.
       expect(getDebugInfo(thirdPartyChildren[0])).toEqual(
         __DEV__
           ? [
-              {time: 30},
+              {time: 13},
               {
                 name: 'ThirdPartyComponent',
                 env: 'third-party',
@@ -2760,15 +2761,15 @@ describe('ReactFlight', () => {
                   : undefined,
                 props: {},
               },
-              {time: 31},
-              {time: 21},
+              {time: 14},
+              {time: 21}, // This last one is when the promise resolved into the first party.
             ]
           : undefined,
       );
       expect(getDebugInfo(thirdPartyChildren[1])).toEqual(
         __DEV__
           ? [
-              {time: 32},
+              {time: 15},
               {
                 name: 'ThirdPartyLazyComponent',
                 env: 'third-party',
@@ -2779,14 +2780,14 @@ describe('ReactFlight', () => {
                   : undefined,
                 props: {},
               },
-              {time: 33},
+              {time: 16},
             ]
           : undefined,
       );
       expect(getDebugInfo(thirdPartyChildren[2])).toEqual(
         __DEV__
           ? [
-              {time: 28},
+              {time: 11},
               {
                 name: 'ThirdPartyFragmentComponent',
                 env: 'third-party',
@@ -2797,7 +2798,7 @@ describe('ReactFlight', () => {
                   : undefined,
                 props: {},
               },
-              {time: 29},
+              {time: 12},
             ]
           : undefined,
       );
@@ -2906,7 +2907,7 @@ describe('ReactFlight', () => {
       expect(getDebugInfo(thirdPartyFragment.props.children)).toEqual(
         __DEV__
           ? [
-              {time: 24},
+              {time: 11},
               {
                 name: 'ThirdPartyAsyncIterableComponent',
                 env: 'third-party',
@@ -2917,7 +2918,7 @@ describe('ReactFlight', () => {
                   : undefined,
                 props: {},
               },
-              {time: 25},
+              {time: 12},
             ]
           : undefined,
       );

diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
@@ -1271,7 +1271,7 @@ function renderFunctionComponent<Props>(
       // Track when we started rendering this component.
       if (enableProfilerTimer && enableComponentPerformanceTrack) {
         task.timed = true;
-        emitTimingChunk(request, componentDebugID);
+        emitTimingChunk(request, componentDebugID, performance.now());
       }
 
       emitDebugChunk(request, componentDebugID, componentDebugInfo);
@@ -3828,21 +3828,29 @@ function forwardDebugInfo(
 ) {
   for (let i = 0; i < debugInfo.length; i++) {
     request.pendingChunks++;
-    if (typeof debugInfo[i].name === 'string') {
-      // We outline this model eagerly so that we can refer to by reference as an owner.
-      // If we had a smarter way to dedupe we might not have to do this if there ends up
-      // being no references to this as an owner.
-      outlineComponentInfo(request, (debugInfo[i]: any));
+    if (typeof debugInfo[i].time === 'number') {
+      // When forwarding time we need to ensure to convert it to the time space of the payload.
+      emitTimingChunk(request, id, debugInfo[i].time);
+    } else {
+      if (typeof debugInfo[i].name === 'string') {
+        // We outline this model eagerly so that we can refer to by reference as an owner.
+        // If we had a smarter way to dedupe we might not have to do this if there ends up
+        // being no references to this as an owner.
+        outlineComponentInfo(request, (debugInfo[i]: any));
+      }
+      emitDebugChunk(request, id, debugInfo[i]);
     }
-    emitDebugChunk(request, id, debugInfo[i]);
   }
 }
 
-function emitTimingChunk(request: Request, id: number): void {
+function emitTimingChunk(
+  request: Request,
+  id: number,
+  timestamp: number,
+): void {
   if (!enableProfilerTimer || !enableComponentPerformanceTrack) {
     return;
   }
-  const timestamp = performance.now();
   request.pendingChunks++;
   const relativeTimestamp = timestamp - request.timeOrigin;
   const row =
@@ -3945,7 +3953,7 @@ function emitChunk(
 function erroredTask(request: Request, task: Task, error: mixed): void {
   if (enableProfilerTimer && enableComponentPerformanceTrack) {
     if (task.timed) {
-      emitTimingChunk(request, task.id);
+      emitTimingChunk(request, task.id, performance.now());
     }
   }
   request.abortableTasks.delete(task);
@@ -4022,7 +4030,7 @@ function retryTask(request: Request, task: Task): void {
     // We've finished rendering. Log the end time.
     if (enableProfilerTimer && enableComponentPerformanceTrack) {
       if (task.timed) {
-        emitTimingChunk(request, task.id);
+        emitTimingChunk(request, task.id, performance.now());
       }
     }
 
@@ -4151,7 +4159,7 @@ function abortTask(task: Task, request: Request, errorId: number): void {
   // Track when we aborted this task as its end time.
   if (enableProfilerTimer && enableComponentPerformanceTrack) {
     if (task.timed) {
-      emitTimingChunk(request, task.id);
+      emitTimingChunk(request, task.id, performance.now());
     }
   }
   // Instead of emitting an error per task.id, we emit a model that only