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.

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

Log a recoverable error whenever hydration fails #23319

Merged
merged 1 commit into from
Feb 17, 2022

Conversation

acdlite
Copy link
Collaborator

@acdlite acdlite commented Feb 17, 2022

There are several cases where hydration fails, server-rendered HTML is discarded, and we fall back to client rendering. Whenever this happens, we will now log an error with onRecoverableError, with a message explaining why.

In some of these scenarios, this is not the only recoverable error that is logged. For example, an error during hydration will cause hydration to fail, which is itself an error. So we end up logging two separate errors: the original error, and one that explains why hydration failed.

I've made sure that the original error always gets logged first, to preserve the causal sequence.

Another thing we could do is aggregate the errors with the Error "cause" feature and AggregateError. Since these are new-ish features in JavaScript, we'd need a fallback behavior. I'll leave this for a follow up.

There are several cases where hydration fails, server-rendered HTML is
discarded, and we fall back to client rendering. Whenever this happens,
we will now log an error with onRecoverableError, with a message
explaining why.

In some of these scenarios, this is not the only recoverable error that
is logged. For example, an error during hydration will cause hydration
to fail, which is itself an error. So we end up logging two separate
errors: the original error, and one that explains why hydration failed.

I've made sure that the original error always gets logged first, to
preserve the causal sequence.

Another thing we could do is aggregate the errors with the Error "cause"
feature and AggregateError. Since these are new-ish features in
JavaScript, we'd need a fallback behavior. I'll leave this for a
follow up.
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Feb 17, 2022
@sizebot
Copy link

sizebot commented Feb 17, 2022

Comparing: 79ed5e1...dc85597

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js +0.14% 130.77 kB 130.96 kB +0.14% 41.90 kB 41.96 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.14% 135.75 kB 135.93 kB +0.14% 43.40 kB 43.46 kB
facebook-www/ReactDOM-prod.classic.js +0.08% 432.15 kB 432.49 kB +0.09% 79.27 kB 79.34 kB
facebook-www/ReactDOM-prod.modern.js +0.08% 422.07 kB 422.41 kB +0.10% 77.81 kB 77.89 kB
facebook-www/ReactDOMForked-prod.classic.js +0.08% 432.15 kB 432.49 kB +0.09% 79.28 kB 79.35 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable-semver/react-test-renderer/umd/react-test-renderer.production.min.js +0.40% 84.91 kB 85.25 kB +0.56% 26.50 kB 26.65 kB
oss-stable/react-test-renderer/umd/react-test-renderer.production.min.js +0.40% 84.91 kB 85.25 kB +0.56% 26.50 kB 26.65 kB
oss-stable-semver/react-test-renderer/cjs/react-test-renderer.production.min.js +0.40% 84.67 kB 85.01 kB +0.52% 26.16 kB 26.30 kB
oss-stable/react-test-renderer/cjs/react-test-renderer.production.min.js +0.40% 84.67 kB 85.01 kB +0.52% 26.16 kB 26.30 kB
oss-stable-semver/react-art/cjs/react-art.development.js +0.39% 673.32 kB 675.94 kB +0.60% 145.81 kB 146.68 kB
oss-stable/react-art/cjs/react-art.development.js +0.39% 673.32 kB 675.94 kB +0.60% 145.81 kB 146.68 kB
oss-experimental/react-test-renderer/umd/react-test-renderer.production.min.js +0.38% 89.23 kB 89.57 kB +0.55% 27.66 kB 27.81 kB
oss-experimental/react-test-renderer/cjs/react-test-renderer.production.min.js +0.38% 89.00 kB 89.34 kB +0.48% 27.39 kB 27.52 kB
facebook-www/ReactART-dev.modern.js +0.38% 752.21 kB 755.04 kB +0.56% 160.74 kB 161.64 kB
oss-experimental/react-art/cjs/react-art.development.js +0.37% 699.11 kB 701.72 kB +0.58% 151.16 kB 152.04 kB
facebook-www/ReactART-dev.classic.js +0.37% 762.43 kB 765.25 kB +0.55% 162.86 kB 163.76 kB
oss-stable-semver/react-art/umd/react-art.development.js +0.35% 776.65 kB 779.34 kB +0.52% 164.03 kB 164.89 kB
oss-stable/react-art/umd/react-art.development.js +0.35% 776.65 kB 779.34 kB +0.52% 164.03 kB 164.89 kB
oss-experimental/react-art/umd/react-art.development.js +0.34% 803.69 kB 806.39 kB +0.51% 169.34 kB 170.19 kB
facebook-www/ReactART-prod.modern.js +0.33% 270.39 kB 271.30 kB +0.36% 48.14 kB 48.31 kB
facebook-www/ReactART-prod.classic.js +0.33% 278.10 kB 279.01 kB +0.34% 49.42 kB 49.59 kB
oss-stable-semver/react-art/cjs/react-art.production.min.js +0.31% 82.30 kB 82.55 kB +0.39% 25.51 kB 25.61 kB
oss-stable/react-art/cjs/react-art.production.min.js +0.31% 82.30 kB 82.55 kB +0.39% 25.51 kB 25.61 kB
oss-experimental/react-art/cjs/react-art.production.min.js +0.29% 86.64 kB 86.89 kB +0.35% 26.76 kB 26.86 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.development.js +0.25% 735.59 kB 737.43 kB +0.40% 156.85 kB 157.47 kB
oss-stable/react-reconciler/cjs/react-reconciler.development.js +0.25% 735.59 kB 737.43 kB +0.40% 156.85 kB 157.47 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js +0.24% 761.57 kB 763.41 kB +0.39% 162.23 kB 162.85 kB
oss-stable-semver/react-art/umd/react-art.production.min.js +0.21% 118.23 kB 118.48 kB +0.34% 36.72 kB 36.85 kB
oss-stable/react-art/umd/react-art.production.min.js +0.21% 118.23 kB 118.48 kB +0.34% 36.72 kB 36.85 kB
oss-experimental/react-art/umd/react-art.production.min.js +0.20% 122.51 kB 122.76 kB +0.31% 37.96 kB 38.07 kB
facebook-www/ReactDOMTesting-dev.modern.js +0.20% 1,018.14 kB 1,020.21 kB +0.30% 229.53 kB 230.21 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.production.min.js +0.20% 92.79 kB 92.98 kB +0.21% 28.57 kB 28.63 kB
oss-stable/react-reconciler/cjs/react-reconciler.production.min.js +0.20% 92.79 kB 92.98 kB +0.21% 28.57 kB 28.63 kB

Generated by 🚫 dangerJS against dc85597

@acdlite acdlite marked this pull request as ready for review February 17, 2022 18:28
@acdlite acdlite merged commit 51c8411 into facebook:main Feb 17, 2022
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Feb 24, 2022
Summary:
This sync includes the following changes:
- **[4de99b3ca](facebook/react@4de99b3ca )**: fix getSnapshot warning when a selector returns NaN ([#23333](facebook/react#23333)) //<OGURA Daiki>//
- **[40eaa22d9](facebook/react@40eaa22d9 )**: Remove dependency on Offscreen Fiber updateQueue for React Cache ([#23229](facebook/react#23229)) //<Luna Ruan>//
- **[caf6d4707](facebook/react@caf6d4707 )**: Enable enableCache on Test Renderer native ([#23314](facebook/react#23314)) //<David McCabe>//
- **[419ccc2b1](facebook/react@419ccc2b1 )**: Land skipUnmountedBoundaries experiment ([#23322](facebook/react#23322)) //<Andrew Clark>//
- **[54f785bc5](facebook/react@54f785bc5 )**: Disallow comments as DOM containers for createRoot ([#23321](facebook/react#23321)) //<Andrew Clark>//
- **[e9aa9592c](facebook/react@e9aa9592c )**: change ReactBatchConfig.transition //<Luna Ruan>//
- **[51c8411d9](facebook/react@51c8411d9 )**: Log a recoverable error whenever hydration fails ([#23319](facebook/react#23319)) //<Andrew Clark>//
- **[79ed5e18f](facebook/react@79ed5e18f )**: Delete vestigial RetryAfterError logic ([#23312](facebook/react#23312)) //<Andrew Clark>//
- **[80059bb73](facebook/react@80059bb73 )**: Switch to client rendering if root receives update ([#23309](facebook/react#23309)) //<Andrew Clark>//
- **[f7f7ed089](facebook/react@f7f7ed089 )**: Allow suspending in the shell during hydration ([#23304](facebook/react#23304)) //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions 27b5699...4de99b3

jest_e2e[run_all_tests]

Reviewed By: rickhanlonii

Differential Revision: D34399162

fbshipit-source-id: 5c49e2bdcf63eb6a601cfa6a4e4b8f2e1f83e2dd
@gaearon gaearon mentioned this pull request Mar 29, 2022
zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022
There are several cases where hydration fails, server-rendered HTML is
discarded, and we fall back to client rendering. Whenever this happens,
we will now log an error with onRecoverableError, with a message
explaining why.

In some of these scenarios, this is not the only recoverable error that
is logged. For example, an error during hydration will cause hydration
to fail, which is itself an error. So we end up logging two separate
errors: the original error, and one that explains why hydration failed.

I've made sure that the original error always gets logged first, to
preserve the causal sequence.

Another thing we could do is aggregate the errors with the Error "cause"
feature and AggregateError. Since these are new-ish features in
JavaScript, we'd need a fallback behavior. I'll leave this for a
follow up.
Saadnajmi pushed a commit to Saadnajmi/react-native-macos that referenced this pull request Jan 15, 2023
Summary:
This sync includes the following changes:
- **[4de99b3ca](facebook/react@4de99b3ca )**: fix getSnapshot warning when a selector returns NaN ([facebook#23333](facebook/react#23333)) //<OGURA Daiki>//
- **[40eaa22d9](facebook/react@40eaa22d9 )**: Remove dependency on Offscreen Fiber updateQueue for React Cache ([facebook#23229](facebook/react#23229)) //<Luna Ruan>//
- **[caf6d4707](facebook/react@caf6d4707 )**: Enable enableCache on Test Renderer native ([facebook#23314](facebook/react#23314)) //<David McCabe>//
- **[419ccc2b1](facebook/react@419ccc2b1 )**: Land skipUnmountedBoundaries experiment ([facebook#23322](facebook/react#23322)) //<Andrew Clark>//
- **[54f785bc5](facebook/react@54f785bc5 )**: Disallow comments as DOM containers for createRoot ([facebook#23321](facebook/react#23321)) //<Andrew Clark>//
- **[e9aa9592c](facebook/react@e9aa9592c )**: change ReactBatchConfig.transition //<Luna Ruan>//
- **[51c8411d9](facebook/react@51c8411d9 )**: Log a recoverable error whenever hydration fails ([facebook#23319](facebook/react#23319)) //<Andrew Clark>//
- **[79ed5e18f](facebook/react@79ed5e18f )**: Delete vestigial RetryAfterError logic ([facebook#23312](facebook/react#23312)) //<Andrew Clark>//
- **[80059bb73](facebook/react@80059bb73 )**: Switch to client rendering if root receives update ([facebook#23309](facebook/react#23309)) //<Andrew Clark>//
- **[f7f7ed089](facebook/react@f7f7ed089 )**: Allow suspending in the shell during hydration ([facebook#23304](facebook/react#23304)) //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions 27b5699...4de99b3

jest_e2e[run_all_tests]

Reviewed By: rickhanlonii

Differential Revision: D34399162

fbshipit-source-id: 5c49e2bdcf63eb6a601cfa6a4e4b8f2e1f83e2dd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants