Add docs for onCaughtError and onUncaughtError #6742
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
rickhanlonii
force-pushed
the
rh/root-options
branch
from
a50f930
to
9cb6ec6
Compare
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
103.9 KB (🟡 +7 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Five Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/404 |
79.88 KB (🟡 +152 B) |
183.78 KB |
/500 |
79.87 KB (🟡 +152 B) |
183.78 KB |
/[[...markdownPath]] |
81.66 KB (🟡 +152 B) |
185.56 KB |
/errors |
80.06 KB (🟡 +152 B) |
183.96 KB |
/errors/[errorCode] |
80.03 KB (🟡 +152 B) |
183.94 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.
| * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. | ||
| * <CanaryBadge title="This feature is only available in the Canary channel" /> **optional** `onCaughtError`: Callback called when React catches an error in an error boundary. Called with the `error` and an `errorInfo` object containing the `componentStack`. | ||
| * <CanaryBadge title="This feature is only available in the Canary channel" /> **optional** `onUncaughtError`: Callback called when an uncaught error is thrown. Called with the `error` and an `errorInfo` object containing the `componentStack`. | ||
| * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. |
There was a problem hiding this comment.
Can we link to a section explaining what recovering from an error means in React?
There was a problem hiding this comment.
We don't have these docs, but we can add them as a followup.
|
@eps1lon - Are these two functionalities we'd want to support in React Testing Library? |
|
Yeah definitely. Should be straight forward. But something to discuss on the RTL repo instead. |
* Add docs for onCaughtError and onUncaughtError * Updates from feedback
* API docs for useDeferredValue's initialValue Updates the API docs for `useDeferredValue` to include the `initialValue` option, added in facebook/react#27500. This feature is slated for release in React 19. * Add docs for onCaughtError and onUncaughtError (#6742) * Add docs for onCaughtError and onUncaughtError * Updates from feedback * Add canary info, simplify a bit --------- Co-authored-by: Ricky <rickhanlonii@fb.com>
Overview
In the React 19 canary we've added two new root options:
This PR adds docs for how to use these new options to display an error dialog.
Additionally, this PR also:
onRecoverableErroroptionerror.causetoonRecoverableErrordocsPreview
createRoothydrateRoot