Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit e4d2591

Browse files
sebmarkbagesebmarkbage
committed
Add a prefix to errors serialized from server rendering
It can be a bit confusing to see where this error came from otherwise since it didn't come from elsewhere on the client.
1 parent 73a50cb commit e4d2591

File tree

6 files changed

+103
-66
lines changed

6 files changed

+103
-66
lines changed

‎packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js‎

Lines changed: 44 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -786,7 +786,8 @@ describe('ReactDOMFizzServer', () => {
786786
errors,
787787
[
788788
[
789-
theError.message,
789+
'Switched to client rendering because the server rendering errored:\n\n' +
790+
theError.message,
790791
expectedDigest,
791792
componentStack(['Lazy', 'Suspense', 'div', 'App']),
792793
],
@@ -909,7 +910,8 @@ describe('ReactDOMFizzServer', () => {
909910
errors,
910911
[
911912
[
912-
theError.message,
913+
'Switched to client rendering because the server rendering errored:\n\n' +
914+
theError.message,
913915
expectedDigest,
914916
componentStack(['Lazy', 'Suspense', 'div', 'App']),
915917
],
@@ -992,7 +994,8 @@ describe('ReactDOMFizzServer', () => {
992994
errors,
993995
[
994996
[
995-
theError.message,
997+
'Switched to client rendering because the server rendering errored:\n\n' +
998+
theError.message,
996999
expectedDigest,
9971000
componentStack([
9981001
'Erroring',
@@ -1078,7 +1081,8 @@ describe('ReactDOMFizzServer', () => {
10781081
errors,
10791082
[
10801083
[
1081-
theError.message,
1084+
'Switched to client rendering because the server rendering errored:\n\n' +
1085+
theError.message,
10821086
expectedDigest,
10831087
componentStack(['Lazy', 'Suspense', 'div', 'App']),
10841088
],
@@ -1404,13 +1408,15 @@ describe('ReactDOMFizzServer', () => {
14041408
errors,
14051409
[
14061410
[
1407-
'The server did not finish this Suspense boundary: The render was aborted by the server without a reason.',
1411+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
1412+
'The render was aborted by the server without a reason.',
14081413
expectedDigest,
14091414
// We get the stack of the task when it was aborted which is why we see `h1`
14101415
componentStack(['h1', 'Suspense', 'div', 'App']),
14111416
],
14121417
[
1413-
'The server did not finish this Suspense boundary: The render was aborted by the server without a reason.',
1418+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
1419+
'The render was aborted by the server without a reason.',
14141420
expectedDigest,
14151421
componentStack(['Suspense', 'main', 'div', 'App']),
14161422
],
@@ -2145,7 +2151,8 @@ describe('ReactDOMFizzServer', () => {
21452151
errors,
21462152
[
21472153
[
2148-
theError.message,
2154+
'Switched to client rendering because the server rendering errored:\n\n' +
2155+
theError.message,
21492156
expectedDigest,
21502157
componentStack([
21512158
'AsyncText',
@@ -3431,12 +3438,14 @@ describe('ReactDOMFizzServer', () => {
34313438
errors,
34323439
[
34333440
[
3434-
'The server did not finish this Suspense boundary: foobar',
3441+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
3442+
'foobar',
34353443
'a digest',
34363444
componentStack(['Suspense', 'p', 'div', 'App']),
34373445
],
34383446
[
3439-
'The server did not finish this Suspense boundary: foobar',
3447+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
3448+
'foobar',
34403449
'a digest',
34413450
componentStack(['Suspense', 'span', 'div', 'App']),
34423451
],
@@ -3512,12 +3521,14 @@ describe('ReactDOMFizzServer', () => {
35123521
errors,
35133522
[
35143523
[
3515-
'The server did not finish this Suspense boundary: uh oh',
3524+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
3525+
'uh oh',
35163526
'a digest',
35173527
componentStack(['Suspense', 'p', 'div', 'App']),
35183528
],
35193529
[
3520-
'The server did not finish this Suspense boundary: uh oh',
3530+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
3531+
'uh oh',
35213532
'a digest',
35223533
componentStack(['Suspense', 'span', 'div', 'App']),
35233534
],
@@ -3991,7 +4002,8 @@ describe('ReactDOMFizzServer', () => {
39914002
errors,
39924003
[
39934004
[
3994-
theError.message,
4005+
'Switched to client rendering because the server rendering errored:\n\n' +
4006+
theError.message,
39954007
expectedDigest,
39964008
componentStack(['Erroring', 'Suspense', 'div', 'App']),
39974009
],
@@ -6772,7 +6784,14 @@ describe('ReactDOMFizzServer', () => {
67726784

67736785
expect(recoverableErrors).toEqual(
67746786
__DEV__
6775-
? ['server error', 'replay error', 'server error']
6787+
? [
6788+
'Switched to client rendering because the server rendering errored:\n\n' +
6789+
'server error',
6790+
'Switched to client rendering because the server rendering errored:\n\n' +
6791+
'replay error',
6792+
'Switched to client rendering because the server rendering errored:\n\n' +
6793+
'server error',
6794+
]
67766795
: [
67776796
'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
67786797
'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
@@ -6931,8 +6950,10 @@ describe('ReactDOMFizzServer', () => {
69316950
expect(recoverableErrors).toEqual(
69326951
__DEV__
69336952
? [
6934-
'The server did not finish this Suspense boundary: aborted',
6935-
'The server did not finish this Suspense boundary: aborted',
6953+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
6954+
'aborted',
6955+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
6956+
'aborted',
69366957
]
69376958
: [
69386959
'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
@@ -7103,8 +7124,10 @@ describe('ReactDOMFizzServer', () => {
71037124
// It surfaced in two different suspense boundaries.
71047125
__DEV__
71057126
? [
7106-
'The server did not finish this Suspense boundary: replay error',
7107-
'The server did not finish this Suspense boundary: replay error',
7127+
'Switched to client rendering because the server rendering errored:\n\n' +
7128+
'replay error',
7129+
'Switched to client rendering because the server rendering errored:\n\n' +
7130+
'replay error',
71087131
]
71097132
: [
71107133
'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
@@ -7230,7 +7253,10 @@ describe('ReactDOMFizzServer', () => {
72307253

72317254
expect(recoverableErrors).toEqual(
72327255
__DEV__
7233-
? ['server error']
7256+
? [
7257+
'Switched to client rendering because the server rendering errored:\n\n' +
7258+
'server error',
7259+
]
72347260
: [
72357261
'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
72367262
],

‎packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1292,10 +1292,12 @@ describe('ReactDOMServerHydration', () => {
12921292
}
12931293

12941294
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1295-
[
1296-
"Caught [The server did not finish this Suspense boundary: The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server]",
1297-
]
1298-
`);
1295+
[
1296+
"Caught [Switched to client rendering because the server rendering aborted due to:
1297+
1298+
The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server]",
1299+
]
1300+
`);
12991301
});
13001302

13011303
// @gate __DEV__
@@ -1318,10 +1320,12 @@ describe('ReactDOMServerHydration', () => {
13181320
}
13191321

13201322
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1321-
[
1322-
"Caught [The server did not finish this Suspense boundary: The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server]",
1323-
]
1324-
`);
1323+
[
1324+
"Caught [Switched to client rendering because the server rendering aborted due to:
1325+
1326+
The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server]",
1327+
]
1328+
`);
13251329
});
13261330
});
13271331

‎packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2108,7 +2108,8 @@ describe('ReactDOMServerPartialHydration', () => {
21082108
});
21092109
if (__DEV__) {
21102110
await waitForAll([
2111-
'The server did not finish this Suspense boundary: The server used' +
2111+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
2112+
'The server used' +
21122113
' "renderToString" which does not support Suspense.',
21132114
]);
21142115
} else {
@@ -2177,7 +2178,8 @@ describe('ReactDOMServerPartialHydration', () => {
21772178
});
21782179
if (__DEV__) {
21792180
await waitForAll([
2180-
'The server did not finish this Suspense boundary: The server used' +
2181+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
2182+
'The server used' +
21812183
' "renderToString" which does not support Suspense.',
21822184
]);
21832185
} else {
@@ -2251,7 +2253,8 @@ describe('ReactDOMServerPartialHydration', () => {
22512253
});
22522254
if (__DEV__) {
22532255
await waitForAll([
2254-
'The server did not finish this Suspense boundary: The server used' +
2256+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
2257+
'The server used' +
22552258
' "renderToString" which does not support Suspense.',
22562259
]);
22572260
} else {
@@ -2571,7 +2574,8 @@ describe('ReactDOMServerPartialHydration', () => {
25712574
suspend = true;
25722575
if (__DEV__) {
25732576
await waitForAll([
2574-
'The server did not finish this Suspense boundary: The server used' +
2577+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
2578+
'The server used' +
25752579
' "renderToString" which does not support Suspense.',
25762580
]);
25772581
} else {
@@ -2641,7 +2645,8 @@ describe('ReactDOMServerPartialHydration', () => {
26412645
});
26422646
if (__DEV__) {
26432647
await waitForAll([
2644-
'The server did not finish this Suspense boundary: The server used' +
2648+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
2649+
'The server used' +
26452650
' "renderToString" which does not support Suspense.',
26462651
]);
26472652
} else {

‎packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -681,7 +681,8 @@ describe('ReactDOMServerHydration', () => {
681681
expect(errors.length).toBe(1);
682682
if (__DEV__) {
683683
expect(errors[0]).toBe(
684-
'The server did not finish this Suspense boundary: The server used "renderToString" ' +
684+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
685+
'The server used "renderToString" ' +
685686
'which does not support Suspense. If you intended for this Suspense boundary to render ' +
686687
'the fallback content on the server consider throwing an Error somewhere within the ' +
687688
'Suspense boundary. If you intended to have the server wait for the suspended component ' +
@@ -726,7 +727,8 @@ describe('ReactDOMServerHydration', () => {
726727
expect(errors.length).toBe(1);
727728
if (__DEV__) {
728729
expect(errors[0]).toBe(
729-
'The server did not finish this Suspense boundary: The server used "renderToString" ' +
730+
'Switched to client rendering because the server rendering aborted due to:\n\n' +
731+
'The server used "renderToString" ' +
730732
'which does not support Suspense. If you intended for this Suspense boundary to render ' +
731733
'the fallback content on the server consider throwing an Error somewhere within the ' +
732734
'Suspense boundary. If you intended to have the server wait for the suspended component ' +

‎packages/react-reconciler/src/ReactFiberBeginWork.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2659,18 +2659,18 @@ function updateDehydratedSuspenseComponent(
26592659
// TODO: Figure out a better signal than encoding a magic digest value.
26602660
if (!enablePostpone || digest !== 'POSTPONE') {
26612661
let error;
2662-
if (message) {
2662+
if (__DEV__ && message) {
26632663
// eslint-disable-next-line react-internal/prod-error-codes
26642664
error = new Error(message);
26652665
} else {
26662666
error = new Error(
26672667
'The server could not finish this Suspense boundary, likely ' +
2668-
'due to an error during server rendering. Switched to ' +
2669-
'client rendering.',
2668+
'due to an error during server rendering. ' +
2669+
'Switched to client rendering.',
26702670
);
26712671
}
26722672
// Replace the stack with the server stack
2673-
error.stack = stack || '';
2673+
error.stack = (__DEV__ && stack) || '';
26742674
(error: any).digest = digest;
26752675
capturedValue = createCapturedValueFromError(
26762676
error,

0 commit comments

Comments
 (0)