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] Serialize Server Components Props in DEV #31105

Merged
merged 12 commits into from
Oct 1, 2024

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Sep 30, 2024

This allows us to show props in React DevTools when inspecting a Server Component.

I currently drastically limit the object depth that's serialized since this is very implicit and you can have heavy objects on the server.

We previously was using the general outlineModel to outline ReactComponentInfo but we weren't consistently using it everywhere which could cause some bugs with the parsing when it got deduped on the client. It also lead to the weird feature detect of isReactComponent. It also meant that this serialization was using the plain serialization instead of renderConsoleValue which means we couldn't safely serialize arbitrary debug info that isn't serializable there.

So the main change here is to call outlineComponentInfo and have that always write every "Server Component" instance as outlined and in a way that lets its props be serialized using renderConsoleValue.

Screenshot 2024-10-01 at 1 25 05 AM

Copy link

vercel bot commented Sep 30, 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 Oct 1, 2024 5:34am

@react-sizebot
Copy link

react-sizebot commented Sep 30, 2024

The size diff is too large to display in a single comment. The GitHub action for this pull request contains an artifact called 'sizebot-message.md' with the full message.

Generated by 🚫 dangerJS against a78d621

request.pendingChunks++;
const id = request.nextChunkId++;

// We can't serialize the ConsoleTask/Error objects so we need to omit them before serializing.
Copy link
Collaborator

Choose a reason for hiding this comment

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

didn't you just land this in a different PR?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is a different kind of Error object. One used for the JSX stack. It doesn't have the original stack.

Still not great because it should really block listeners on the row itself
so that we have all the debug info before resolving the promise.

It also doesn't handle debug info in the right order.
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