Skip to content

[Flight] Do not redefine debugInfo on JSX elements #34984

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
devongovett wants to merge 5 commits into
base: main
Choose a base branch
from
+86 −53
Open

[Flight] Do not redefine debugInfo on JSX elements #34984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4262127
[Flight] Do not redefine debugInfo on JSX elements
devongovett Oct 26, 2025
c776f1c
Fix test in non-dev builds
devongovett Oct 26, 2025
25c9938
Merge branch 'main' of github.com:facebook/react into flight-debug-jsx
devongovett Dec 22, 2025
14f4e09
Alternative: initialize _debugInfo on JSX elements to empty array
devongovett Dec 22, 2025
0509165
update snapshots
devongovett Dec 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 47 additions & 13 deletions packages/react-client/src/__tests__/ReactFlight-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2812,7 +2812,7 @@ describe('ReactFlight', () => {
transport: expect.arrayContaining([]),
},
},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 53 : 21},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 55 : 21},
]
: undefined,
);
Expand All @@ -2822,46 +2822,46 @@ describe('ReactFlight', () => {
expect(getDebugInfo(await thirdPartyChildren[0])).toEqual(
__DEV__
? [
{time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22}, // Clamped to the start
{time: gate(flags => flags.enableAsyncDebugInfo) ? 56 : 22}, // Clamped to the start
{
name: 'ThirdPartyComponent',
env: 'third-party',
key: null,
stack: ' in Object.<anonymous> (at **)',
props: {},
},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 55 : 23}, // This last one is when the promise resolved into the first party.
{time: gate(flags => flags.enableAsyncDebugInfo) ? 56 : 22},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 57 : 23}, // This last one is when the promise resolved into the first party.
]
: undefined,
);
expect(getDebugInfo(thirdPartyChildren[1])).toEqual(
__DEV__
? [
{time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22}, // Clamped to the start
{time: gate(flags => flags.enableAsyncDebugInfo) ? 56 : 22}, // Clamped to the start
{
name: 'ThirdPartyLazyComponent',
env: 'third-party',
key: null,
stack: ' in myLazy (at **)\n in lazyInitializer (at **)',
props: {},
},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 56 : 22},
]
: undefined,
);
expect(getDebugInfo(thirdPartyChildren[2])).toEqual(
__DEV__
? [
{time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 56 : 22},
{
name: 'ThirdPartyFragmentComponent',
env: 'third-party',
key: '3',
stack: ' in Object.<anonymous> (at **)',
props: {},
},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 54 : 22},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 56 : 22},
]
: undefined,
);
Expand Down Expand Up @@ -2936,15 +2936,15 @@ describe('ReactFlight', () => {
transport: expect.arrayContaining([]),
},
},
{time: 31},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 33 : 17},
]
: undefined,
);
const thirdPartyFragment = await result.props.children;
expect(getDebugInfo(thirdPartyFragment)).toEqual(
__DEV__
? [
{time: 32},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 34 : 18},
{
name: 'Keyed',
env: 'Server',
Expand All @@ -2954,23 +2954,23 @@ describe('ReactFlight', () => {
children: {},
},
},
{time: 33},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 35 : 19},
]
: undefined,
);
// We expect the debug info to be transferred from the inner stream to the outer.
expect(getDebugInfo(thirdPartyFragment.props.children)).toEqual(
__DEV__
? [
{time: 33}, // Clamp to the start
{time: gate(flags => flags.enableAsyncDebugInfo) ? 35 : 19}, // Clamp to the start
{
name: 'ThirdPartyAsyncIterableComponent',
env: 'third-party',
key: null,
stack: ' in Object.<anonymous> (at **)',
props: {},
},
{time: 33},
{time: gate(flags => flags.enableAsyncDebugInfo) ? 35 : 19},
]
: undefined,
);
Expand Down Expand Up @@ -3901,6 +3901,40 @@ describe('ReactFlight', () => {
);
});

it('does not crash when exporting a JSX element as a client reference', async () => {
const ClientReference = clientReference(React.createElement('div'));

function App() {
return ClientReference;
}

const transport = ReactNoopFlightServer.render({
root: ReactServer.createElement(App),
});

await act(async () => {
const {root} = await ReactNoopFlightClient.read(transport);
ReactNoop.render(root);
if (__DEV__) {
expect(getDebugInfo(root)).toEqual([
{
time: 12,
},
{
env: 'Server',
key: null,
name: 'App',
props: {},
stack: ' in Object.<anonymous> (at **)',
},
{
time: 13,
},
]);
}
});
});

// @gate enableOptimisticKey
it('collapses optimistic keys to an optimistic key', async () => {
function Bar({text}) {
Expand Down
2 changes: 1 addition & 1 deletion packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2905,7 +2905,7 @@ describe('ReactFlightDOMBrowser', () => {
"Object.<anonymous>",
"/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js",
2826,
19,
17,
2810,
89,
],
Expand Down
5 changes: 2 additions & 3 deletions packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -499,8 +499,7 @@ describe('ReactFlightDOMEdge', () => {
},
},
);
// TODO: Cyclic references currently cause a Lazy wrapper which is not ideal.
const resultElement = result.root._init(result.root._payload);
const resultElement = result.root;
// Should still match the result when parsed
expect(resultElement).toEqual(props.root);
expect(resultElement.props.children[5]).toBe(
Expand Down Expand Up @@ -702,7 +701,7 @@ describe('ReactFlightDOMEdge', () => {
const [stream2, drip] = dripStream(stream);

// Allow some of the content through.
drip(__DEV__ ? 7500 : 5000);
drip(__DEV__ ? 30000 : 5000);

const result = await ReactServerDOMClient.createFromReadableStream(
stream2,
Expand Down
Loading
Loading