Outline stacks so they don't get cut off by the object limit

facebook · Oct 1, 2024 · 33aa9c5 · 33aa9c5
1 parent dbed231
commit 33aa9c5
Showing 1 changed file with 30 additions and 49 deletions.
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
@@ -3275,30 +3275,6 @@ function outlineComponentInfo(
   // 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 {
-    try {
-      return renderConsoleValue(
-        request,
-        counter,
-        this,
-        parentPropertyName,
-        value,
-      );
-    } catch (x) {
-      return (
-        'Unknown Value: React could not send it from the server.\n' + x.message
-      );
-    }
-  }
-
-  request.pendingChunks++;
-  const id = request.nextChunkId++;
 
   // We can't serialize the ConsoleTask/Error objects so we need to omit them before serializing.
   const componentDebugInfo: Omit<
@@ -3318,12 +3294,7 @@ function outlineComponentInfo(
   // $FlowFixMe[cannot-write]
   componentDebugInfo.props = componentInfo.props;
 
-  // $FlowFixMe[incompatible-type] stringify can return null
-  const json: string = stringify(componentDebugInfo, replacer);
-  const row = id.toString(16) + ':' + json + '\n';
-  const processedChunk = stringToChunk(row);
-  request.completedRegularChunks.push(processedChunk);
-
+  const id = outlineConsoleValue(request, counter, componentDebugInfo);
   request.writtenObjects.set(componentInfo, serializeByValueID(id));
 }
 
@@ -3451,26 +3422,36 @@ function renderConsoleValue(
         if (element._owner != null) {
           outlineComponentInfo(request, element._owner);
         }
+        if (enableOwnerStacks) {
+          let debugStack: null | ReactStackTrace = null;
+          if (element._debugStack != null) {
+            // Outline the debug stack so that it doesn't get cut off.
+            debugStack = filterStackTrace(request, element._debugStack, 1);
+            const stackId = outlineConsoleValue(
+              request,
+              {objectLimit: debugStack.length + 2},
+              debugStack,
+            );
+            request.writtenObjects.set(debugStack, serializeByValueID(stackId));
+          }
+          return [
+            REACT_ELEMENT_TYPE,
+            element.type,
+            element.key,
+            element.props,
+            element._owner,
+            debugStack,
+            element._store.validated,
+          ];
+        }
 
-        return enableOwnerStacks
-          ? [
-              REACT_ELEMENT_TYPE,
-              element.type,
-              element.key,
-              element.props,
-              element._owner,
-              element._debugStack == null
-                ? null
-                : filterStackTrace(request, element._debugStack, 1),
-              element._store.validated,
-            ]
-          : [
-              REACT_ELEMENT_TYPE,
-              element.type,
-              element.key,
-              element.props,
-              element._owner,
-            ];
+        return [
+          REACT_ELEMENT_TYPE,
+          element.type,
+          element.key,
+          element.props,
+          element._owner,
+        ];
       }
     }