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

[Fizz] Fix Client Render after Postpone #27905

Merged
merged 2 commits into from
Jan 9, 2024

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Jan 9, 2024

If we end up client rendering a boundary due to an error after we have already injected a postponed hole in that boundary we'll end up trying to target a missing segment. Since we never insert segments for an already errored boundary into the HTML. Normally an errored prerender wouldn't be used but if it is, such as if it was an intentional client error it triggers this case. Those should really be replaced with postpones though.

This is a bit annoying since we eagerly build up the postponed path. I took the easy route here and just cleared out the suspense boundary itself from having any postponed slots. However, this still creates an unnecessary replay path along the way to the boundary. We could probably walk the path and remove any empty parent nodes.

What is worse is that if this is the only thing that postponed, we'd still generate a postponed state even though there's actually nothing to resume. Since this is a bit of an edge case already maybe it's fine.

In my test I added a check for the error event on window since this error only surfaces by throwing an ignored error. We should really do that globally for all tests. Our tests should fail by default if there's an error logged to the window.

This can trigger errors due to invalid injected scripts but doesn't actually
fail anything else. It's a noop.
@sebmarkbage sebmarkbage requested a review from gnoff January 9, 2024 03:41
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jan 9, 2024
@react-sizebot
Copy link

react-sizebot commented Jan 9, 2024

Comparing: f1039be...01d4d7a

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 = 176.11 kB 176.11 kB = 54.85 kB 54.85 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 178.21 kB 178.21 kB = 55.49 kB 55.49 kB
facebook-www/ReactDOM-prod.classic.js = 571.71 kB 571.71 kB = 100.50 kB 100.50 kB
facebook-www/ReactDOM-prod.modern.js = 555.57 kB 555.57 kB = 97.61 kB 97.61 kB
test_utils/ReactAllWarnings.js Deleted 67.55 kB 0.00 kB Deleted 16.54 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-server/cjs/react-server.production.js +0.59% 165.88 kB 166.87 kB +0.61% 38.23 kB 38.46 kB
oss-stable-semver/react-server/cjs/react-server.production.js +0.59% 155.31 kB 156.22 kB +0.65% 36.38 kB 36.61 kB
oss-stable/react-server/cjs/react-server.production.js +0.59% 155.31 kB 156.22 kB +0.65% 36.38 kB 36.61 kB
oss-experimental/react-server/cjs/react-server.development.js +0.47% 209.35 kB 210.33 kB +0.43% 48.71 kB 48.92 kB
oss-stable-semver/react-server/cjs/react-server.production.min.js +0.47% 38.02 kB 38.19 kB +0.58% 12.12 kB 12.19 kB
oss-stable/react-server/cjs/react-server.production.min.js +0.47% 38.02 kB 38.19 kB +0.58% 12.12 kB 12.19 kB
oss-stable-semver/react-server/cjs/react-server.development.js +0.46% 198.82 kB 199.73 kB +0.54% 46.83 kB 47.09 kB
oss-stable/react-server/cjs/react-server.development.js +0.46% 198.82 kB 199.73 kB +0.54% 46.83 kB 47.09 kB
oss-experimental/react-server/cjs/react-server.production.min.js +0.43% 40.98 kB 41.16 kB +0.36% 12.86 kB 12.91 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.production.js +0.30% 326.97 kB 327.96 kB +0.34% 70.62 kB 70.86 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.js +0.30% 328.77 kB 329.76 kB +0.34% 71.06 kB 71.31 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.js +0.29% 335.02 kB 336.01 kB +0.33% 72.97 kB 73.21 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.js +0.29% 337.44 kB 338.42 kB +0.34% 72.18 kB 72.42 kB
oss-experimental/react-dom/cjs/react-dom-server.node.production.js +0.29% 339.86 kB 340.84 kB +0.33% 72.63 kB 72.87 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.production.js +0.29% 315.81 kB 316.72 kB +0.35% 68.61 kB 68.85 kB
oss-stable/react-dom/cjs/react-dom-server.bun.production.js +0.29% 315.84 kB 316.75 kB +0.35% 68.64 kB 68.88 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.production.js +0.29% 342.02 kB 343.01 kB +0.33% 73.63 kB 73.88 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.js +0.29% 317.32 kB 318.23 kB +0.32% 69.33 kB 69.55 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.js +0.29% 317.35 kB 318.26 kB +0.32% 69.36 kB 69.58 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.production.js +0.29% 317.92 kB 318.83 kB +0.32% 69.19 kB 69.42 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.production.js +0.29% 317.94 kB 318.85 kB +0.32% 69.22 kB 69.44 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.js +0.28% 319.97 kB 320.88 kB +0.35% 69.38 kB 69.63 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.js +0.28% 320.00 kB 320.91 kB +0.35% 69.41 kB 69.65 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.production.js +0.28% 321.60 kB 322.51 kB +0.34% 70.67 kB 70.91 kB
oss-stable/react-dom/cjs/react-dom-server.edge.production.js +0.28% 321.62 kB 322.53 kB +0.34% 70.69 kB 70.93 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.js +0.28% 323.86 kB 324.77 kB +0.34% 70.96 kB 71.21 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.js +0.28% 323.88 kB 324.79 kB +0.34% 70.99 kB 71.23 kB
facebook-www/ReactDOMServer-prod.modern.js +0.26% 198.46 kB 198.98 kB +0.24% 35.97 kB 36.05 kB
facebook-www/ReactDOMServerStreaming-prod.modern.js +0.26% 202.28 kB 202.80 kB +0.24% 37.16 kB 37.24 kB
facebook-www/ReactDOMServer-prod.classic.js +0.25% 200.87 kB 201.37 kB +0.25% 36.32 kB 36.41 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.development.js +0.23% 425.17 kB 426.15 kB +0.23% 94.63 kB 94.85 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.development.js +0.23% 451.59 kB 452.62 kB +0.23% 97.58 kB 97.80 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.23% 431.58 kB 432.56 kB +0.22% 96.61 kB 96.82 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.development.js +0.23% 433.44 kB 434.42 kB +0.22% 97.07 kB 97.28 kB
oss-experimental/react-dom/cjs/react-dom-server.node.development.js +0.22% 438.76 kB 439.74 kB +0.22% 96.92 kB 97.13 kB
oss-experimental/react-dom/umd/react-dom-server.browser.development.js +0.22% 460.73 kB 461.76 kB +0.23% 98.73 kB 98.96 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +0.22% 79.97 kB 80.15 kB +0.25% 24.28 kB 24.34 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.development.js +0.22% 440.33 kB 441.31 kB +0.22% 97.70 kB 97.91 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +0.22% 80.00 kB 80.18 kB +0.25% 24.30 kB 24.36 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.development.js +0.22% 440.91 kB 441.89 kB +0.22% 97.83 kB 98.04 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.production.min.js +0.22% 80.06 kB 80.24 kB +0.32% 24.68 kB 24.76 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.production.min.js +0.22% 80.09 kB 80.26 kB +0.30% 24.70 kB 24.78 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.min.js +0.22% 80.92 kB 81.10 kB +0.28% 25.13 kB 25.20 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.min.js +0.22% 80.94 kB 81.12 kB +0.28% 25.15 kB 25.22 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.development.js +0.22% 413.35 kB 414.26 kB +0.27% 92.46 kB 92.71 kB
oss-stable/react-dom/cjs/react-dom-server.bun.development.js +0.22% 413.38 kB 414.28 kB +0.27% 92.49 kB 92.74 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.production.min.js +0.22% 80.99 kB 81.17 kB +0.28% 25.49 kB 25.56 kB
oss-stable/react-dom/umd/react-dom-server.browser.production.min.js +0.22% 81.02 kB 81.20 kB +0.27% 25.51 kB 25.58 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.development.js +0.22% 438.70 kB 439.65 kB +0.28% 95.58 kB 95.85 kB
oss-stable/react-dom/umd/react-dom-server.browser.development.js +0.22% 438.73 kB 439.68 kB +0.28% 95.61 kB 95.88 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.development.js +0.22% 439.28 kB 440.23 kB +0.28% 95.42 kB 95.69 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.development.js +0.22% 439.31 kB 440.26 kB +0.28% 95.45 kB 95.71 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.development.js +0.22% 418.16 kB 419.06 kB +0.27% 93.53 kB 93.78 kB
oss-stable/react-dom/cjs/react-dom-server.node.development.js +0.22% 418.18 kB 419.09 kB +0.27% 93.55 kB 93.81 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.development.js +0.22% 419.20 kB 420.10 kB +0.27% 94.59 kB 94.85 kB
oss-stable/react-dom/cjs/react-dom-server.browser.development.js +0.22% 419.22 kB 420.13 kB +0.27% 94.62 kB 94.87 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.22% 419.76 kB 420.67 kB +0.27% 94.43 kB 94.69 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.development.js +0.22% 419.78 kB 420.69 kB +0.26% 94.73 kB 94.98 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.22% 419.79 kB 420.69 kB +0.27% 94.46 kB 94.72 kB
oss-stable/react-dom/cjs/react-dom-server.edge.development.js +0.22% 419.81 kB 420.71 kB +0.27% 94.76 kB 95.01 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.production.min.js +0.21% 82.81 kB 82.99 kB +0.27% 25.45 kB 25.52 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.development.js +0.21% 421.62 kB 422.52 kB +0.27% 94.90 kB 95.15 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.development.js +0.21% 421.64 kB 422.55 kB +0.27% 94.93 kB 95.18 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.production.min.js +0.21% 82.53 kB 82.71 kB +0.23% 24.96 kB 25.02 kB
oss-stable/react-dom/cjs/react-dom-server.bun.production.min.js +0.21% 82.56 kB 82.73 kB +0.23% 24.99 kB 25.05 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +0.21% 82.73 kB 82.91 kB +0.31% 25.06 kB 25.14 kB
facebook-www/ReactDOMServerStreaming-dev.modern.js +0.21% 466.03 kB 467.02 kB +0.27% 94.78 kB 95.03 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.min.js +0.21% 84.12 kB 84.29 kB +0.23% 25.95 kB 26.01 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.min.js +0.21% 84.14 kB 84.32 kB +0.23% 25.98 kB 26.04 kB
facebook-www/ReactDOMServer-dev.modern.js +0.21% 473.37 kB 474.37 kB +0.26% 96.42 kB 96.67 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.production.min.js +0.21% 85.65 kB 85.83 kB +0.25% 25.85 kB 25.92 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.min.js +0.21% 85.57 kB 85.74 kB +0.27% 26.18 kB 26.25 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.min.js +0.21% 85.59 kB 85.77 kB +0.26% 26.20 kB 26.27 kB
facebook-www/ReactDOMServer-dev.classic.js +0.21% 481.83 kB 482.82 kB +0.25% 98.08 kB 98.32 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.production.min.js +0.21% 85.99 kB 86.17 kB +0.28% 26.80 kB 26.87 kB
oss-stable/react-dom/cjs/react-dom-server.edge.production.min.js +0.21% 86.02 kB 86.19 kB +0.27% 26.82 kB 26.90 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js +0.20% 87.18 kB 87.36 kB +0.24% 26.60 kB 26.67 kB
oss-experimental/react-dom/umd/react-dom-server.browser.production.min.js +0.20% 87.24 kB 87.42 kB +0.23% 26.92 kB 26.98 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.min.js +0.20% 88.69 kB 88.86 kB +0.23% 26.99 kB 27.05 kB
test_utils/ReactAllWarnings.js Deleted 67.55 kB 0.00 kB Deleted 16.54 kB 0.00 kB

Generated by 🚫 dangerJS against 01d4d7a

If we have already added resumable slots to a boundary we need to undo that
when it errors later.

Ideally, we'd remove the whole parent path in this case. If this is the
only thing that postpones, we incorrectly think there's resumable
slots.
@sebmarkbage sebmarkbage merged commit f9dddcb into facebook:main Jan 9, 2024
36 checks passed
github-actions bot pushed a commit that referenced this pull request Jan 9, 2024
If we end up client rendering a boundary due to an error after we have
already injected a postponed hole in that boundary we'll end up trying
to target a missing segment. Since we never insert segments for an
already errored boundary into the HTML. Normally an errored prerender
wouldn't be used but if it is, such as if it was an intentional client
error it triggers this case. Those should really be replaced with
postpones though.

This is a bit annoying since we eagerly build up the postponed path. I
took the easy route here and just cleared out the suspense boundary
itself from having any postponed slots. However, this still creates an
unnecessary replay path along the way to the boundary. We could probably
walk the path and remove any empty parent nodes.

What is worse is that if this is the only thing that postponed, we'd
still generate a postponed state even though there's actually nothing to
resume. Since this is a bit of an edge case already maybe it's fine.

In my test I added a check for the `error` event on `window` since this
error only surfaces by throwing an ignored error. We should really do
that globally for all tests. Our tests should fail by default if there's
an error logged to the window.

DiffTrain build for [f9dddcb](f9dddcb)
acdlite added a commit to vercel/next.js that referenced this pull request Jan 14, 2024
Includes a fix for useOptimistic.

React upstream changes:

- facebook/react#27936
- facebook/react#27924
- facebook/react#27930
- facebook/react#27923
- facebook/react#27922
- facebook/react#27917
- facebook/react#27916
- facebook/react#27918
- facebook/react#27919
- facebook/react#27914
- facebook/react#27911
- facebook/react#27909
- facebook/react#27907
- facebook/react#27906
- facebook/react#27905

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->


Closes NEXT-2096
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
If we end up client rendering a boundary due to an error after we have
already injected a postponed hole in that boundary we'll end up trying
to target a missing segment. Since we never insert segments for an
already errored boundary into the HTML. Normally an errored prerender
wouldn't be used but if it is, such as if it was an intentional client
error it triggers this case. Those should really be replaced with
postpones though.

This is a bit annoying since we eagerly build up the postponed path. I
took the easy route here and just cleared out the suspense boundary
itself from having any postponed slots. However, this still creates an
unnecessary replay path along the way to the boundary. We could probably
walk the path and remove any empty parent nodes.

What is worse is that if this is the only thing that postponed, we'd
still generate a postponed state even though there's actually nothing to
resume. Since this is a bit of an edge case already maybe it's fine.

In my test I added a check for the `error` event on `window` since this
error only surfaces by throwing an ignored error. We should really do
that globally for all tests. Our tests should fail by default if there's
an error logged to the window.
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
If we end up client rendering a boundary due to an error after we have
already injected a postponed hole in that boundary we'll end up trying
to target a missing segment. Since we never insert segments for an
already errored boundary into the HTML. Normally an errored prerender
wouldn't be used but if it is, such as if it was an intentional client
error it triggers this case. Those should really be replaced with
postpones though.

This is a bit annoying since we eagerly build up the postponed path. I
took the easy route here and just cleared out the suspense boundary
itself from having any postponed slots. However, this still creates an
unnecessary replay path along the way to the boundary. We could probably
walk the path and remove any empty parent nodes.

What is worse is that if this is the only thing that postponed, we'd
still generate a postponed state even though there's actually nothing to
resume. Since this is a bit of an edge case already maybe it's fine.

In my test I added a check for the `error` event on `window` since this
error only surfaces by throwing an ignored error. We should really do
that globally for all tests. Our tests should fail by default if there's
an error logged to the window.

DiffTrain build for commit f9dddcb.
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.

None yet

4 participants