Skip to content

Commit b5c0e57

Browse files
sebmarkbagesebmarkbage
committed
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.
1 parent 46fc2aa commit b5c0e57

File tree

15 files changed

+53
-17
lines changed

15 files changed

+53
-17
lines changed

‎packages/react-client/src/ReactFlightClient.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const INITIALIZED = 'fulfilled';
7777
const ERRORED = 'rejected';
7878

7979
// Dev-only
80-
type ReactDebugInfo = Array<{+name?: string}>;
80+
type ReactDebugInfo = Array<{+name?: string, +env?: string}>;
8181

8282
type PendingChunk<T> = {
8383
status: 'pending',

‎packages/react-client/src/__tests__/ReactFlight-test.js

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ describe('ReactFlight', () => {
187187
const rootModel = await ReactNoopFlightClient.read(transport);
188188
const greeting = rootModel.greeting;
189189
expect(greeting._debugInfo).toEqual(
190-
__DEV__ ? [{name: 'Greeting'}] : undefined,
190+
__DEV__ ? [{name: 'Greeting', env: 'server'}] : undefined,
191191
);
192192
ReactNoop.render(greeting);
193193
});
@@ -214,7 +214,7 @@ describe('ReactFlight', () => {
214214
await act(async () => {
215215
const promise = ReactNoopFlightClient.read(transport);
216216
expect(promise._debugInfo).toEqual(
217-
__DEV__ ? [{name: 'Greeting'}] : undefined,
217+
__DEV__ ? [{name: 'Greeting', env: 'server'}] : undefined,
218218
);
219219
ReactNoop.render(await promise);
220220
});
@@ -1826,9 +1826,11 @@ describe('ReactFlight', () => {
18261826
return <div>Hello, {children}</div>;
18271827
}
18281828

1829-
const promise = Promise.resolve(<ThirdPartyComponent />);
1829+
const promiseComponent = Promise.resolve(<ThirdPartyComponent />);
18301830

1831-
const thirdPartyTransport = ReactNoopFlightServer.render([promise, lazy]);
1831+
const thirdPartyTransport = ReactNoopFlightServer.render([promiseComponent, lazy], {
1832+
environmentName: 'third-party',
1833+
});
18321834

18331835
// Wait for the lazy component to initialize
18341836
await 0;
@@ -1840,16 +1842,20 @@ describe('ReactFlight', () => {
18401842
await act(async () => {
18411843
const promise = ReactNoopFlightClient.read(transport);
18421844
expect(promise._debugInfo).toEqual(
1843-
__DEV__ ? [{name: 'ServerComponent'}] : undefined,
1845+
__DEV__ ? [{name: 'ServerComponent', env: 'server'}] : undefined,
18441846
);
18451847
const result = await promise;
18461848
const thirdPartyChildren = await result.props.children[1];
18471849
// We expect the debug info to be transferred from the inner stream to the outer.
18481850
expect(thirdPartyChildren[0]._debugInfo).toEqual(
1849-
__DEV__ ? [{name: 'ThirdPartyComponent'}] : undefined,
1851+
__DEV__
1852+
? [{name: 'ThirdPartyComponent', env: 'third-party'}]
1853+
: undefined,
18501854
);
18511855
expect(thirdPartyChildren[1]._debugInfo).toEqual(
1852-
__DEV__ ? [{name: 'ThirdPartyLazyComponent'}] : undefined,
1856+
__DEV__
1857+
? [{name: 'ThirdPartyLazyComponent', env: 'third-party'}]
1858+
: undefined,
18531859
);
18541860
ReactNoop.render(result);
18551861
});

‎packages/react-noop-renderer/src/ReactNoopFlightServer.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,10 @@ const ReactNoopFlightServer = ReactFlightServer({
6868
});
6969

7070
type Options = {
71-
onError?: (error: mixed) => void,
71+
environmentName?: string,
7272
identifierPrefix?: string,
73+
onError?: (error: mixed) => void,
74+
onPostpone?: (reason: string) => void,
7375
};
7476

7577
function render(model: ReactClientValue, options?: Options): Destination {
@@ -80,6 +82,8 @@ function render(model: ReactClientValue, options?: Options): Destination {
8082
bundlerConfig,
8183
options ? options.onError : undefined,
8284
options ? options.identifierPrefix : undefined,
85+
options ? options.onPostpone : undefined,
86+
options ? options.environmentName : undefined,
8387
);
8488
ReactNoopFlightServer.startWork(request);
8589
ReactNoopFlightServer.startFlowing(request, destination);

‎packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ function createDrainHandler(destination: Destination, request: Request) {
5252
}
5353

5454
type Options = {
55+
environmentName?: string,
5556
onError?: (error: mixed) => void,
5657
onPostpone?: (reason: string) => void,
5758
identifierPrefix?: string,
@@ -73,6 +74,7 @@ function renderToPipeableStream(
7374
options ? options.onError : undefined,
7475
options ? options.identifierPrefix : undefined,
7576
options ? options.onPostpone : undefined,
77+
options ? options.environmentName : undefined,
7678
);
7779
let hasStartedFlowing = false;
7880
startWork(request);

‎packages/react-server-dom-fb/src/ReactFlightDOMServerFB.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ function renderToDestination(
5050
model,
5151
null,
5252
options ? options.onError : undefined,
53+
undefined,
54+
undefined,
5355
);
5456
startWork(request);
5557
startFlowing(request, destination);

‎packages/react-server-dom-turbopack/src/ReactFlightDOMServerBrowser.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export {
3434
} from './ReactFlightTurbopackReferences';
3535

3636
type Options = {
37+
environmentName?: string,
3738
identifierPrefix?: string,
3839
signal?: AbortSignal,
3940
onError?: (error: mixed) => void,
@@ -51,6 +52,7 @@ function renderToReadableStream(
5152
options ? options.onError : undefined,
5253
options ? options.identifierPrefix : undefined,
5354
options ? options.onPostpone : undefined,
55+
options ? options.environmentName : undefined,
5456
);
5557
if (options && options.signal) {
5658
const signal = options.signal;

‎packages/react-server-dom-turbopack/src/ReactFlightDOMServerEdge.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export {
3434
} from './ReactFlightTurbopackReferences';
3535

3636
type Options = {
37+
environmentName?: string,
3738
identifierPrefix?: string,
3839
signal?: AbortSignal,
3940
onError?: (error: mixed) => void,
@@ -51,6 +52,7 @@ function renderToReadableStream(
5152
options ? options.onError : undefined,
5253
options ? options.identifierPrefix : undefined,
5354
options ? options.onPostpone : undefined,
55+
options ? options.environmentName : undefined,
5456
);
5557
if (options && options.signal) {
5658
const signal = options.signal;

‎packages/react-server-dom-turbopack/src/ReactFlightDOMServerNode.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ function createDrainHandler(destination: Destination, request: Request) {
4949
}
5050

5151
type Options = {
52+
environmentName?: string,
5253
onError?: (error: mixed) => void,
5354
onPostpone?: (reason: string) => void,
5455
identifierPrefix?: string,
@@ -70,6 +71,7 @@ function renderToPipeableStream(
7071
options ? options.onError : undefined,
7172
options ? options.identifierPrefix : undefined,
7273
options ? options.onPostpone : undefined,
74+
options ? options.environmentName : undefined,
7375
);
7476
let hasStartedFlowing = false;
7577
startWork(request);

‎packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export {
3838
} from './ReactFlightWebpackReferences';
3939

4040
type Options = {
41+
environmentName?: string,
4142
identifierPrefix?: string,
4243
signal?: AbortSignal,
4344
onError?: (error: mixed) => void,
@@ -55,6 +56,7 @@ function renderToReadableStream(
5556
options ? options.onError : undefined,
5657
options ? options.identifierPrefix : undefined,
5758
options ? options.onPostpone : undefined,
59+
options ? options.environmentName : undefined,
5860
);
5961
if (options && options.signal) {
6062
const signal = options.signal;

‎packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export {
3838
} from './ReactFlightWebpackReferences';
3939

4040
type Options = {
41+
environmentName?: string,
4142
identifierPrefix?: string,
4243
signal?: AbortSignal,
4344
onError?: (error: mixed) => void,
@@ -55,6 +56,7 @@ function renderToReadableStream(
5556
options ? options.onError : undefined,
5657
options ? options.identifierPrefix : undefined,
5758
options ? options.onPostpone : undefined,
59+
options ? options.environmentName : undefined,
5860
);
5961
if (options && options.signal) {
6062
const signal = options.signal;

‎packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ function createCancelHandler(request: Request, reason: string) {
6161
}
6262

6363
type Options = {
64+
environmentName?: string,
6465
onError?: (error: mixed) => void,
6566
onPostpone?: (reason: string) => void,
6667
identifierPrefix?: string,
@@ -82,6 +83,7 @@ function renderToPipeableStream(
8283
options ? options.onError : undefined,
8384
options ? options.identifierPrefix : undefined,
8485
options ? options.onPostpone : undefined,
86+
options ? options.environmentName : undefined,
8587
);
8688
let hasStartedFlowing = false;
8789
startWork(request);

‎packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,7 @@ describe('ReactFlightDOMEdge', () => {
286286
<ServerComponent recurse={20} />,
287287
);
288288
const serializedContent = await readResult(stream);
289-
const expectedDebugInfoSize = __DEV__ ? 30 * 20 : 0;
289+
const expectedDebugInfoSize = __DEV__ ? 42 * 20 : 0;
290290
expect(serializedContent.length).toBeLessThan(150 + expectedDebugInfoSize);
291291
});
292292

‎packages/react-server/src/ReactFlightServer.js

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ import {SuspenseException, getSuspendedThenable} from './ReactFlightThenable';
108108
initAsyncDebugInfo();
109109

110110
// Dev-only
111-
type ReactDebugInfo = Array<{+name?: string}>;
111+
type ReactDebugInfo = Array<{+name?: string, +env?: string}>;
112112

113113
const ObjectPrototype = Object.prototype;
114114

@@ -202,6 +202,8 @@ export type Request = {
202202
taintCleanupQueue: Array<string | bigint>,
203203
onError: (error: mixed) => ?string,
204204
onPostpone: (reason: string) => void,
205+
// DEV-only
206+
environmentName: string,
205207
};
206208

207209
const {
@@ -254,6 +256,7 @@ export function createRequest(
254256
onError: void | ((error: mixed) => ?string),
255257
identifierPrefix?: string,
256258
onPostpone: void | ((reason: string) => void),
259+
environmentName: void | string,
257260
): Request {
258261
if (
259262
ReactCurrentCache.current !== null &&
@@ -273,7 +276,7 @@ export function createRequest(
273276
TaintRegistryPendingRequests.add(cleanupQueue);
274277
}
275278
const hints = createHints();
276-
const request: Request = {
279+
const request: Request = ({
277280
status: OPEN,
278281
flushScheduled: false,
279282
fatalError: null,
@@ -298,7 +301,11 @@ export function createRequest(
298301
taintCleanupQueue: cleanupQueue,
299302
onError: onError === undefined ? defaultErrorHandler : onError,
300303
onPostpone: onPostpone === undefined ? defaultPostponeHandler : onPostpone,
301-
};
304+
}: any);
305+
if (__DEV__) {
306+
request.environmentName =
307+
environmentName === undefined ? 'server' : environmentName;
308+
}
302309
const rootTask = createTask(request, model, null, false, abortSet);
303310
pingedTasks.push(rootTask);
304311
return request;
@@ -519,7 +526,10 @@ function renderFunctionComponent<Props>(
519526
const componentName =
520527
(Component: any).displayName || Component.name || '';
521528
request.pendingChunks++;
522-
emitDebugChunk(request, debugID, {name: componentName});
529+
emitDebugChunk(request, debugID, {
530+
name: componentName,
531+
env: request.environmentName,
532+
});
523533
}
524534
}
525535

@@ -1717,7 +1727,7 @@ function emitModelChunk(request: Request, id: number, json: string): void {
17171727
function emitDebugChunk(
17181728
request: Request,
17191729
id: number,
1720-
debugInfo: {+name?: string},
1730+
debugInfo: {+name?: string, +env?: string},
17211731
): void {
17221732
if (!__DEV__) {
17231733
// 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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export type LazyComponent<T, P> = {
4646
$$typeof: symbol | number,
4747
_payload: P,
4848
_init: (payload: P) => T,
49-
_debugInfo?: null | Array<{+name?: string}>,
49+
_debugInfo?: null | Array<{+name?: string, +env?: string}>,
5050
};
5151

5252
function lazyInitializer<T>(payload: Payload<T>): T {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ describe('ReactFetch', () => {
8585
const promise = render(Component);
8686
expect(await promise).toMatchInlineSnapshot(`"GET world []"`);
8787
expect(promise._debugInfo).toEqual(
88-
__DEV__ ? [{name: 'Component'}] : undefined,
88+
__DEV__ ? [{name: 'Component', env: 'server'}] : undefined,
8989
);
9090
expect(fetchCount).toBe(1);
9191
});

0 commit comments

Comments
 (0)