Skip to content
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

Jump to bottom

Log a recoverable error whenever hydration fails #23319

Merged
merged 1 commit into from
Feb 17, 2022
Merged

Log a recoverable error whenever hydration fails #23319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
84 changes: 69 additions & 15 deletions packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,11 @@ describe('ReactDOMFizzServer', () => {
window.__INIT__ = function() {
bootstrapped = true;
// Attempt to hydrate the content.
ReactDOM.hydrateRoot(container, <App isClient={true} />);
ReactDOM.hydrateRoot(container, <App isClient={true} />, {
onRecoverableError(error) {
Scheduler.unstable_yieldValue(error.message);
},
});
};

await act(async () => {
Expand Down Expand Up @@ -394,7 +398,10 @@ describe('ReactDOMFizzServer', () => {
expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);

// Now we can client render it instead.
Scheduler.unstable_flushAll();
expect(Scheduler).toFlushAndYield([
'The server could not finish this Suspense boundary, likely due to ' +
'an error during server rendering. Switched to client rendering.',
]);

// The client rendered HTML is now in place.
expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
Expand Down Expand Up @@ -465,7 +472,11 @@ describe('ReactDOMFizzServer', () => {
expect(loggedErrors).toEqual([]);

// Attempt to hydrate the content.
ReactDOM.hydrateRoot(container, <App isClient={true} />);
ReactDOM.hydrateRoot(container, <App isClient={true} />, {
onRecoverableError(error) {
Scheduler.unstable_yieldValue(error.message);
},
});
Scheduler.unstable_flushAll();

// We're still loading because we're waiting for the server to stream more content.
Expand All @@ -484,7 +495,10 @@ describe('ReactDOMFizzServer', () => {
expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);

// Now we can client render it instead.
Scheduler.unstable_flushAll();
expect(Scheduler).toFlushAndYield([
'The server could not finish this Suspense boundary, likely due to ' +
'an error during server rendering. Switched to client rendering.',
]);

// The client rendered HTML is now in place.
expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
Expand Down Expand Up @@ -766,7 +780,11 @@ describe('ReactDOMFizzServer', () => {
// We're still showing a fallback.

// Attempt to hydrate the content.
ReactDOM.hydrateRoot(container, <App />);
ReactDOM.hydrateRoot(container, <App />, {
onRecoverableError(error) {
Scheduler.unstable_yieldValue(error.message);
},
});
Scheduler.unstable_flushAll();

// We're still loading because we're waiting for the server to stream more content.
Expand All @@ -778,7 +796,10 @@ describe('ReactDOMFizzServer', () => {
});

// We still can't render it on the client.
Scheduler.unstable_flushAll();
expect(Scheduler).toFlushAndYield([
'The server could not finish this Suspense boundary, likely due to an ' +
'error during server rendering. Switched to client rendering.',
]);
expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);

// We now resolve it on the client.
Expand Down Expand Up @@ -1455,7 +1476,11 @@ describe('ReactDOMFizzServer', () => {
// We're still showing a fallback.

// Attempt to hydrate the content.
ReactDOM.hydrateRoot(container, <App isClient={true} />);
ReactDOM.hydrateRoot(container, <App isClient={true} />, {
onRecoverableError(error) {
Scheduler.unstable_yieldValue(error.message);
},
});
Scheduler.unstable_flushAll();

// We're still loading because we're waiting for the server to stream more content.
Expand Down Expand Up @@ -1484,7 +1509,10 @@ describe('ReactDOMFizzServer', () => {
expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);

// That will let us client render it instead.
Scheduler.unstable_flushAll();
expect(Scheduler).toFlushAndYield([
'The server could not finish this Suspense boundary, likely due to ' +
'an error during server rendering. Switched to client rendering.',
]);

// The client rendered HTML is now in place.
expect(getVisibleChildren(container)).toEqual(
Expand Down Expand Up @@ -1736,8 +1764,11 @@ describe('ReactDOMFizzServer', () => {
// The first paint switches to client rendering due to mismatch
expect(Scheduler).toFlushUntilNextPaint([
'client',
'Log recoverable error: An error occurred during hydration. ' +
'The server HTML was replaced with client content',
'Log recoverable error: Hydration failed because the initial ' +
'UI does not match what was rendered on the server.',
'Log recoverable error: There was an error while hydrating. ' +
'Because the error happened outside of a Suspense boundary, the ' +
'entire root will switch to client rendering.',
]);
}).toErrorDev(
[
Expand Down Expand Up @@ -1834,8 +1865,11 @@ describe('ReactDOMFizzServer', () => {
// The first paint switches to client rendering due to mismatch
expect(Scheduler).toFlushUntilNextPaint([
'client',
'Log recoverable error: An error occurred during hydration. ' +
'The server HTML was replaced with client content',
'Log recoverable error: Hydration failed because the initial ' +
'UI does not match what was rendered on the server.',
'Log recoverable error: There was an error while hydrating. ' +
'Because the error happened outside of a Suspense boundary, the ' +
'entire root will switch to client rendering.',
]);
}).toErrorDev(
[
Expand Down Expand Up @@ -1928,7 +1962,13 @@ describe('ReactDOMFizzServer', () => {
// An error logged but instead of surfacing it to the UI, we switched
// to client rendering.
expect(() => {
expect(Scheduler).toFlushAndYield(['Yay!', 'Hydration error']);
expect(Scheduler).toFlushAndYield([
'Yay!',
'Hydration error',
'There was an error while hydrating. Because the error happened ' +
'outside of a Suspense boundary, the entire root will switch ' +
'to client rendering.',
]);
}).toErrorDev(
'An error occurred during hydration. The server HTML was replaced',
{withoutStack: true},
Expand Down Expand Up @@ -2012,7 +2052,11 @@ describe('ReactDOMFizzServer', () => {

// An error logged but instead of surfacing it to the UI, we switched
// to client rendering.
expect(Scheduler).toFlushAndYield(['Yay!', 'Hydration error']);
expect(Scheduler).toFlushAndYield([
'Yay!',
'Hydration error',
'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
]);
expect(getVisibleChildren(container)).toEqual(
<div>
<span />
Expand Down Expand Up @@ -2178,7 +2222,11 @@ describe('ReactDOMFizzServer', () => {

// An error logged but instead of surfacing it to the UI, we switched
// to client rendering.
expect(Scheduler).toFlushAndYield(['Hydration error']);
expect(Scheduler).toFlushAndYield([
'Hydration error',
'There was an error while hydrating this Suspense boundary. Switched ' +
'to client rendering.',
]);
expect(getVisibleChildren(container)).toEqual(
<div>
<span />
Expand Down Expand Up @@ -2328,8 +2376,14 @@ describe('ReactDOMFizzServer', () => {
expect(Scheduler).toFlushAndYield([
'A',
'B',

'Logged recoverable error: Hydration error',
'Logged recoverable error: There was an error while hydrating this ' +
'Suspense boundary. Switched to client rendering.',

'Logged recoverable error: Hydration error',
'Logged recoverable error: There was an error while hydrating this ' +
'Suspense boundary. Switched to client rendering.',
]);
});
});
12 changes: 10 additions & 2 deletions packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,15 +232,23 @@ describe('ReactDOMFizzShellHydration', () => {

// Hydration suspends because the data for the shell hasn't loaded yet
const root = await clientAct(async () => {
return ReactDOM.hydrateRoot(container, <App />);
return ReactDOM.hydrateRoot(container, <App />, {
onRecoverableError(error) {
Scheduler.unstable_yieldValue(error.message);
},
});
});
expect(Scheduler).toHaveYielded(['Suspend! [Shell]']);
expect(container.textContent).toBe('Shell');

await clientAct(async () => {
root.render(<Text text="New screen" />);
});
expect(Scheduler).toHaveYielded(['New screen']);
expect(Scheduler).toHaveYielded([
'This root received an early update, before anything was able ' +
'hydrate. Switched the entire root to client rendering.',
'New screen',
]);
expect(container.textContent).toBe('New screen');
});
});
Loading