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] Add option to replay console logs or not #30207

Merged
merged 1 commit into from
Jul 4, 2024

Conversation

sebmarkbage
Copy link
Collaborator

Defaults to true in browser builds, otherwise defaults to false. The assumption is that the server logs will already contain a log from the original Flight server.

We currently always replay console logs but this leads to duplicates on the server by default when you use SSR, because the Flight Client on the server replays the logs. This can be nice since those logs gets badged. It can also be nice if they're running in separate servers but when they're logging to the same stream it's annoying. Which is really the typical set up so we should just make that the default but leave it configurable.

@sebmarkbage sebmarkbage requested review from gnoff and eps1lon July 4, 2024 03:48
Copy link

vercel bot commented Jul 4, 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 Jul 4, 2024 3:59am

@react-sizebot
Copy link

react-sizebot commented Jul 4, 2024

Comparing: 15ca8b6...0a811b4

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 +0.05% 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 497.99 kB 497.99 kB = 89.27 kB 89.27 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 = 502.81 kB 502.81 kB = 89.98 kB 89.98 kB
facebook-www/ReactDOM-prod.classic.js = 597.08 kB 597.08 kB = 105.33 kB 105.33 kB
facebook-www/ReactDOM-prod.modern.js = 571.42 kB 571.42 kB = 101.27 kB 101.27 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +8.70% 1.86 kB 2.02 kB +2.64% 0.72 kB 0.74 kB
oss-stable-rc/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +8.70% 1.86 kB 2.02 kB +2.64% 0.72 kB 0.74 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +8.70% 1.86 kB 2.02 kB +2.64% 0.72 kB 0.74 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +8.70% 1.86 kB 2.02 kB +2.64% 0.72 kB 0.74 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.js +7.48% 1.63 kB 1.75 kB +2.84% 0.67 kB 0.69 kB
oss-stable-rc/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.js +7.48% 1.63 kB 1.75 kB +2.84% 0.67 kB 0.69 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.js +7.48% 1.63 kB 1.75 kB +2.84% 0.67 kB 0.69 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.js +7.48% 1.63 kB 1.75 kB +2.84% 0.67 kB 0.69 kB
test_utils/ReactAllWarnings.js Deleted 62.88 kB 0.00 kB Deleted 15.69 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-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +8.70% 1.86 kB 2.02 kB +2.64% 0.72 kB 0.74 kB
oss-stable-rc/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +8.70% 1.86 kB 2.02 kB +2.64% 0.72 kB 0.74 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +8.70% 1.86 kB 2.02 kB +2.64% 0.72 kB 0.74 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +8.70% 1.86 kB 2.02 kB +2.64% 0.72 kB 0.74 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.js +7.48% 1.63 kB 1.75 kB +2.84% 0.67 kB 0.69 kB
oss-stable-rc/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.js +7.48% 1.63 kB 1.75 kB +2.84% 0.67 kB 0.69 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.js +7.48% 1.63 kB 1.75 kB +2.84% 0.67 kB 0.69 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.js +7.48% 1.63 kB 1.75 kB +2.84% 0.67 kB 0.69 kB
oss-stable-rc/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +0.38% 70.28 kB 70.55 kB +0.46% 13.03 kB 13.09 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +0.38% 70.28 kB 70.55 kB +0.46% 13.03 kB 13.09 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +0.38% 70.28 kB 70.55 kB +0.46% 13.03 kB 13.09 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.37% 72.12 kB 72.39 kB +0.44% 13.42 kB 13.48 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.37% 72.12 kB 72.39 kB +0.44% 13.42 kB 13.48 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.37% 72.12 kB 72.39 kB +0.44% 13.42 kB 13.48 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.37% 72.58 kB 72.84 kB +0.64% 13.54 kB 13.63 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.37% 72.58 kB 72.84 kB +0.64% 13.54 kB 13.63 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.37% 72.58 kB 72.84 kB +0.64% 13.54 kB 13.63 kB
oss-stable-rc/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +0.35% 75.22 kB 75.48 kB +0.39% 14.12 kB 14.17 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +0.35% 75.22 kB 75.48 kB +0.39% 14.12 kB 14.17 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +0.35% 75.22 kB 75.48 kB +0.39% 14.12 kB 14.17 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js +0.35% 76.62 kB 76.89 kB +0.39% 14.43 kB 14.49 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js +0.35% 76.62 kB 76.89 kB +0.39% 14.43 kB 14.49 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js +0.35% 76.62 kB 76.89 kB +0.39% 14.43 kB 14.49 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +0.34% 77.43 kB 77.69 kB +0.38% 14.61 kB 14.66 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +0.34% 77.43 kB 77.69 kB +0.38% 14.61 kB 14.66 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +0.34% 77.43 kB 77.69 kB +0.38% 14.61 kB 14.66 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +0.34% 78.79 kB 79.06 kB +0.40% 14.85 kB 14.91 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +0.34% 78.79 kB 79.06 kB +0.40% 14.85 kB 14.91 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +0.34% 78.79 kB 79.06 kB +0.40% 14.85 kB 14.91 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +0.34% 78.81 kB 79.07 kB +0.40% 14.83 kB 14.89 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +0.34% 78.81 kB 79.07 kB +0.40% 14.83 kB 14.89 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +0.34% 78.81 kB 79.07 kB +0.40% 14.83 kB 14.89 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +0.33% 80.51 kB 80.78 kB +0.39% 14.94 kB 15.00 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +0.33% 80.51 kB 80.78 kB +0.39% 14.94 kB 15.00 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +0.33% 80.51 kB 80.78 kB +0.39% 14.94 kB 15.00 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +0.33% 81.30 kB 81.56 kB +0.38% 15.13 kB 15.19 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +0.33% 81.30 kB 81.56 kB +0.38% 15.13 kB 15.19 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +0.33% 81.30 kB 81.56 kB +0.38% 15.13 kB 15.19 kB
oss-stable-rc/react-client/cjs/react-client-flight.development.js +0.22% 73.36 kB 73.52 kB +0.33% 13.38 kB 13.43 kB
oss-stable-semver/react-client/cjs/react-client-flight.development.js +0.22% 73.36 kB 73.52 kB +0.33% 13.38 kB 13.43 kB
oss-stable/react-client/cjs/react-client-flight.development.js +0.22% 73.36 kB 73.52 kB +0.33% 13.38 kB 13.43 kB
oss-stable-rc/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.22% 99.31 kB 99.52 kB +0.23% 21.94 kB 21.99 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.22% 99.31 kB 99.52 kB +0.23% 21.94 kB 21.99 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.22% 99.31 kB 99.52 kB +0.23% 21.94 kB 21.99 kB
test_utils/ReactAllWarnings.js Deleted 62.88 kB 0.00 kB Deleted 15.69 kB 0.00 kB

Generated by 🚫 dangerJS against 0a811b4

Defaults to true in browser builds, otherwise defaults to false.

The assumption is that the server logs will already contain a log from the
original Flight server.
@sebmarkbage sebmarkbage merged commit 8e9de89 into facebook:main Jul 4, 2024
139 checks passed
sebmarkbage added a commit that referenced this pull request Aug 30, 2024
#30847)

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 #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 #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.
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