Encode ReactIOInfo as its own row type

Author: sebmarkbage

packages/react-client/src/ReactFlightClient.js

@@ -47,6 +47,7 @@ import {
   enablePostpone,
   enableProfilerTimer,
   enableComponentPerformanceTrack,
+  enableAsyncDebugInfo,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -2740,6 +2741,37 @@ function resolveConsoleEntry(
   );
 }
 
+function resolveIOInfo(
+  response: Response,
+  id: number,
+  model: UninitializedModel,
+): void {
+  const chunks = response._chunks;
+  let chunk = chunks.get(id);
+  if (!chunk) {
+    chunk = createResolvedModelChunk(response, model);
+    chunks.set(id, chunk);
+    initializeModelChunk(chunk);
+  } else {
+    resolveModelChunk(chunk, model);
+    if (chunk.status === RESOLVED_MODEL) {
+      initializeModelChunk(chunk);
+    }
+  }
+  if (chunk.status === INITIALIZED) {
+    // TODO: Log.
+  } else {
+    chunk.then(
+      v => {
+        // TODO: Log.
+      },
+      e => {
+        // Ignore debug info errors for now. Unnecessary noise.
+      },
+    );
+  }
+}
+
 function mergeBuffer(
   buffer: Array<Uint8Array>,
   lastChunk: Uint8Array,
@@ -2844,7 +2876,7 @@ function flushComponentPerformance(
 
   // First find the start time of the first component to know if it was running
   // in parallel with the previous.
-  const debugInfo = root._debugInfo;
+  const debugInfo = __DEV__ && root._debugInfo;
   if (debugInfo) {
     for (let i = 1; i < debugInfo.length; i++) {
       const info = debugInfo[i];
@@ -3101,6 +3133,17 @@ function processFullStringRow(
       }
       // Fallthrough to share the error with Console entries.
     }
+    case 74 /* "J" */: {
+      if (
+        enableProfilerTimer &&
+        enableComponentPerformanceTrack &&
+        enableAsyncDebugInfo
+      ) {
+        resolveIOInfo(response, id, row);
+        return;
+      }
+      // Fallthrough to share the error with Console entries.
+    }
     case 87 /* "W" */: {
       if (__DEV__) {
         resolveConsoleEntry(response, row);

packages/react-server/src/ReactFlightServer.js

@@ -1905,7 +1905,7 @@ function visitAsyncNode(
             return ioNode;
           }
           // Outline the IO node.
-          emitIOChunk(request, ioNode);
+          serializeIONode(request, ioNode);
           // Then emit a reference to us awaiting it in the current task.
           request.pendingChunks++;
           emitDebugChunk(request, task.id, {
@@ -1942,7 +1942,7 @@ function emitAsyncSequence(
       // each occurrence. Right now we'll only track the first time it is invoked.
       awaitedNode.end = performance.now();
     }
-    emitIOChunk(request, awaitedNode);
+    serializeIONode(request, awaitedNode);
     request.pendingChunks++;
     emitDebugChunk(request, task.id, {
       awaited: ((awaitedNode: any): ReactIOInfo), // This is deduped by this reference.
@@ -3493,80 +3493,88 @@ function outlineComponentInfo(
   request.writtenObjects.set(componentInfo, serializeByValueID(id));
 }
 
-function outlineIOInfo(request: Request, ioInfo: ReactIOInfo): void {
+function emitIOInfoChunk(
+  request: Request,
+  id: number,
+  start: number,
+  end: number,
+  stack: ?ReactStackTrace,
+): void {
   if (!__DEV__) {
     // These errors should never make it into a build so we don't need to encode them in codes.json
     // eslint-disable-next-line react-internal/prod-error-codes
     throw new Error(
-      'outlineIOInfo should never be called in production mode. This is a bug in React.',
+      'emitIOInfoChunk should never be called in production mode. This is a bug in React.',
     );
   }
 
-  if (request.writtenObjects.has(ioInfo)) {
-    // Already written
-    return;
-  }
-
-  // Limit the number of objects we write to prevent emitting giant props objects.
   let objectLimit = 10;
-  if (ioInfo.stack != null) {
-    // Ensure we have enough object limit to encode the stack trace.
-    objectLimit += ioInfo.stack.length;
+  if (stack) {
+    objectLimit += stack.length;
   }
-
-  // We use the console encoding so that we can dedupe objects but don't necessarily
-  // use the full serialization that requires a task.
   const counter = {objectLimit};
+  function replacer(
+    this:
+      | {+[key: string | number]: ReactClientValue}
+      | $ReadOnlyArray<ReactClientValue>,
+    parentPropertyName: string,
+    value: ReactClientValue,
+  ): ReactJSONValue {
+    return renderConsoleValue(
+      request,
+      counter,
+      this,
+      parentPropertyName,
+      value,
+    );
+  }
 
-  // We can't serialize the ConsoleTask/Error objects so we need to omit them before serializing.
-  const relativeStartTimestamp = ioInfo.start - request.timeOrigin;
-  const relativeEndTimestamp = ioInfo.end - request.timeOrigin;
+  const relativeStartTimestamp = start - request.timeOrigin;
+  const relativeEndTimestamp = end - request.timeOrigin;
   const debugIOInfo: Omit<ReactIOInfo, 'debugTask' | 'debugStack'> = {
     start: relativeStartTimestamp,
     end: relativeEndTimestamp,
-    stack: ioInfo.stack,
+    stack: stack,
   };
-  const id = outlineConsoleValue(request, counter, debugIOInfo);
-  request.writtenObjects.set(ioInfo, serializeByValueID(id));
+  // $FlowFixMe[incompatible-type] stringify can return null
+  const json: string = stringify(debugIOInfo, replacer);
+  const row = id.toString(16) + ':J' + json + '\n';
+  const processedChunk = stringToChunk(row);
+  request.completedRegularChunks.push(processedChunk);
 }
 
-function emitIOChunk(request: Request, ioNode: IONode | PromiseNode): void {
-  if (!__DEV__) {
-    // These errors should never make it into a build so we don't need to encode them in codes.json
-    // eslint-disable-next-line react-internal/prod-error-codes
-    throw new Error(
-      'outlineIOInfo should never be called in production mode. This is a bug in React.',
-    );
+function outlineIOInfo(request: Request, ioInfo: ReactIOInfo): void {
+  if (request.writtenObjects.has(ioInfo)) {
+    // Already written
+    return;
   }
+  // We can't serialize the ConsoleTask/Error objects so we need to omit them before serializing.
+  request.pendingChunks++;
+  const id = request.nextChunkId++;
+  emitIOInfoChunk(request, id, ioInfo.start, ioInfo.end, ioInfo.stack);
+  request.writtenObjects.set(ioInfo, serializeByValueID(id));
+}
 
-  if (request.writtenObjects.has(ioNode)) {
+function serializeIONode(
+  request: Request,
+  ioNode: IONode | PromiseNode,
+): string {
+  const existingRef = request.writtenObjects.get(ioNode);
+  if (existingRef !== undefined) {
     // Already written
-    return;
+    return existingRef;
   }
 
-  // Limit the number of objects we write to prevent emitting giant props objects.
-  let objectLimit = 10;
   let stack = null;
   if (ioNode.stack !== null) {
     stack = filterStackTrace(request, ioNode.stack, 1);
-    // Ensure we have enough object limit to encode the stack trace.
-    objectLimit += stack.length;
   }
-
-  // We use the console encoding so that we can dedupe objects but don't necessarily
-  // use the full serialization that requires a task.
-  const counter = {objectLimit};
-
-  // We can't serialize the ConsoleTask/Error objects so we need to omit them before serializing.
-  const relativeStartTimestamp = ioNode.start - request.timeOrigin;
-  const relativeEndTimestamp = ioNode.end - request.timeOrigin;
-  const debugIOInfo: Omit<ReactIOInfo, 'debugTask' | 'debugStack'> = {
-    start: relativeStartTimestamp,
-    end: relativeEndTimestamp,
-    stack: stack,
-  };
-  const id = outlineConsoleValue(request, counter, debugIOInfo);
-  request.writtenObjects.set(ioNode, serializeByValueID(id));
+  request.pendingChunks++;
+  const id = request.nextChunkId++;
+  emitIOInfoChunk(request, id, ioNode.start, ioNode.end, stack);
+  const ref = serializeByValueID(id);
+  request.writtenObjects.set(ioNode, ref);
+  return ref;
 }
 
 function emitTypedArrayChunk(