@samitouri / QOS-React / commits / 0bc71e67ab

[Flight] Add `debugChannel` option to Edge and Node clients (#34236)

When a debug channel is used between the Flight server and a browser Flight client, we want to allow the same RSC stream to be used for server-side rendering. To support this, the Edge and Node Flight clients also need to accept a `debugChannel` option. Without it, debug information would be missing (e.g. for SSR error stacks), and in some cases this could result in `Connection closed` errors. This PR adds support for the `debugChannel` option in the Edge and Node clients for ESM, Parcel, Turbopack, and Webpack. Unlike the browser clients, these clients only support a one-way channel, since the Flight server’s return protocol is not designed for multiple clients. The implementation follows the approach used in the browser clients, but excludes the writable parts.

Hendrik Liebau committed Aug 20, 2025 at 16:46 UTC 0bc71e67ab3d43c8c7eece258d4fdd085ee2244d
11 files changed +635 -66
packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js
+38 -12
@@ -56,8 +56,38 @@ export type Options = {
56 findSourceMapURL?: FindSourceMapURLCallback,
57 replayConsoleLogs?: boolean,
58 environmentName?: string,
59 + // For the Node.js client we only support a single-direction debug channel.
60 + debugChannel?: Readable,
61 };
62
63 +function startReadingFromStream(
64 + response: Response,
65 + stream: Readable,
66 + isSecondaryStream: boolean,
67 +): void {
68 + const streamState = createStreamState();
69 +
70 + stream.on('data', chunk => {
71 + if (typeof chunk === 'string') {
72 + processStringChunk(response, streamState, chunk);
73 + } else {
74 + processBinaryChunk(response, streamState, chunk);
75 + }
76 + });
77 +
78 + stream.on('error', error => {
79 + reportGlobalError(response, error);
80 + });
81 +
82 + stream.on('end', () => {
83 + // If we're the secondary stream, then we don't close the response until the
84 + // debug channel closes.
85 + if (!isSecondaryStream) {
86 + close(response);
87 + }
88 + });
89 +}
90 +
91 function createFromNodeStream<T>(
92 stream: Readable,
93 moduleRootPath: string,
@@ -80,18 +110,14 @@ function createFromNodeStream<T>(
110 ? options.environmentName
111 : undefined,
112 );
83 - const streamState = createStreamState();
84 - stream.on('data', chunk => {
85 - if (typeof chunk === 'string') {
86 - processStringChunk(response, streamState, chunk);
87 - } else {
88 - processBinaryChunk(response, streamState, chunk);
89 - }
90 - });
91 - stream.on('error', error => {
92 - reportGlobalError(response, error);
93 - });
94 - stream.on('end', () => close(response));
113 +
114 + if (__DEV__ && options && options.debugChannel) {
115 + startReadingFromStream(response, options.debugChannel, false);
116 + startReadingFromStream(response, stream, true);
117 + } else {
118 + startReadingFromStream(response, stream, false);
119 + }
120 +
121 return getRoot(response);
122 }
123
packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js
+32 -3
@@ -76,6 +76,8 @@ export type Options = {
76 temporaryReferences?: TemporaryReferenceSet,
77 replayConsoleLogs?: boolean,
78 environmentName?: string,
79 + // For the Edge client we only support a single-direction debug channel.
80 + debugChannel?: {readable?: ReadableStream, ...},
81 };
82
83 function createResponseFromOptions(options?: Options) {
@@ -100,6 +102,7 @@ function createResponseFromOptions(options?: Options) {
102 function startReadingFromStream(
103 response: FlightResponse,
104 stream: ReadableStream,
105 + isSecondaryStream: boolean,
106 ): void {
107 const streamState = createStreamState();
108 const reader = stream.getReader();
@@ -112,7 +115,11 @@ function startReadingFromStream(
115 ...
116 }): void | Promise<void> {
117 if (done) {
115 - close(response);
118 + // If we're the secondary stream, then we don't close the response until
119 + // the debug channel closes.
120 + if (!isSecondaryStream) {
121 + close(response);
122 + }
123 return;
124 }
125 const buffer: Uint8Array = (value: any);
@@ -130,7 +137,19 @@ export function createFromReadableStream<T>(
137 options?: Options,
138 ): Thenable<T> {
139 const response: FlightResponse = createResponseFromOptions(options);
133 - startReadingFromStream(response, stream);
140 +
141 + if (
142 + __DEV__ &&
143 + options &&
144 + options.debugChannel &&
145 + options.debugChannel.readable
146 + ) {
147 + startReadingFromStream(response, options.debugChannel.readable, false);
148 + startReadingFromStream(response, stream, true);
149 + } else {
150 + startReadingFromStream(response, stream, false);
151 + }
152 +
153 return getRoot(response);
154 }
155
@@ -141,7 +160,17 @@ export function createFromFetch<T>(
160 const response: FlightResponse = createResponseFromOptions(options);
161 promiseForResponse.then(
162 function (r) {
144 - startReadingFromStream(response, (r.body: any));
163 + if (
164 + __DEV__ &&
165 + options &&
166 + options.debugChannel &&
167 + options.debugChannel.readable
168 + ) {
169 + startReadingFromStream(response, options.debugChannel.readable, false);
170 + startReadingFromStream(response, (r.body: any), true);
171 + } else {
172 + startReadingFromStream(response, (r.body: any), false);
173 + }
174 },
175 function (e) {
176 reportGlobalError(response, e);
packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js
+38 -12
@@ -52,8 +52,38 @@ export type Options = {
52 encodeFormAction?: EncodeFormActionCallback,
53 replayConsoleLogs?: boolean,
54 environmentName?: string,
55 + // For the Node.js client we only support a single-direction debug channel.
56 + debugChannel?: Readable,
57 };
58
59 +function startReadingFromStream(
60 + response: Response,
61 + stream: Readable,
62 + isSecondaryStream: boolean,
63 +): void {
64 + const streamState = createStreamState();
65 +
66 + stream.on('data', chunk => {
67 + if (typeof chunk === 'string') {
68 + processStringChunk(response, streamState, chunk);
69 + } else {
70 + processBinaryChunk(response, streamState, chunk);
71 + }
72 + });
73 +
74 + stream.on('error', error => {
75 + reportGlobalError(response, error);
76 + });
77 +
78 + stream.on('end', () => {
79 + // If we're the secondary stream, then we don't close the response until the
80 + // debug channel closes.
81 + if (!isSecondaryStream) {
82 + close(response);
83 + }
84 + });
85 +}
86 +
87 export function createFromNodeStream<T>(
88 stream: Readable,
89 options?: Options,
@@ -72,17 +102,13 @@ export function createFromNodeStream<T>(
102 ? options.environmentName
103 : undefined,
104 );
75 - const streamState = createStreamState();
76 - stream.on('data', chunk => {
77 - if (typeof chunk === 'string') {
78 - processStringChunk(response, streamState, chunk);
79 - } else {
80 - processBinaryChunk(response, streamState, chunk);
81 - }
82 - });
83 - stream.on('error', error => {
84 - reportGlobalError(response, error);
85 - });
86 - stream.on('end', () => close(response));
105 +
106 + if (__DEV__ && options && options.debugChannel) {
107 + startReadingFromStream(response, options.debugChannel, false);
108 + startReadingFromStream(response, stream, true);
109 + } else {
110 + startReadingFromStream(response, stream, false);
111 + }
112 +
113 return getRoot(response);
114 }
packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMEdge-test.js
+108 -9
@@ -12,26 +12,28 @@
12 // Polyfills for test environment
13 global.ReadableStream =
14 require('web-streams-polyfill/ponyfill/es6').ReadableStream;
15 +global.WritableStream =
16 + require('web-streams-polyfill/ponyfill/es6').WritableStream;
17 global.TextEncoder = require('util').TextEncoder;
18 global.TextDecoder = require('util').TextDecoder;
19
18 -// Don't wait before processing work on the server.
19 -// TODO: we can replace this with FlightServer.act().
20 -global.setTimeout = cb => cb();
21 -
20 let clientExports;
21 let turbopackMap;
22 let turbopackModules;
23 let React;
24 +let ReactServer;
25 let ReactDOMServer;
26 let ReactServerDOMServer;
27 let ReactServerDOMClient;
28 let use;
29 +let serverAct;
30
31 describe('ReactFlightTurbopackDOMEdge', () => {
32 beforeEach(() => {
33 jest.resetModules();
34
35 + serverAct = require('internal-test-utils').serverAct;
36 +
37 // Simulate the condition resolution
38 jest.mock('react', () => require('react/react.react-server'));
39 jest.mock('react-server-dom-turbopack/server', () =>
@@ -43,6 +45,7 @@ describe('ReactFlightTurbopackDOMEdge', () => {
45 turbopackMap = TurbopackMock.turbopackMap;
46 turbopackModules = TurbopackMock.turbopackModules;
47
48 + ReactServer = require('react');
49 ReactServerDOMServer = require('react-server-dom-turbopack/server.edge');
50
51 jest.resetModules();
@@ -66,6 +69,15 @@ describe('ReactFlightTurbopackDOMEdge', () => {
69 }
70 }
71
72 + function normalizeCodeLocInfo(str) {
73 + return (
74 + str &&
75 + str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) {
76 + return ' in ' + name + (/\d/.test(m) ? ' (at **)' : '');
77 + })
78 + );
79 + }
80 +
81 it('should allow an alternative module mapping to be used for SSR', async () => {
82 function ClientComponent() {
83 return <span>Client Component</span>;
@@ -92,9 +104,8 @@ describe('ReactFlightTurbopackDOMEdge', () => {
104 return <ClientComponentOnTheClient />;
105 }
106
95 - const stream = ReactServerDOMServer.renderToReadableStream(
96 - <App />,
97 - turbopackMap,
107 + const stream = await serverAct(() =>
108 + ReactServerDOMServer.renderToReadableStream(<App />, turbopackMap),
109 );
110 const response = ReactServerDOMClient.createFromReadableStream(stream, {
111 serverConsumerManifest: {
@@ -107,10 +118,98 @@ describe('ReactFlightTurbopackDOMEdge', () => {
118 return use(response);
119 }
120
110 - const ssrStream = await ReactDOMServer.renderToReadableStream(
111 - <ClientRoot />,
121 + const ssrStream = await serverAct(() =>
122 + ReactDOMServer.renderToReadableStream(<ClientRoot />),
123 );
124 const result = await readResult(ssrStream);
125 expect(result).toEqual('<span>Client Component</span>');
126 });
127 +
128 + // @gate __DEV__
129 + it('can transport debug info through a separate debug channel', async () => {
130 + function Thrower() {
131 + throw new Error('ssr-throw');
132 + }
133 +
134 + const ClientComponentOnTheClient = clientExports(
135 + Thrower,
136 + 123,
137 + 'path/to/chunk.js',
138 + );
139 +
140 + const ClientComponentOnTheServer = clientExports(Thrower);
141 +
142 + function App() {
143 + return ReactServer.createElement(
144 + ReactServer.Suspense,
145 + null,
146 + ReactServer.createElement(ClientComponentOnTheClient, null),
147 + );
148 + }
149 +
150 + let debugReadableStreamController;
151 +
152 + const debugReadableStream = new ReadableStream({
153 + start(controller) {
154 + debugReadableStreamController = controller;
155 + },
156 + });
157 +
158 + const rscStream = await serverAct(() =>
159 + ReactServerDOMServer.renderToReadableStream(
160 + ReactServer.createElement(App, null),
161 + turbopackMap,
162 + {
163 + debugChannel: {
164 + writable: new WritableStream({
165 + write(chunk) {
166 + debugReadableStreamController.enqueue(chunk);
167 + },
168 + }),
169 + },
170 + },
171 + ),
172 + );
173 +
174 + function ClientRoot({response}) {
175 + return use(response);
176 + }
177 +
178 + const serverConsumerManifest = {
179 + moduleMap: {
180 + [turbopackMap[ClientComponentOnTheClient.$$id].id]: {
181 + '*': turbopackMap[ClientComponentOnTheServer.$$id],
182 + },
183 + },
184 + moduleLoading: null,
185 + };
186 +
187 + const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
188 + serverConsumerManifest,
189 + debugChannel: {readable: debugReadableStream},
190 + });
191 +
192 + let ownerStack;
193 +
194 + const ssrStream = await serverAct(() =>
195 + ReactDOMServer.renderToReadableStream(
196 + <ClientRoot response={response} />,
197 + {
198 + onError(err, errorInfo) {
199 + ownerStack = React.captureOwnerStack
200 + ? React.captureOwnerStack()
201 + : null;
202 + },
203 + },
204 + ),
205 + );
206 +
207 + const result = await readResult(ssrStream);
208 +
209 + expect(normalizeCodeLocInfo(ownerStack)).toBe('\n in App (at **)');
210 +
211 + expect(result).toContain(
212 + 'Switched to client rendering because the server rendering errored:\n\nssr-throw',
213 + );
214 + });
215 });
packages/react-server-dom-turbopack/src/__tests__/ReactFlightTurbopackDOMNode-test.js
+101
@@ -17,12 +17,17 @@ let turbopackModules;
17 let turbopackModuleLoading;
18 let React;
19 let ReactDOMServer;
20 +let ReactServer;
21 let ReactServerDOMServer;
22 let ReactServerDOMClient;
23 let Stream;
24 let use;
25 let serverAct;
26
27 +const streamOptions = {
28 + objectMode: true,
29 +};
30 +
31 describe('ReactFlightTurbopackDOMNode', () => {
32 beforeEach(() => {
33 jest.resetModules();
@@ -35,6 +40,7 @@ describe('ReactFlightTurbopackDOMNode', () => {
40 jest.mock('react-server-dom-turbopack/server', () =>
41 require('react-server-dom-turbopack/server.node'),
42 );
43 + ReactServer = require('react');
44 ReactServerDOMServer = require('react-server-dom-turbopack/server');
45
46 const TurbopackMock = require('./utils/TurbopackMock');
@@ -75,6 +81,15 @@ describe('ReactFlightTurbopackDOMNode', () => {
81 });
82 }
83
84 + function normalizeCodeLocInfo(str) {
85 + return (
86 + str &&
87 + str.replace(/^ +(?:at|in) ([\S]+)[^\n]*/gm, function (m, name) {
88 + return ' in ' + name + (/\d/.test(m) ? ' (at **)' : '');
89 + })
90 + );
91 + }
92 +
93 it('should allow an alternative module mapping to be used for SSR', async () => {
94 function ClientComponent() {
95 return <span>Client Component</span>;
@@ -130,4 +145,90 @@ describe('ReactFlightTurbopackDOMNode', () => {
145 '<script src="/prefix/path/to/chunk.js" async=""></script><span>Client Component</span>',
146 );
147 });
148 +
149 + // @gate __DEV__
150 + it('can transport debug info through a separate debug channel', async () => {
151 + function Thrower() {
152 + throw new Error('ssr-throw');
153 + }
154 +
155 + const ClientComponentOnTheClient = clientExports(
156 + Thrower,
157 + 123,
158 + 'path/to/chunk.js',
159 + );
160 +
161 + const ClientComponentOnTheServer = clientExports(Thrower);
162 +
163 + function App() {
164 + return ReactServer.createElement(
165 + ReactServer.Suspense,
166 + null,
167 + ReactServer.createElement(ClientComponentOnTheClient, null),
168 + );
169 + }
170 +
171 + const debugReadable = new Stream.PassThrough(streamOptions);
172 +
173 + const rscStream = await serverAct(() =>
174 + ReactServerDOMServer.renderToPipeableStream(
175 + ReactServer.createElement(App, null),
176 + turbopackMap,
177 + {
178 + debugChannel: new Stream.Writable({
179 + write(chunk, encoding, callback) {
180 + debugReadable.write(chunk, encoding);
181 + callback();
182 + },
183 + }),
184 + },
185 + ),
186 + );
187 +
188 + const readable = new Stream.PassThrough(streamOptions);
189 +
190 + rscStream.pipe(readable);
191 +
192 + function ClientRoot({response}) {
193 + return use(response);
194 + }
195 +
196 + const serverConsumerManifest = {
197 + moduleMap: {
198 + [turbopackMap[ClientComponentOnTheClient.$$id].id]: {
199 + '*': turbopackMap[ClientComponentOnTheServer.$$id],
200 + },
201 + },
202 + moduleLoading: null,
203 + };
204 +
205 + const response = ReactServerDOMClient.createFromNodeStream(
206 + readable,
207 + serverConsumerManifest,
208 + {debugChannel: debugReadable},
209 + );
210 +
211 + let ownerStack;
212 +
213 + const ssrStream = await serverAct(() =>
214 + ReactDOMServer.renderToPipeableStream(
215 + <ClientRoot response={response} />,
216 + {
217 + onError(err, errorInfo) {
218 + ownerStack = React.captureOwnerStack
219 + ? React.captureOwnerStack()
220 + : null;
221 + },
222 + },
223 + ),
224 + );
225 +
226 + const result = await readResult(ssrStream);
227 +
228 + expect(normalizeCodeLocInfo(ownerStack)).toBe('\n in App (at **)');
229 +
230 + expect(result).toContain(
231 + 'Switched to client rendering because the server rendering errored:\n\nssr-throw',
232 + );
233 + });
234 });
packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js
+32 -3
@@ -78,6 +78,8 @@ export type Options = {
78 findSourceMapURL?: FindSourceMapURLCallback,
79 replayConsoleLogs?: boolean,
80 environmentName?: string,
81 + // For the Edge client we only support a single-direction debug channel.
82 + debugChannel?: {readable?: ReadableStream, ...},
83 };
84
85 function createResponseFromOptions(options: Options) {
@@ -104,6 +106,7 @@ function createResponseFromOptions(options: Options) {
106 function startReadingFromStream(
107 response: FlightResponse,
108 stream: ReadableStream,
109 + isSecondaryStream: boolean,
110 ): void {
111 const streamState = createStreamState();
112 const reader = stream.getReader();
@@ -116,7 +119,11 @@ function startReadingFromStream(
119 ...
120 }): void | Promise<void> {
121 if (done) {
119 - close(response);
122 + // If we're the secondary stream, then we don't close the response until
123 + // the debug channel closes.
124 + if (!isSecondaryStream) {
125 + close(response);
126 + }
127 return;
128 }
129 const buffer: Uint8Array = (value: any);
@@ -134,7 +141,19 @@ function createFromReadableStream<T>(
141 options: Options,
142 ): Thenable<T> {
143 const response: FlightResponse = createResponseFromOptions(options);
137 - startReadingFromStream(response, stream);
144 +
145 + if (
146 + __DEV__ &&
147 + options &&
148 + options.debugChannel &&
149 + options.debugChannel.readable
150 + ) {
151 + startReadingFromStream(response, options.debugChannel.readable, false);
152 + startReadingFromStream(response, stream, true);
153 + } else {
154 + startReadingFromStream(response, stream, false);
155 + }
156 +
157 return getRoot(response);
158 }
159
@@ -145,7 +164,17 @@ function createFromFetch<T>(
164 const response: FlightResponse = createResponseFromOptions(options);
165 promiseForResponse.then(
166 function (r) {
148 - startReadingFromStream(response, (r.body: any));
167 + if (
168 + __DEV__ &&
169 + options &&
170 + options.debugChannel &&
171 + options.debugChannel.readable
172 + ) {
173 + startReadingFromStream(response, options.debugChannel.readable, false);
174 + startReadingFromStream(response, (r.body: any), true);
175 + } else {
176 + startReadingFromStream(response, (r.body: any), false);
177 + }
178 },
179 function (e) {
180 reportGlobalError(response, e);
packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js
+38 -12
@@ -59,8 +59,38 @@ export type Options = {
59 findSourceMapURL?: FindSourceMapURLCallback,
60 replayConsoleLogs?: boolean,
61 environmentName?: string,
62 + // For the Node.js client we only support a single-direction debug channel.
63 + debugChannel?: Readable,
64 };
65
66 +function startReadingFromStream(
67 + response: Response,
68 + stream: Readable,
69 + isSecondaryStream: boolean,
70 +): void {
71 + const streamState = createStreamState();
72 +
73 + stream.on('data', chunk => {
74 + if (typeof chunk === 'string') {
75 + processStringChunk(response, streamState, chunk);
76 + } else {
77 + processBinaryChunk(response, streamState, chunk);
78 + }
79 + });
80 +
81 + stream.on('error', error => {
82 + reportGlobalError(response, error);
83 + });
84 +
85 + stream.on('end', () => {
86 + // If we're the secondary stream, then we don't close the response until the
87 + // debug channel closes.
88 + if (!isSecondaryStream) {
89 + close(response);
90 + }
91 + });
92 +}
93 +
94 function createFromNodeStream<T>(
95 stream: Readable,
96 serverConsumerManifest: ServerConsumerManifest,
@@ -82,18 +112,14 @@ function createFromNodeStream<T>(
112 ? options.environmentName
113 : undefined,
114 );
85 - const streamState = createStreamState();
86 - stream.on('data', chunk => {
87 - if (typeof chunk === 'string') {
88 - processStringChunk(response, streamState, chunk);
89 - } else {
90 - processBinaryChunk(response, streamState, chunk);
91 - }
92 - });
93 - stream.on('error', error => {
94 - reportGlobalError(response, error);
95 - });
96 - stream.on('end', () => close(response));
115 +
116 + if (__DEV__ && options && options.debugChannel) {
117 + startReadingFromStream(response, options.debugChannel, false);
118 + startReadingFromStream(response, stream, true);
119 + } else {
120 + startReadingFromStream(response, stream, false);
121 + }
122 +
123 return getRoot(response);
124 }
125
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
+92
@@ -13,6 +13,8 @@
13 // Polyfills for test environment
14 global.ReadableStream =
15 require('web-streams-polyfill/ponyfill/es6').ReadableStream;
16 +global.WritableStream =
17 + require('web-streams-polyfill/ponyfill/es6').WritableStream;
18 global.TextEncoder = require('util').TextEncoder;
19 global.TextDecoder = require('util').TextDecoder;
20 global.Blob = require('buffer').Blob;
@@ -1968,4 +1970,94 @@ describe('ReactFlightDOMEdge', () => {
1970 const result = await readResult(ssrStream);
1971 expect(result).toEqual('<div></div>');
1972 });
1973 +
1974 + // @gate __DEV__
1975 + it('can transport debug info through a separate debug channel', async () => {
1976 + function Thrower() {
1977 + throw new Error('ssr-throw');
1978 + }
1979 +
1980 + const ClientComponentOnTheClient = clientExports(
1981 + Thrower,
1982 + 123,
1983 + 'path/to/chunk.js',
1984 + );
1985 +
1986 + const ClientComponentOnTheServer = clientExports(Thrower);
1987 +
1988 + function App() {
1989 + return ReactServer.createElement(
1990 + ReactServer.Suspense,
1991 + null,
1992 + ReactServer.createElement(ClientComponentOnTheClient, null),
1993 + );
1994 + }
1995 +
1996 + let debugReadableStreamController;
1997 +
1998 + const debugReadableStream = new ReadableStream({
1999 + start(controller) {
2000 + debugReadableStreamController = controller;
2001 + },
2002 + });
2003 +
2004 + const rscStream = await serverAct(() =>
2005 + passThrough(
2006 + ReactServerDOMServer.renderToReadableStream(
2007 + ReactServer.createElement(App, null),
2008 + webpackMap,
2009 + {
2010 + debugChannel: {
2011 + writable: new WritableStream({
2012 + write(chunk) {
2013 + debugReadableStreamController.enqueue(chunk);
2014 + },
2015 + }),
2016 + },
2017 + },
2018 + ),
2019 + ),
2020 + );
2021 +
2022 + function ClientRoot({response}) {
2023 + return use(response);
2024 + }
2025 +
2026 + const serverConsumerManifest = {
2027 + moduleMap: {
2028 + [webpackMap[ClientComponentOnTheClient.$$id].id]: {
2029 + '*': webpackMap[ClientComponentOnTheServer.$$id],
2030 + },
2031 + },
2032 + moduleLoading: webpackModuleLoading,
2033 + };
2034 +
2035 + const response = ReactServerDOMClient.createFromReadableStream(rscStream, {
2036 + serverConsumerManifest,
2037 + debugChannel: {readable: debugReadableStream},
2038 + });
2039 +
2040 + let ownerStack;
2041 +
2042 + const ssrStream = await serverAct(() =>
2043 + ReactDOMServer.renderToReadableStream(
2044 + <ClientRoot response={response} />,
2045 + {
2046 + onError(err, errorInfo) {
2047 + ownerStack = React.captureOwnerStack
2048 + ? React.captureOwnerStack()
2049 + : null;
2050 + },
2051 + },
2052 + ),
2053 + );
2054 +
2055 + const result = await readResult(ssrStream);
2056 +
2057 + expect(normalizeCodeLocInfo(ownerStack)).toBe('\n in App (at **)');
2058 +
2059 + expect(result).toContain(
2060 + 'Switched to client rendering because the server rendering errored:\n\nssr-throw',
2061 + );
2062 + });
2063 });
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js
+86
@@ -905,4 +905,90 @@ describe('ReactFlightDOMNode', () => {
905 // We don't really have an assertion other than to make sure
906 // the stream doesn't hang.
907 });
908 +
909 + // @gate __DEV__
910 + it('can transport debug info through a separate debug channel', async () => {
911 + function Thrower() {
912 + throw new Error('ssr-throw');
913 + }
914 +
915 + const ClientComponentOnTheClient = clientExports(
916 + Thrower,
917 + 123,
918 + 'path/to/chunk.js',
919 + );
920 +
921 + const ClientComponentOnTheServer = clientExports(Thrower);
922 +
923 + function App() {
924 + return ReactServer.createElement(
925 + ReactServer.Suspense,
926 + null,
927 + ReactServer.createElement(ClientComponentOnTheClient, null),
928 + );
929 + }
930 +
931 + const debugReadable = new Stream.PassThrough(streamOptions);
932 +
933 + const rscStream = await serverAct(() =>
934 + ReactServerDOMServer.renderToPipeableStream(
935 + ReactServer.createElement(App, null),
936 + webpackMap,
937 + {
938 + debugChannel: new Stream.Writable({
939 + write(chunk, encoding, callback) {
940 + debugReadable.write(chunk, encoding);
941 + callback();
942 + },
943 + }),
944 + },
945 + ),
946 + );
947 +
948 + const readable = new Stream.PassThrough(streamOptions);
949 +
950 + rscStream.pipe(readable);
951 +
952 + function ClientRoot({response}) {
953 + return use(response);
954 + }
955 +
956 + const serverConsumerManifest = {
957 + moduleMap: {
958 + [webpackMap[ClientComponentOnTheClient.$$id].id]: {
959 + '*': webpackMap[ClientComponentOnTheServer.$$id],
960 + },
961 + },
962 + moduleLoading: webpackModuleLoading,
963 + };
964 +
965 + const response = ReactServerDOMClient.createFromNodeStream(
966 + readable,
967 + serverConsumerManifest,
968 + {debugChannel: debugReadable},
969 + );
970 +
971 + let ownerStack;
972 +
973 + const ssrStream = await serverAct(() =>
974 + ReactDOMServer.renderToPipeableStream(
975 + <ClientRoot response={response} />,
976 + {
977 + onError(err, errorInfo) {
978 + ownerStack = React.captureOwnerStack
979 + ? React.captureOwnerStack()
980 + : null;
981 + },
982 + },
983 + ),
984 + );
985 +
986 + const result = await readResult(ssrStream);
987 +
988 + expect(normalizeCodeLocInfo(ownerStack)).toBe('\n in App (at **)');
989 +
990 + expect(result).toContain(
991 + 'Switched to client rendering because the server rendering errored:\n\nssr-throw',
992 + );
993 + });
994 });
packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js
+32 -3
@@ -78,6 +78,8 @@ export type Options = {
78 findSourceMapURL?: FindSourceMapURLCallback,
79 replayConsoleLogs?: boolean,
80 environmentName?: string,
81 + // For the Edge client we only support a single-direction debug channel.
82 + debugChannel?: {readable?: ReadableStream, ...},
83 };
84
85 function createResponseFromOptions(options: Options) {
@@ -104,6 +106,7 @@ function createResponseFromOptions(options: Options) {
106 function startReadingFromStream(
107 response: FlightResponse,
108 stream: ReadableStream,
109 + isSecondaryStream: boolean,
110 ): void {
111 const streamState = createStreamState();
112 const reader = stream.getReader();
@@ -116,7 +119,11 @@ function startReadingFromStream(
119 ...
120 }): void | Promise<void> {
121 if (done) {
119 - close(response);
122 + // If we're the secondary stream, then we don't close the response until
123 + // the debug channel closes.
124 + if (!isSecondaryStream) {
125 + close(response);
126 + }
127 return;
128 }
129 const buffer: Uint8Array = (value: any);
@@ -134,7 +141,19 @@ function createFromReadableStream<T>(
141 options: Options,
142 ): Thenable<T> {
143 const response: FlightResponse = createResponseFromOptions(options);
137 - startReadingFromStream(response, stream);
144 +
145 + if (
146 + __DEV__ &&
147 + options &&
148 + options.debugChannel &&
149 + options.debugChannel.readable
150 + ) {
151 + startReadingFromStream(response, options.debugChannel.readable, false);
152 + startReadingFromStream(response, stream, true);
153 + } else {
154 + startReadingFromStream(response, stream, false);
155 + }
156 +
157 return getRoot(response);
158 }
159
@@ -145,7 +164,17 @@ function createFromFetch<T>(
164 const response: FlightResponse = createResponseFromOptions(options);
165 promiseForResponse.then(
166 function (r) {
148 - startReadingFromStream(response, (r.body: any));
167 + if (
168 + __DEV__ &&
169 + options &&
170 + options.debugChannel &&
171 + options.debugChannel.readable
172 + ) {
173 + startReadingFromStream(response, options.debugChannel.readable, false);
174 + startReadingFromStream(response, (r.body: any), true);
175 + } else {
176 + startReadingFromStream(response, (r.body: any), false);
177 + }
178 },
179 function (e) {
180 reportGlobalError(response, e);
packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js
+38 -12
@@ -59,8 +59,38 @@ export type Options = {
59 findSourceMapURL?: FindSourceMapURLCallback,
60 replayConsoleLogs?: boolean,
61 environmentName?: string,
62 + // For the Node.js client we only support a single-direction debug channel.
63 + debugChannel?: Readable,
64 };
65
66 +function startReadingFromStream(
67 + response: Response,
68 + stream: Readable,
69 + isSecondaryStream: boolean,
70 +): void {
71 + const streamState = createStreamState();
72 +
73 + stream.on('data', chunk => {
74 + if (typeof chunk === 'string') {
75 + processStringChunk(response, streamState, chunk);
76 + } else {
77 + processBinaryChunk(response, streamState, chunk);
78 + }
79 + });
80 +
81 + stream.on('error', error => {
82 + reportGlobalError(response, error);
83 + });
84 +
85 + stream.on('end', () => {
86 + // If we're the secondary stream, then we don't close the response until the
87 + // debug channel closes.
88 + if (!isSecondaryStream) {
89 + close(response);
90 + }
91 + });
92 +}
93 +
94 function createFromNodeStream<T>(
95 stream: Readable,
96 serverConsumerManifest: ServerConsumerManifest,
@@ -82,18 +112,14 @@ function createFromNodeStream<T>(
112 ? options.environmentName
113 : undefined,
114 );
85 - const streamState = createStreamState();
86 - stream.on('data', chunk => {
87 - if (typeof chunk === 'string') {
88 - processStringChunk(response, streamState, chunk);
89 - } else {
90 - processBinaryChunk(response, streamState, chunk);
91 - }
92 - });
93 - stream.on('error', error => {
94 - reportGlobalError(response, error);
95 - });
96 - stream.on('end', () => close(response));
115 +
116 + if (__DEV__ && options && options.debugChannel) {
117 + startReadingFromStream(response, options.debugChannel, false);
118 + startReadingFromStream(response, stream, true);
119 + } else {
120 + startReadingFromStream(response, stream, false);
121 + }
122 +
123 return getRoot(response);
124 }
125