Add environmentName option

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.

Author: sebmarkbage

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',

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);
     });
@@ -1826,9 +1826,14 @@ describe('ReactFlight', () => {
       return <div>Hello, {children}</div>;
     }
 
-    const promise = Promise.resolve(<ThirdPartyComponent />);
+    const promiseComponent = Promise.resolve(<ThirdPartyComponent />);
 
-    const thirdPartyTransport = ReactNoopFlightServer.render([promise, lazy]);
+    const thirdPartyTransport = ReactNoopFlightServer.render(
+      [promiseComponent, lazy],
+      {
+        environmentName: 'third-party',
+      },
+    );
 
     // Wait for the lazy component to initialize
     await 0;
@@ -1840,16 +1845,20 @@ describe('ReactFlight', () => {
     await act(async () => {
       const promise = ReactNoopFlightClient.read(transport);
       expect(promise._debugInfo).toEqual(
-        __DEV__ ? [{name: 'ServerComponent'}] : undefined,
+        __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'}] : undefined,
+        __DEV__
+          ? [{name: 'ThirdPartyComponent', env: 'third-party'}]
+          : undefined,
       );
       expect(thirdPartyChildren[1]._debugInfo).toEqual(
-        __DEV__ ? [{name: 'ThirdPartyLazyComponent'}] : undefined,
+        __DEV__
+          ? [{name: 'ThirdPartyLazyComponent', env: 'third-party'}]
+          : undefined,
       );
       ReactNoop.render(result);
     });

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);

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);

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);

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;

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;

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);

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;

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;

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);

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);
   });
 

packages/react-server/src/ReactFlightServer.js

@@ -108,7 +108,7 @@ import {SuspenseException, getSuspendedThenable} from './ReactFlightThenable';
 initAsyncDebugInfo();
 
 // Dev-only
-type ReactDebugInfo = Array<{+name?: string}>;
+type ReactDebugInfo = Array<{+name?: string, +env?: string}>;
 
 const ObjectPrototype = Object.prototype;
 
@@ -202,6 +202,8 @@ export type Request = {
   taintCleanupQueue: Array<string | bigint>,
   onError: (error: mixed) => ?string,
   onPostpone: (reason: string) => void,
+  // DEV-only
+  environmentName: string,
 };
 
 const {
@@ -254,6 +256,7 @@ export function createRequest(
   onError: void | ((error: mixed) => ?string),
   identifierPrefix?: string,
   onPostpone: void | ((reason: string) => void),
+  environmentName: void | string,
 ): Request {
   if (
     ReactCurrentCache.current !== null &&
@@ -273,7 +276,7 @@ export function createRequest(
     TaintRegistryPendingRequests.add(cleanupQueue);
   }
   const hints = createHints();
-  const request: Request = {
+  const request: Request = ({
     status: OPEN,
     flushScheduled: false,
     fatalError: null,
@@ -298,7 +301,11 @@ export function createRequest(
     taintCleanupQueue: cleanupQueue,
     onError: onError === undefined ? defaultErrorHandler : onError,
     onPostpone: onPostpone === undefined ? defaultPostponeHandler : onPostpone,
-  };
+  }: any);
+  if (__DEV__) {
+    request.environmentName =
+      environmentName === undefined ? 'server' : environmentName;
+  }
   const rootTask = createTask(request, model, null, false, abortSet);
   pingedTasks.push(rootTask);
   return request;
@@ -519,7 +526,10 @@ function renderFunctionComponent<Props>(
       const componentName =
         (Component: any).displayName || Component.name || '';
       request.pendingChunks++;
-      emitDebugChunk(request, debugID, {name: componentName});
+      emitDebugChunk(request, debugID, {
+        name: componentName,
+        env: request.environmentName,
+      });
     }
   }
 
@@ -1717,7 +1727,7 @@ function emitModelChunk(request: Request, id: number, json: string): void {
 function emitDebugChunk(
   request: Request,
   id: number,
-  debugInfo: {+name?: string},
+  debugInfo: {+name?: string, +env?: string},
 ): void {
   if (!__DEV__) {
     // These errors should never make it into a build so we don't need to encode them in codes.json

packages/react/src/ReactLazy.js

@@ -46,7 +46,7 @@ export type LazyComponent<T, P> = {
   $$typeof: symbol | number,
   _payload: P,
   _init: (payload: P) => T,
-  _debugInfo?: null | Array<{+name?: string}>,
+  _debugInfo?: null | Array<{+name?: string, +env?: string}>,
 };
 
 function lazyInitializer<T>(payload: Payload<T>): T {

packages/react/src/__tests__/ReactFetch-test.js

@@ -85,7 +85,7 @@ describe('ReactFetch', () => {
     const promise = render(Component);
     expect(await promise).toMatchInlineSnapshot(`"GET world []"`);
     expect(promise._debugInfo).toEqual(
-      __DEV__ ? [{name: 'Component'}] : undefined,
+      __DEV__ ? [{name: 'Component', env: 'server'}] : undefined,
     );
     expect(fetchCount).toBe(1);
   });