Skip to content

Reference docs for captureOwnerStack #7427

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 20 commits into from
Feb 13, 2025
Merged

Reference docs for captureOwnerStack #7427

merged 20 commits into from
Feb 13, 2025

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Jan 13, 2025 •
edited
Loading

React error handlers now only show production error logging in one example.

captureOwnerStack docs show usage in an instrumented console.error for a dev overlay. The example with an instrumented console.error doesn't show interaction with error handlers

Preview:
captureOwnerStack
createRoot error handlers
hydrateRoot error handlers

Enabling it on Canary: facebook/react#32053

@vercel Vercel
Copy link

vercel bot commented Jan 13, 2025 •
edited
Loading

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

Name Status Preview Comments Updated (UTC)
19-react-dev ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 13, 2025 7:58pm
react-dev ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 13, 2025 7:58pm

@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 13, 2025 •
edited
Loading

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

One Page Changed Size

The following page changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load
/[[...markdownPath]] 128.98 KB (🟡 +17 B) 239.42 KB
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

@eps1lon eps1lon force-pushed the sebbie/ownerstacks branch from 4a08a62 to 4bf159b Compare January 13, 2025 14:08
@eps1lon eps1lon marked this pull request as ready for review January 13, 2025 14:21
@eps1lon eps1lon mentioned this pull request Jan 13, 2025
Merged
rickhanlonii
rickhanlonii reviewed Jan 13, 2025
View reviewed changes
Copy link
Member

@rickhanlonii rickhanlonii left a comment

Choose a reason for hiding this comment

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

I think the naming we should go with is:

  • Component Stack: what you're calling "parent component stack" here
  • Owner Stack: what you're calling "owner component stack" here

src/content/reference/react-dom/client/createRoot.md Outdated
* **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
* **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`.
* **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
* **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the parent Component stack in `componentStack`.
Copy link
Member

Choose a reason for hiding this comment

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

What is a "parent Component Stack" isn't that just the Component Stack? Adding "parent" makes it sound like it doesn't include the component that errored.

This page should also add a usage item for calling captureOwnerStack to get the owner stack.

Copy link
Member Author

Choose a reason for hiding this comment

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

I feel like expanding the existing usages is sufficient. Is that what you meant? Adding a whole new section feels like overkill.

Copy link
Member

Choose a reason for hiding this comment

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

Isn't there a use case for calling it in user land to add to logs? Or should this only be called in the root handlers and error patch?

@sophiebits
Copy link
Member

Aren't we getting rid of parent stacks entirely eventually? I thought the plan was for owner stacks to subsume them. In which case I might still discuss which stack frames you'll see but not emphasize the difference so much.

@sebmarkbage
Copy link
Contributor

sebmarkbage commented Jan 13, 2025 •
edited
Loading

Aren't we getting rid of parent stacks entirely eventually? I thought the plan was for owner stacks to subsume them.

Not for production logging. They're the ones passed to the deriveStateFromError/componentDidCatch and onError on the server. They only go away in the standard DEV console.error reporting.

@rickhanlonii
Copy link
Member

There should also be runable sandboxes for the Usage examples

@gaearon
Copy link
Member

gaearon commented Jan 14, 2025

There should also be runable sandboxes for the Usage examples

To expand on that — it’s not just for it to be nice but because it’s a proof the API actually works end to end and does what the docs page says it does. We’ve had cases where that wasn’t the case and the Usage examples helped uncover the misunderstandings.

@eps1lon eps1lon force-pushed the sebbie/ownerstacks branch from d6e8d90 to 4f59d78 Compare January 14, 2025 15:59
@eps1lon eps1lon force-pushed the sebbie/ownerstacks branch from 4f59d78 to 265786e Compare January 14, 2025 16:07
@eps1lon eps1lon force-pushed the sebbie/ownerstacks branch from 265786e to 47e7e41 Compare January 14, 2025 16:15
@eps1lon eps1lon force-pushed the sebbie/ownerstacks branch from 1bbf3b8 to 86d7eac Compare January 23, 2025 14:39
@eps1lon eps1lon force-pushed the sebbie/ownerstacks branch from 86d7eac to ec43819 Compare February 3, 2025 16:46
@eps1lon
Troubleshooting empty stacks sandbox
a2fab1d
@eps1lon
Align codestep previews with sandboxes
f4c0246
@eps1lon
Remove console patching section
7570ac6 
It's just a (bad) polyfill for what RDT is doing. Better to lean on RDT for owner stacks in console calls.
@eps1lon
Rework error overlay illustration
c76a3d3 
root error handlers for prod only
captureOwnerStack illustration in patched console.error
@eps1lon eps1lon force-pushed the sebbie/ownerstacks branch from ec43819 to c76a3d3 Compare February 3, 2025 21:21
@eps1lon
Copy link
Member Author

eps1lon commented Feb 3, 2025 •
edited
Loading

Reduced error handler usages to just production logging. Showing a minimal dev overlay in captureOwnerStack usage section that only intercepts console.error. In the blog post, we'll expand on Owner Stack with createTask or React DevTools (only relevant without createTask)

@eps1lon eps1lon requested a review from rickhanlonii February 3, 2025 21:41
rickhanlonii
rickhanlonii approved these changes Feb 13, 2025
View reviewed changes
Copy link
Member

@rickhanlonii rickhanlonii left a comment

Choose a reason for hiding this comment

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

Sick

rickhanlonii pushed a commit to facebook/react that referenced this pull request Feb 13, 2025
@eps1lon
Enable owner stacks in Canary builds (#32053)
32b0cad 
Pending internal decision to ship in Canary.
Still off for FB builds.

Docs: reactjs/react.dev#7427
@eps1lon eps1lon merged commit dfc4448 into main Feb 13, 2025
8 checks passed
@eps1lon eps1lon changed the title Reference docs for experimental captureOwnerStack Reference docs for captureOwnerStack Feb 13, 2025
@eps1lon eps1lon deleted the sebbie/ownerstacks branch April 16, 2025 17:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rickhanlonii rickhanlonii rickhanlonii approved these changes

@sebmarkbage sebmarkbage Awaiting requested review from sebmarkbage

Assignees
No one assigned
Labels
CLA Signed React Core Team
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@eps1lon @sophiebits @sebmarkbage @rickhanlonii @gaearon @facebook-github-bot