[Flight] Transfer Debug Info in Server-to-Server Flight Requests (fac…

…ebook#28275) A Flight Server can be a consumer of a stream from another Server. In this case the meta data is attached to debugInfo properties on lazy, Promises, Arrays or Elements that might in turn get forwarded to the next stream. In this case we want to forward this debug information to the client in the stream. I also added a DEV only `environmentName` option to the Flight Server. This lets you name the server that is producing the debug info so that you can trace the origin of where that component is executing. This defaults to `"server"`. DevTools could use this for badges or different colors.
EdisonVan · Apr 15, 2024 · d24d649 · d24d649
1 parent 3fe8278
commit d24d649
Show file tree

Hide file tree

Showing 15 changed files with 186 additions and 13 deletions.
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
@@ -77,7 +77,7 @@ const INITIALIZED = 'fulfilled';
 const ERRORED = 'rejected';
 
 // Dev-only
-type ReactDebugInfo = Array<{+name?: string}>;
+type ReactDebugInfo = Array<{+name?: string, +env?: string}>;
 
 type PendingChunk<T> = {
   status: 'pending',

diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -187,7 +187,7 @@ describe('ReactFlight', () => {
       const rootModel = await ReactNoopFlightClient.read(transport);
       const greeting = rootModel.greeting;
       expect(greeting._debugInfo).toEqual(
-        __DEV__ ? [{name: 'Greeting'}] : undefined,
+        __DEV__ ? [{name: 'Greeting', env: 'server'}] : undefined,
       );
       ReactNoop.render(greeting);
     });
@@ -214,7 +214,7 @@ describe('ReactFlight', () => {
     await act(async () => {
       const promise = ReactNoopFlightClient.read(transport);
       expect(promise._debugInfo).toEqual(
-        __DEV__ ? [{name: 'Greeting'}] : undefined,
+        __DEV__ ? [{name: 'Greeting', env: 'server'}] : undefined,
       );
       ReactNoop.render(await promise);
     });
@@ -1806,4 +1806,68 @@ describe('ReactFlight', () => {
 
     expect(ReactNoop).toMatchRenderedOutput(<div>Ba</div>);
   });
+
+  it('preserves debug info for server-to-server pass through', async () => {
+    function ThirdPartyLazyComponent() {
+      return <span>!</span>;
+    }
+
+    const lazy = React.lazy(async () => ({
+      default: <ThirdPartyLazyComponent />,
+    }));
+
+    function ThirdPartyComponent() {
+      return <span>stranger</span>;
+    }
+
+    function ServerComponent({transport}) {
+      // This is a Server Component that receives other Server Components from a third party.
+      const children = ReactNoopFlightClient.read(transport);
+      return <div>Hello, {children}</div>;
+    }
+
+    const promiseComponent = Promise.resolve(<ThirdPartyComponent />);
+
+    const thirdPartyTransport = ReactNoopFlightServer.render(
+      [promiseComponent, lazy],
+      {
+        environmentName: 'third-party',
+      },
+    );
+
+    // Wait for the lazy component to initialize
+    await 0;
+
+    const transport = ReactNoopFlightServer.render(
+      <ServerComponent transport={thirdPartyTransport} />,
+    );
+
+    await act(async () => {
+      const promise = ReactNoopFlightClient.read(transport);
+      expect(promise._debugInfo).toEqual(
+        __DEV__ ? [{name: 'ServerComponent', env: 'server'}] : 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(thirdPartyChildren[0]._debugInfo).toEqual(
+        __DEV__
+          ? [{name: 'ThirdPartyComponent', env: 'third-party'}]
+          : undefined,
+      );
+      expect(thirdPartyChildren[1]._debugInfo).toEqual(
+        __DEV__
+          ? [{name: 'ThirdPartyLazyComponent', env: 'third-party'}]
+          : undefined,
+      );
+      ReactNoop.render(result);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <div>
+        Hello, <span>stranger</span>
+        <span>!</span>
+      </div>,
+    );
+  });
 });
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -68,8 +68,10 @@ const ReactNoopFlightServer = ReactFlightServer({
 });
 
 type Options = {
-  onError?: (error: mixed) => void,
+  environmentName?: string,
   identifierPrefix?: string,
+  onError?: (error: mixed) => void,
+  onPostpone?: (reason: string) => void,
 };
 
 function render(model: ReactClientValue, options?: Options): Destination {
@@ -80,6 +82,8 @@ function render(model: ReactClientValue, options?: Options): Destination {
     bundlerConfig,
     options ? options.onError : undefined,
     options ? options.identifierPrefix : undefined,
+    options ? options.onPostpone : undefined,
+    options ? options.environmentName : undefined,
   );
   ReactNoopFlightServer.startWork(request);
   ReactNoopFlightServer.startFlowing(request, destination);

diff --git a/packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js
@@ -52,6 +52,7 @@ function createDrainHandler(destination: Destination, request: Request) {
 }
 
 type Options = {
+  environmentName?: string,
   onError?: (error: mixed) => void,
   onPostpone?: (reason: string) => void,
   identifierPrefix?: string,
@@ -73,6 +74,7 @@ function renderToPipeableStream(
     options ? options.onError : undefined,
     options ? options.identifierPrefix : undefined,
     options ? options.onPostpone : undefined,
+    options ? options.environmentName : undefined,
   );
   let hasStartedFlowing = false;
   startWork(request);

diff --git a/packages/react-server-dom-fb/src/ReactFlightDOMServerFB.js b/packages/react-server-dom-fb/src/ReactFlightDOMServerFB.js
@@ -50,6 +50,8 @@ function renderToDestination(
     model,
     null,
     options ? options.onError : undefined,
+    undefined,
+    undefined,
   );
   startWork(request);
   startFlowing(request, destination);

diff --git a/packages/react-server-dom-turbopack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-turbopack/src/ReactFlightDOMServerBrowser.js
@@ -34,6 +34,7 @@ export {
 } from './ReactFlightTurbopackReferences';
 
 type Options = {
+  environmentName?: string,
   identifierPrefix?: string,
   signal?: AbortSignal,
   onError?: (error: mixed) => void,
@@ -51,6 +52,7 @@ function renderToReadableStream(
     options ? options.onError : undefined,
     options ? options.identifierPrefix : undefined,
     options ? options.onPostpone : undefined,
+    options ? options.environmentName : undefined,
   );
   if (options && options.signal) {
     const signal = options.signal;

diff --git a/packages/react-server-dom-turbopack/src/ReactFlightDOMServerEdge.js b/packages/react-server-dom-turbopack/src/ReactFlightDOMServerEdge.js
@@ -34,6 +34,7 @@ export {
 } from './ReactFlightTurbopackReferences';
 
 type Options = {
+  environmentName?: string,
   identifierPrefix?: string,
   signal?: AbortSignal,
   onError?: (error: mixed) => void,
@@ -51,6 +52,7 @@ function renderToReadableStream(
     options ? options.onError : undefined,
     options ? options.identifierPrefix : undefined,
     options ? options.onPostpone : undefined,
+    options ? options.environmentName : undefined,
   );
   if (options && options.signal) {
     const signal = options.signal;

diff --git a/packages/react-server-dom-turbopack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-turbopack/src/ReactFlightDOMServerNode.js
@@ -49,6 +49,7 @@ function createDrainHandler(destination: Destination, request: Request) {
 }
 
 type Options = {
+  environmentName?: string,
   onError?: (error: mixed) => void,
   onPostpone?: (reason: string) => void,
   identifierPrefix?: string,
@@ -70,6 +71,7 @@ function renderToPipeableStream(
     options ? options.onError : undefined,
     options ? options.identifierPrefix : undefined,
     options ? options.onPostpone : undefined,
+    options ? options.environmentName : undefined,
   );
   let hasStartedFlowing = false;
   startWork(request);

diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -38,6 +38,7 @@ export {
 } from './ReactFlightWebpackReferences';
 
 type Options = {
+  environmentName?: string,
   identifierPrefix?: string,
   signal?: AbortSignal,
   onError?: (error: mixed) => void,
@@ -55,6 +56,7 @@ function renderToReadableStream(
     options ? options.onError : undefined,
     options ? options.identifierPrefix : undefined,
     options ? options.onPostpone : undefined,
+    options ? options.environmentName : undefined,
   );
   if (options && options.signal) {
     const signal = options.signal;

diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js
@@ -38,6 +38,7 @@ export {
 } from './ReactFlightWebpackReferences';
 
 type Options = {
+  environmentName?: string,
   identifierPrefix?: string,
   signal?: AbortSignal,
   onError?: (error: mixed) => void,
@@ -55,6 +56,7 @@ function renderToReadableStream(
     options ? options.onError : undefined,
     options ? options.identifierPrefix : undefined,
     options ? options.onPostpone : undefined,
+    options ? options.environmentName : undefined,
   );
   if (options && options.signal) {
     const signal = options.signal;

diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -61,6 +61,7 @@ function createCancelHandler(request: Request, reason: string) {
 }
 
 type Options = {
+  environmentName?: string,
   onError?: (error: mixed) => void,
   onPostpone?: (reason: string) => void,
   identifierPrefix?: string,
@@ -82,6 +83,7 @@ function renderToPipeableStream(
     options ? options.onError : undefined,
     options ? options.identifierPrefix : undefined,
     options ? options.onPostpone : undefined,
+    options ? options.environmentName : undefined,
   );
   let hasStartedFlowing = false;
   startWork(request);

diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
@@ -286,7 +286,7 @@ describe('ReactFlightDOMEdge', () => {
       <ServerComponent recurse={20} />,
     );
     const serializedContent = await readResult(stream);
-    const expectedDebugInfoSize = __DEV__ ? 30 * 20 : 0;
+    const expectedDebugInfoSize = __DEV__ ? 42 * 20 : 0;
     expect(serializedContent.length).toBeLessThan(150 + expectedDebugInfoSize);
   });