diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index 74964645887..4c1d18c0a50 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -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. @@ -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 diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md index 830098e5be3..8530da4759a 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md @@ -32,7 +32,7 @@ function Parent() { Examples of correct code for this rule: ```js -// ✅ Using error boundary +// ✅ Using Error Boundary function Parent() { return ( diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 1043b13a0de..2b5ad2a0cee 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -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 `
`'s `action` prop throws an error. You can handle these errors by wrapping `` in an Error Boundary. If the function called by a ``'s `action` prop throws an error, the fallback for the error boundary will be displayed. +In some cases the function called by a ``'s `action` prop throws an error. You can handle these errors by wrapping `` in an Error Boundary. If the function called by a ``'s `action` prop throws an error, the fallback for the Error Boundary will be displayed. diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 84b8873a6fd..bba1b59af03 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -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. diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index f3e862124af..3eed4df6e06 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -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. diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 3b882f09762..22a265fe980 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -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) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index 426df1f7b26..403e4e17151 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -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.