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

Use the Nearest Parent of an Errored Promise as its Owner #29814

Merged
merged 4 commits into from
Jun 11, 2024

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Jun 8, 2024

Stacked on #29807.

Conceptually the error's owner/task should ideally be captured when the Error constructor is called but neither console.createTask does this, nor do we override Error to capture our owner. So instead, we use the nearest parent as the owner/task of the error. This is usually the same thing when it's thrown from the same async component but not if you await a promise started from a different component/task.

Before this stack the "owner" and "task" of a Lazy that errors was the nearest Fiber but if the thing erroring is a Server Component, we need to get that as the owner from the inner most part of debugInfo.

To get the Task for that Server Component, we need to expose it on the ReactComponentInfo object. Unfortunately that makes the object not serializable so we need to special case this to exclude it from serialization. It gets restored again on the client.

Before (Shell):
Screenshot 2024-06-06 at 5 16 20 PM

After (App):
Screenshot 2024-06-08 at 12 29 23 AM

@sebmarkbage sebmarkbage requested review from gnoff and acdlite June 8, 2024 03:44
Copy link

vercel bot commented Jun 8, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 11, 2024 9:06pm

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jun 8, 2024
@react-sizebot
Copy link

react-sizebot commented Jun 8, 2024

Comparing: 2c959f1...adc2f78

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.js = 6.66 kB 6.66 kB = 1.82 kB 1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 497.80 kB 497.80 kB = 89.24 kB 89.24 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.67 kB 6.67 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 502.62 kB 502.62 kB = 89.94 kB 89.94 kB
facebook-www/ReactDOM-prod.classic.js = 597.56 kB 597.56 kB = 105.38 kB 105.38 kB
facebook-www/ReactDOM-prod.modern.js = 571.49 kB 571.49 kB = 101.27 kB 101.27 kB
test_utils/ReactAllWarnings.js Deleted 63.88 kB 0.00 kB Deleted 15.96 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
facebook-www/JSXDEVRuntime-dev.modern.js +0.95% 32.14 kB 32.44 kB +0.84% 7.53 kB 7.59 kB
facebook-www/JSXDEVRuntime-dev.classic.js +0.95% 32.26 kB 32.57 kB +0.83% 7.55 kB 7.61 kB
oss-experimental/react-server/cjs/react-server-flight.development.js +0.72% 90.73 kB 91.39 kB +0.66% 16.86 kB 16.97 kB
oss-stable-rc/react-server/cjs/react-server-flight.development.js +0.64% 78.81 kB 79.32 kB +0.80% 14.66 kB 14.78 kB
oss-stable-semver/react-server/cjs/react-server-flight.development.js +0.64% 78.81 kB 79.32 kB +0.80% 14.66 kB 14.78 kB
oss-stable/react-server/cjs/react-server-flight.development.js +0.64% 78.81 kB 79.32 kB +0.80% 14.66 kB 14.78 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.50% 130.72 kB 131.38 kB +0.44% 24.46 kB 24.57 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.49% 134.28 kB 134.94 kB +0.46% 25.02 kB 25.13 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.49% 134.91 kB 135.56 kB +0.46% 25.18 kB 25.30 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.48% 135.45 kB 136.10 kB +0.45% 25.23 kB 25.34 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.48% 135.60 kB 136.26 kB +0.45% 25.29 kB 25.40 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +0.48% 136.90 kB 137.56 kB +0.46% 25.41 kB 25.52 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.48% 137.07 kB 137.72 kB +0.46% 25.46 kB 25.58 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.48% 138.01 kB 138.67 kB +0.42% 25.67 kB 25.78 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.47% 138.16 kB 138.81 kB +0.43% 25.72 kB 25.83 kB
oss-stable-rc/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.42% 118.66 kB 119.16 kB +0.59% 22.14 kB 22.27 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.42% 118.66 kB 119.16 kB +0.59% 22.14 kB 22.27 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.42% 118.66 kB 119.16 kB +0.59% 22.14 kB 22.27 kB
facebook-www/React-dev.modern.js +0.42% 72.52 kB 72.82 kB +0.40% 15.95 kB 16.01 kB
facebook-www/React-dev.classic.js +0.42% 73.38 kB 73.68 kB +0.39% 16.08 kB 16.14 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.41% 122.37 kB 122.87 kB +0.41% 22.76 kB 22.85 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.41% 122.37 kB 122.87 kB +0.41% 22.76 kB 22.85 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.41% 122.37 kB 122.87 kB +0.41% 22.76 kB 22.85 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.41% 122.99 kB 123.50 kB +0.41% 22.94 kB 23.03 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.41% 122.99 kB 123.50 kB +0.41% 22.94 kB 23.03 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.41% 122.99 kB 123.50 kB +0.41% 22.94 kB 23.03 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.41% 123.20 kB 123.70 kB +0.43% 22.93 kB 23.03 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.41% 123.20 kB 123.70 kB +0.43% 22.93 kB 23.03 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.41% 123.20 kB 123.70 kB +0.43% 22.93 kB 23.03 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.41% 123.35 kB 123.85 kB +0.43% 23.00 kB 23.10 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.41% 123.35 kB 123.85 kB +0.43% 23.00 kB 23.10 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.41% 123.35 kB 123.85 kB +0.43% 23.00 kB 23.10 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +0.40% 124.84 kB 125.34 kB +0.42% 23.11 kB 23.21 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +0.40% 124.84 kB 125.34 kB +0.42% 23.11 kB 23.21 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +0.40% 124.84 kB 125.34 kB +0.42% 23.11 kB 23.21 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.40% 125.00 kB 125.51 kB +0.41% 23.17 kB 23.27 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.40% 125.00 kB 125.51 kB +0.41% 23.17 kB 23.27 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.40% 125.00 kB 125.51 kB +0.41% 23.17 kB 23.27 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.40% 125.95 kB 126.45 kB +0.40% 23.37 kB 23.47 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.40% 125.95 kB 126.45 kB +0.40% 23.37 kB 23.47 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.40% 125.95 kB 126.45 kB +0.40% 23.37 kB 23.47 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.40% 126.10 kB 126.60 kB +0.41% 23.44 kB 23.53 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.40% 126.10 kB 126.60 kB +0.41% 23.44 kB 23.53 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.40% 126.10 kB 126.60 kB +0.41% 23.44 kB 23.53 kB
test_utils/ReactAllWarnings.js Deleted 63.88 kB 0.00 kB Deleted 15.96 kB 0.00 kB

Generated by 🚫 dangerJS against adc2f78

for (let i = debugInfo.length - 1; i >= 0; i--) {
if (typeof debugInfo[i].stack === 'string') {
// Ideally we could get the Task from this object but we don't expose it
// from Flight since it's in a WeakMap so we use the
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

forgot to write the end of this comment

If this is happening on the server where the FlightClient generates objects
that will then be consumed again by the Flight server, we need to strip the
task out before serializing it since it's not serializable but it can be
restored from stack + owner.
Whether that nearest parent is a Server Component or the nearest Fiber.
@sebmarkbage sebmarkbage merged commit 383b2a1 into facebook:main Jun 11, 2024
44 checks passed
github-actions bot pushed a commit that referenced this pull request Jun 11, 2024
Stacked on #29807.

Conceptually the error's owner/task should ideally be captured when the
Error constructor is called but neither `console.createTask` does this,
nor do we override `Error` to capture our `owner`. So instead, we use
the nearest parent as the owner/task of the error. This is usually the
same thing when it's thrown from the same async component but not if you
await a promise started from a different component/task.

Before this stack the "owner" and "task" of a Lazy that errors was the
nearest Fiber but if the thing erroring is a Server Component, we need
to get that as the owner from the inner most part of debugInfo.

To get the Task for that Server Component, we need to expose it on the
ReactComponentInfo object. Unfortunately that makes the object not
serializable so we need to special case this to exclude it from
serialization. It gets restored again on the client.

Before (Shell):
<img width="813" alt="Screenshot 2024-06-06 at 5 16 20 PM"
src="https://github.com/facebook/react/assets/63648/7da2d4c9-539b-494e-ba63-1abdc58ff13c">

After (App):
<img width="811" alt="Screenshot 2024-06-08 at 12 29 23 AM"
src="https://github.com/facebook/react/assets/63648/dbf40bd7-c24d-4200-81a6-5018bef55f6d">

DiffTrain build for commit 383b2a1.
github-actions bot pushed a commit that referenced this pull request Jun 11, 2024
Stacked on #29807.

Conceptually the error's owner/task should ideally be captured when the
Error constructor is called but neither `console.createTask` does this,
nor do we override `Error` to capture our `owner`. So instead, we use
the nearest parent as the owner/task of the error. This is usually the
same thing when it's thrown from the same async component but not if you
await a promise started from a different component/task.

Before this stack the "owner" and "task" of a Lazy that errors was the
nearest Fiber but if the thing erroring is a Server Component, we need
to get that as the owner from the inner most part of debugInfo.

To get the Task for that Server Component, we need to expose it on the
ReactComponentInfo object. Unfortunately that makes the object not
serializable so we need to special case this to exclude it from
serialization. It gets restored again on the client.

Before (Shell):
<img width="813" alt="Screenshot 2024-06-06 at 5 16 20 PM"
src="https://github.com/facebook/react/assets/63648/7da2d4c9-539b-494e-ba63-1abdc58ff13c">

After (App):
<img width="811" alt="Screenshot 2024-06-08 at 12 29 23 AM"
src="https://github.com/facebook/react/assets/63648/dbf40bd7-c24d-4200-81a6-5018bef55f6d">

DiffTrain build for [383b2a1](383b2a1)
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