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] Ship DEV-only enableServerComponentLogs flag in Stable/Canary #30847

Merged
merged 1 commit into from
Aug 30, 2024

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Aug 29, 2024

To recap. This only affects DEV and RSC. It patches console on the server in DEV (similar to how React DevTools already does and what we did for the double logging). Then replays those logs with a [Server] badge on the client so you don't need a server terminal open.

This has been on for over 6 months now in our experimental channel and we've had a lot of coverage in Next.js due to various experimental flags like taint and ppr.

It's non-invasive in that even if something throws we just serialize that as an unknown value.

The main feedback we've gotten was:

  • The serialization depth wasn't deep enough which I addressed in [Flight] Serialize rate limited objects in console logs as marker an increase limit #30294 and haven't really had any issues since. This could still be an issue or the inverse that you serialize too many logs that are also too deep. This is not so much an issue with intentional logging and things like accidental errors don't typically have unbounded arguments (e.g. React errors are always string arguments). The ideal would be some way to retain objects and then load them on-demand but that needs more plumbing. Which can be later.
  • The other was that double logging on the server is annoying if the same terminal does both the RSC render and SSR render which was addressed in [Flight] Add option to replay console logs or not #30207. It is now off by default in node/edge-builds of the client, on by default in browser builds. With the replayConsole option to either opt-in or out.

We've reached a good spot now I think.

These are better with enableOwnerStacks but that's a separate track and not needed.

The only thing to document here, other than maybe that we're doing it, is the replayConsole option but that's part of the RSC renderers that themselves are not documented so nowhere to document it.

Copy link

vercel bot commented Aug 29, 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 Aug 29, 2024 7:06pm

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

Comparing: 61739a8...0557333

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.68 kB 6.68 kB = 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 501.40 kB 501.40 kB = 89.99 kB 89.99 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB +0.05% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 508.52 kB 508.52 kB = 91.16 kB 91.16 kB
facebook-www/ReactDOM-prod.classic.js = 596.16 kB 596.16 kB = 105.70 kB 105.70 kB
facebook-www/ReactDOM-prod.modern.js = 572.44 kB 572.44 kB = 101.88 kB 101.88 kB
oss-stable-rc/react-server/cjs/react-server-flight.development.js +3.38% 89.11 kB 92.12 kB +3.46% 16.37 kB 16.93 kB
oss-stable-semver/react-server/cjs/react-server-flight.development.js +3.38% 89.11 kB 92.12 kB +3.46% 16.37 kB 16.93 kB
oss-stable/react-server/cjs/react-server-flight.development.js +3.38% 89.11 kB 92.12 kB +3.46% 16.37 kB 16.93 kB
oss-stable-rc/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +2.27% 128.93 kB 131.86 kB +2.48% 23.97 kB 24.57 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +2.27% 128.93 kB 131.86 kB +2.48% 23.97 kB 24.57 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +2.27% 128.93 kB 131.86 kB +2.48% 23.97 kB 24.57 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +2.25% 132.66 kB 135.65 kB +2.47% 24.61 kB 25.21 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +2.25% 132.66 kB 135.65 kB +2.47% 24.61 kB 25.21 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +2.25% 132.66 kB 135.65 kB +2.47% 24.61 kB 25.21 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +2.25% 133.10 kB 136.09 kB +2.47% 24.71 kB 25.32 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +2.25% 133.10 kB 136.09 kB +2.47% 24.71 kB 25.32 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +2.25% 133.10 kB 136.09 kB +2.47% 24.71 kB 25.32 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +2.20% 134.00 kB 136.95 kB +2.36% 24.84 kB 25.42 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +2.20% 134.00 kB 136.95 kB +2.36% 24.84 kB 25.42 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +2.20% 134.00 kB 136.95 kB +2.36% 24.84 kB 25.42 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +2.20% 134.03 kB 136.98 kB +2.35% 24.84 kB 25.43 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +2.20% 134.03 kB 136.98 kB +2.35% 24.84 kB 25.43 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +2.20% 134.03 kB 136.98 kB +2.35% 24.84 kB 25.43 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +2.17% 135.28 kB 138.22 kB +2.35% 24.95 kB 25.53 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +2.17% 135.28 kB 138.22 kB +2.35% 24.95 kB 25.53 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +2.17% 135.28 kB 138.22 kB +2.35% 24.95 kB 25.53 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +2.15% 136.38 kB 139.32 kB +2.32% 25.23 kB 25.82 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +2.15% 136.38 kB 139.32 kB +2.32% 25.23 kB 25.82 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +2.15% 136.38 kB 139.32 kB +2.32% 25.23 kB 25.82 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +2.15% 136.42 kB 139.35 kB +2.32% 25.24 kB 25.82 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +2.15% 136.42 kB 139.35 kB +2.32% 25.24 kB 25.82 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +2.15% 136.42 kB 139.35 kB +2.32% 25.24 kB 25.82 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable-rc/react-server/cjs/react-server-flight.development.js +3.38% 89.11 kB 92.12 kB +3.46% 16.37 kB 16.93 kB
oss-stable-semver/react-server/cjs/react-server-flight.development.js +3.38% 89.11 kB 92.12 kB +3.46% 16.37 kB 16.93 kB
oss-stable/react-server/cjs/react-server-flight.development.js +3.38% 89.11 kB 92.12 kB +3.46% 16.37 kB 16.93 kB
oss-stable-rc/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +2.27% 128.93 kB 131.86 kB +2.48% 23.97 kB 24.57 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +2.27% 128.93 kB 131.86 kB +2.48% 23.97 kB 24.57 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +2.27% 128.93 kB 131.86 kB +2.48% 23.97 kB 24.57 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +2.25% 132.66 kB 135.65 kB +2.47% 24.61 kB 25.21 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +2.25% 132.66 kB 135.65 kB +2.47% 24.61 kB 25.21 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +2.25% 132.66 kB 135.65 kB +2.47% 24.61 kB 25.21 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +2.25% 133.10 kB 136.09 kB +2.47% 24.71 kB 25.32 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +2.25% 133.10 kB 136.09 kB +2.47% 24.71 kB 25.32 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +2.25% 133.10 kB 136.09 kB +2.47% 24.71 kB 25.32 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +2.20% 134.00 kB 136.95 kB +2.36% 24.84 kB 25.42 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +2.20% 134.00 kB 136.95 kB +2.36% 24.84 kB 25.42 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +2.20% 134.00 kB 136.95 kB +2.36% 24.84 kB 25.42 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +2.20% 134.03 kB 136.98 kB +2.35% 24.84 kB 25.43 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +2.20% 134.03 kB 136.98 kB +2.35% 24.84 kB 25.43 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +2.20% 134.03 kB 136.98 kB +2.35% 24.84 kB 25.43 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +2.17% 135.28 kB 138.22 kB +2.35% 24.95 kB 25.53 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +2.17% 135.28 kB 138.22 kB +2.35% 24.95 kB 25.53 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +2.17% 135.28 kB 138.22 kB +2.35% 24.95 kB 25.53 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +2.15% 136.38 kB 139.32 kB +2.32% 25.23 kB 25.82 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +2.15% 136.38 kB 139.32 kB +2.32% 25.23 kB 25.82 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +2.15% 136.38 kB 139.32 kB +2.32% 25.23 kB 25.82 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +2.15% 136.42 kB 139.35 kB +2.32% 25.24 kB 25.82 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +2.15% 136.42 kB 139.35 kB +2.32% 25.24 kB 25.82 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +2.15% 136.42 kB 139.35 kB +2.32% 25.24 kB 25.82 kB

Generated by 🚫 dangerJS against 6d79962

Copy link
Collaborator

@eps1lon eps1lon left a comment

Choose a reason for hiding this comment

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

Should we enable it based on __VARIANT__ in www-dynamic so that we have some coverage for the old behavior until we clean it up?

I thought it was still double logging on the server terminal in Next.js so I'd like to double check.

@sebmarkbage
Copy link
Collaborator Author

Should we enable it based on VARIANT in www-dynamic so that we have some coverage for the old behavior until we clean it up?

I was just going to clean it up pretty soon after anyway since it's on everywhere.

@eps1lon
Copy link
Collaborator

eps1lon commented Aug 30, 2024

Makes sense. It's been on in vercel.com for a while now.

@sebmarkbage
Copy link
Collaborator Author

Can bring up for further discussion if needed but this has a simple opt-out so it's not really that invasive.

@sebmarkbage sebmarkbage merged commit 4f60494 into facebook:main Aug 30, 2024
184 checks passed
gnoff pushed a commit to vercel/next.js that referenced this pull request Sep 12, 2024
**breaking change for canary users: Bumps peer dependency of React from
`19.0.0-rc-7771d3a7-20240827` to `19.0.0-rc-94e652d5-20240912`**

[diff
facebook/react@7771d3a7...94e652d5](facebook/react@7771d3a...94e652d)

<details>
<summary>React upstream changes</summary>

- facebook/react#30952
- facebook/react#30950
- facebook/react#30946
- facebook/react#30934
- facebook/react#30947
- facebook/react#30945
- facebook/react#30938
- facebook/react#30936
- facebook/react#30879
- facebook/react#30888
- facebook/react#30931
- facebook/react#30930
- facebook/react#30832
- facebook/react#30929
- facebook/react#30926
- facebook/react#30925
- facebook/react#30905
- facebook/react#30900
- facebook/react#30910
- facebook/react#30906
- facebook/react#30899
- facebook/react#30919
- facebook/react#30708
- facebook/react#30907
- facebook/react#30897
- facebook/react#30896
- facebook/react#30895
- facebook/react#30887
- facebook/react#30889
- facebook/react#30893
- facebook/react#30892
- facebook/react#30891
- facebook/react#30882
- facebook/react#30881
- facebook/react#30870
- facebook/react#30849
- facebook/react#30878
- facebook/react#30865
- facebook/react#30869
- facebook/react#30875
- facebook/react#30800
- facebook/react#30762
- facebook/react#30831
- facebook/react#30866
- facebook/react#30853
- facebook/react#30850
- facebook/react#30847
- facebook/react#30842
- facebook/react#30837
- facebook/react#30848
- facebook/react#30844
- facebook/react#30839
- facebook/react#30802
- facebook/react#30841
- facebook/react#30827
- facebook/react#30826
- facebook/react#30825
- facebook/react#30824
- facebook/react#30840
- facebook/react#30838
- facebook/react#30836
- facebook/react#30819
- facebook/react#30816
- facebook/react#30814
- facebook/react#30813
- facebook/react#30812
- facebook/react#30811

</details>

---------

Co-authored-by: vercel-release-bot <[email protected]>
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