Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/content/blog/2024/12/05/react-19.md
Original file line number Diff line number Diff line change
Expand Up @@ -756,7 +756,7 @@ The above error occurred in the Throws component:
{' '}at Throws
{' '}at ErrorBoundary
{' '}at App{'\n'}
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
React will try to recreate this component tree from scratch using the Error Boundary you provided, ErrorBoundary.

</ConsoleLogLine>

Expand All @@ -776,7 +776,7 @@ The above error occurred in the Throws component:
{' '}at Throws
{' '}at ErrorBoundary
{' '}at App{'\n'}
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
React will try to recreate this component tree from scratch using the Error Boundary you provided, ErrorBoundary.
{' '}at ErrorBoundary
{' '}at App

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function Parent() {
Examples of correct code for this rule:

```js
// ✅ Using error boundary
// ✅ Using Error Boundary
function Parent() {
return (
<ErrorBoundary>
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/components/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ export async function deliverMessage(message) {

### Handling form submission errors {/*handling-form-submission-errors*/}

In some cases the function called by a `<form>`'s `action` prop throws an error. You can handle these errors by wrapping `<form>` in an Error Boundary. If the function called by a `<form>`'s `action` prop throws an error, the fallback for the error boundary will be displayed.
In some cases the function called by a `<form>`'s `action` prop throws an error. You can handle these errors by wrapping `<form>` in an Error Boundary. If the function called by a `<form>`'s `action` prop throws an error, the fallback for the Error Boundary will be displayed.

<Sandpack>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@ If an error happens in the `Posts` component or somewhere inside it, React will
2. It will "give up" on trying to render the `Posts` content on the server anymore.
3. When the JavaScript code loads on the client, React will *retry* rendering `Posts` on the client.

If retrying rendering `Posts` on the client *also* fails, React will throw the error on the client. As with all the errors thrown during rendering, the [closest parent error boundary](/reference/react/Component#static-getderivedstatefromerror) determines how to present the error to the user. In practice, this means that the user will see a loading indicator until it is certain that the error is not recoverable.
If retrying rendering `Posts` on the client *also* fails, React will throw the error on the client. As with all the errors thrown during rendering, the [closest parent Error Boundary](/reference/react/Component#static-getderivedstatefromerror) determines how to present the error to the user. In practice, this means that the user will see a loading indicator until it is certain that the error is not recoverable.

If retrying rendering `Posts` on the client succeeds, the loading fallback from the server will be replaced with the client rendering output. The user will not know that there was a server error. However, the server `onError` callback and the client [`onRecoverableError`](/reference/react-dom/client/hydrateRoot#hydrateroot) callbacks will fire so that you can get notified about the error.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -441,7 +441,7 @@ If an error happens in the `Posts` component or somewhere inside it, React will
2. It will "give up" on trying to render the `Posts` content on the server anymore.
3. When the JavaScript code loads on the client, React will *retry* rendering `Posts` on the client.

If retrying rendering `Posts` on the client *also* fails, React will throw the error on the client. As with all the errors thrown during rendering, the [closest parent error boundary](/reference/react/Component#static-getderivedstatefromerror) determines how to present the error to the user. In practice, this means that the user will see a loading indicator until it is certain that the error is not recoverable.
If retrying rendering `Posts` on the client *also* fails, React will throw the error on the client. As with all the errors thrown during rendering, the [closest parent Error Boundary](/reference/react/Component#static-getderivedstatefromerror) determines how to present the error to the user. In practice, this means that the user will see a loading indicator until it is certain that the error is not recoverable.

If retrying rendering `Posts` on the client succeeds, the loading fallback from the server will be replaced with the client rendering output. The user will not know that there was a server error. However, the server `onError` callback and the client [`onRecoverableError`](/reference/react-dom/client/hydrateRoot#hydrateroot) callbacks will fire so that you can get notified about the error.

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/Component.md
Original file line number Diff line number Diff line change
Expand Up @@ -1276,7 +1276,7 @@ Error boundaries do not catch errors for:

- Event handlers [(learn more)](/learn/responding-to-events)
- [Server side rendering](/reference/react-dom/server)
- Errors thrown in the error boundary itself (rather than its children)
- Errors thrown in the Error Boundary itself (rather than its children)
- Asynchronous code (e.g. `setTimeout` or `requestAnimationFrame` callbacks); an exception is the usage of the [`startTransition`](/reference/react/useTransition#starttransition) function returned by the [`useTransition`](/reference/react/useTransition) Hook. Errors thrown inside the transition function are caught by error boundaries [(learn more)](/reference/react/useTransition#displaying-an-error-to-users-with-error-boundary)

</Note>
Expand Down
4 changes: 2 additions & 2 deletions src/content/reference/react/useTransition.md
Original file line number Diff line number Diff line change
Expand Up @@ -1557,9 +1557,9 @@ main {

---

### Displaying an error to users with an error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
### Displaying an error to users with an Error Boundary {/*displaying-an-error-to-users-with-error-boundary*/}

If a function passed to `startTransition` throws an error, you can display an error to your user with an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an error boundary, wrap the component where you are calling the `useTransition` in an error boundary. Once the function passed to `startTransition` errors, the fallback for the error boundary will be displayed.
If a function passed to `startTransition` throws an error, you can display an error to your user with an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an Error Boundary, wrap the component where you are calling the `useTransition` in an Error Boundary. Once the function passed to `startTransition` errors, the fallback for the Error Boundary will be displayed.

<Sandpack>

Expand Down
Loading