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

[Flight] Override prepareStackTrace when reading stacks #29740

Merged
merged 1 commit into from
Jun 5, 2024

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Jun 3, 2024

This lets us ensure that we use the original V8 format and it lets us skip source mapping. Source mapping every call can be expensive since we do it eagerly for server components even if an error doesn't happen.

In the case of an error being thrown we don't actually always do this in practice because if a try/catch before us touches it or if something in onError touches it (which the default console.error does), it has already been initialized. So we have to be resilient to thrown errors having other formats.

These are not as perf sensitive since something actually threw but if you want better perf in these cases, you can simply do something like onError(error) { console.error(error.message) } instead.

The server has to be aware whether it's looking up original or compiled output. I currently use the file:// check to determine if it's referring to a source mapped file or compiled file in the fixture. A bundled app can more easily check if it's a bundle or not.

This lets us ensure that we use the original V8 format and it lets us skip
source mapping. Source mapping every call can be expensive since we do it
eagerly even if an error doesn't happen.

In the case of an error being thrown we don't actually always do this in
practice because if a try/catch before us touches it or if something in
onError touches it (which the default console.error does), it has already
been initialized. So we have to be resilient to thrown errors having other
formats.

These are not as perf sensitive since something actually threw but if you
want better perf in these cases, you can simply do something like
`onError(error) { console.error(error.message) }` instead.

The server has to be aware whether it's looking up original or compiled
output. I currently use the file:// check to determine if it's referring to a
source mapped file or compiled file.
@sebmarkbage sebmarkbage requested a review from eps1lon June 3, 2024 19:09
Copy link

vercel bot commented Jun 3, 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 3, 2024 7:12pm

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jun 3, 2024
@sebmarkbage
Copy link
Collaborator Author

@unstubbable This might help improve your RSC rendering performance because it no longer applies the source maps eagerly.

@react-sizebot
Copy link

Comparing: ba099e4...dff2c39

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 +0.05% 1.82 kB 1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 496.48 kB 496.48 kB = 88.87 kB 88.87 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 = 501.30 kB 501.30 kB = 89.56 kB 89.56 kB
facebook-www/ReactDOM-prod.classic.js = 593.97 kB 593.97 kB = 104.48 kB 104.48 kB
facebook-www/ReactDOM-prod.modern.js = 570.35 kB 570.35 kB = 100.89 kB 100.89 kB
test_utils/ReactAllWarnings.js Deleted 63.65 kB 0.00 kB Deleted 15.90 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-stable-semver/react-server/cjs/react-server-flight.development.js +0.91% 108.97 kB 109.96 kB +1.47% 24.05 kB 24.40 kB
oss-stable/react-server/cjs/react-server-flight.development.js +0.91% 108.97 kB 109.96 kB +1.47% 24.05 kB 24.40 kB
oss-experimental/react-server/cjs/react-server-flight.development.js +0.82% 122.03 kB 123.04 kB +1.20% 26.94 kB 27.27 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.61% 161.34 kB 162.33 kB +1.03% 35.48 kB 35.84 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.61% 161.34 kB 162.33 kB +1.03% 35.48 kB 35.84 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.59% 166.93 kB 167.92 kB +0.98% 36.68 kB 37.04 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.59% 166.93 kB 167.92 kB +0.98% 36.68 kB 37.04 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.59% 167.63 kB 168.62 kB +0.97% 36.91 kB 37.27 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.59% 167.63 kB 168.62 kB +0.97% 36.91 kB 37.27 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.59% 168.17 kB 169.16 kB +0.95% 36.96 kB 37.31 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.59% 168.17 kB 169.16 kB +0.95% 36.96 kB 37.31 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.59% 168.35 kB 169.34 kB +0.95% 37.02 kB 37.37 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.59% 168.35 kB 169.34 kB +0.95% 37.02 kB 37.37 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +0.59% 169.22 kB 170.21 kB +0.99% 36.91 kB 37.28 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +0.59% 169.22 kB 170.21 kB +0.99% 36.91 kB 37.28 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.58% 169.40 kB 170.39 kB +0.99% 36.97 kB 37.34 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.58% 169.40 kB 170.39 kB +0.99% 36.97 kB 37.34 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.58% 171.86 kB 172.85 kB +0.96% 37.71 kB 38.07 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.58% 171.86 kB 172.85 kB +0.96% 37.71 kB 38.07 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.58% 172.04 kB 173.03 kB +0.97% 37.78 kB 38.15 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.58% 172.04 kB 173.03 kB +0.97% 37.78 kB 38.15 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.57% 175.06 kB 176.07 kB +0.86% 38.63 kB 38.96 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.56% 179.99 kB 181.00 kB +0.84% 39.59 kB 39.92 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.56% 180.69 kB 181.70 kB +0.83% 39.82 kB 40.15 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.55% 181.91 kB 182.92 kB +0.81% 40.11 kB 40.43 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.55% 182.09 kB 183.10 kB +0.81% 40.18 kB 40.50 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.unbundled.development.js +0.55% 182.93 kB 183.94 kB +0.82% 40.06 kB 40.39 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.55% 183.12 kB 184.12 kB +0.82% 40.12 kB 40.45 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.54% 185.57 kB 186.58 kB +0.81% 40.87 kB 41.20 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.54% 185.75 kB 186.76 kB +0.81% 40.95 kB 41.28 kB
test_utils/ReactAllWarnings.js Deleted 63.65 kB 0.00 kB Deleted 15.90 kB 0.00 kB

Generated by 🚫 dangerJS against dff2c39

unstubbable added a commit to unstubbable/next.js that referenced this pull request Jun 3, 2024
@unstubbable
Copy link
Contributor

unstubbable commented Jun 3, 2024

Awesome, thanks for the quick turnaround! I've tested the fix in Next.js, and can confirm that it completely fixes the observed performance regression in Node 18 (Node 20 was fine).

@eps1lon eps1lon merged commit 1df34bd into facebook:main Jun 5, 2024
40 checks passed
github-actions bot pushed a commit that referenced this pull request Jun 5, 2024
This lets us ensure that we use the original V8 format and it lets us
skip source mapping. Source mapping every call can be expensive since we
do it eagerly for server components even if an error doesn't happen.

In the case of an error being thrown we don't actually always do this in
practice because if a try/catch before us touches it or if something in
onError touches it (which the default console.error does), it has
already been initialized. So we have to be resilient to thrown errors
having other formats.

These are not as perf sensitive since something actually threw but if
you want better perf in these cases, you can simply do something like
`onError(error) { console.error(error.message) }` instead.

The server has to be aware whether it's looking up original or compiled
output. I currently use the file:// check to determine if it's referring
to a source mapped file or compiled file in the fixture. A bundled app
can more easily check if it's a bundle or not.

DiffTrain build for commit 1df34bd.
sebmarkbage added a commit that referenced this pull request Jun 7, 2024
Stacked on #29740.

Before:

<img width="719" alt="Screenshot 2024-06-02 at 11 51 20 AM"
src="https://github.com/facebook/react/assets/63648/8f79fa82-2474-4583-894e-a2329e9a6304">

After (updated with my patches to Chrome):

<img width="813" alt="Screenshot 2024-06-06 at 5 16 20 PM"
src="https://github.com/facebook/react/assets/63648/bcc4f52f-e0ac-4708-ac2b-9629acdff705">

Sources panel after:

<img width="1188" alt="Screenshot 2024-06-06 at 5 14 21 PM"
src="https://github.com/facebook/react/assets/63648/2c673fac-d32d-42e4-8fac-bb63704e4b7f">

The fake eval file is now under "React" and the real file is now under
`file://`
github-actions bot pushed a commit that referenced this pull request Jun 7, 2024
Stacked on #29740.

Before:

<img width="719" alt="Screenshot 2024-06-02 at 11 51 20 AM"
src="https://github.com/facebook/react/assets/63648/8f79fa82-2474-4583-894e-a2329e9a6304">

After (updated with my patches to Chrome):

<img width="813" alt="Screenshot 2024-06-06 at 5 16 20 PM"
src="https://github.com/facebook/react/assets/63648/bcc4f52f-e0ac-4708-ac2b-9629acdff705">

Sources panel after:

<img width="1188" alt="Screenshot 2024-06-06 at 5 14 21 PM"
src="https://github.com/facebook/react/assets/63648/2c673fac-d32d-42e4-8fac-bb63704e4b7f">

The fake eval file is now under "React" and the real file is now under
`file://`

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

5 participants