From b4c87eb3948bc0d26b0e039089b7fc80d9a366bb Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Sun, 24 May 2026 22:19:53 +0200 Subject: [PATCH 1/6] Refresh error boundary docs --- README.md | 118 ++++++++++++++++-- lib/components/ErrorBoundary.tsx | 19 ++- lib/hooks/useErrorBoundary.ts | 6 +- lib/types.ts | 4 +- public/generated/docs/ErrorBoundary.json | 17 ++- .../examples/AsyncUserCodeErrors.json | 2 +- .../generated/examples/TransitionErrors.json | 3 + public/generated/search-index.json | 45 ++++--- public/generated/search-records.json | 14 ++- src/App.tsx | 23 +++- src/routes.ts | 3 + src/routes/AsyncUserCodeErrorsRoute.tsx | 16 ++- src/routes/TransitionErrorsRoute.tsx | 26 ++++ src/routes/examples/AsyncUserCodeErrors.tsx | 28 ++--- src/routes/examples/TransitionErrors.tsx | 34 +++++ 15 files changed, 294 insertions(+), 64 deletions(-) create mode 100644 public/generated/examples/TransitionErrors.json create mode 100644 src/routes/TransitionErrorsRoute.tsx create mode 100644 src/routes/examples/TransitionErrors.tsx diff --git a/README.md b/README.md index ff0b75f5..d9480055 100644 --- a/README.md +++ b/README.md @@ -24,31 +24,131 @@ yarn add react-error-boundary Frequently asked questions can be found [here](https://react-error-boundary-lib.vercel.app/common-questions). +## Quick start + +Wrap an `ErrorBoundary` around the part of the tree where you want to show a fallback UI if rendering fails: + +```tsx +"use client"; + +import { ErrorBoundary, getErrorMessage } from "react-error-boundary"; + +function ErrorFallback({ + error, + resetErrorBoundary, +}: { + error: unknown; + resetErrorBoundary: () => void; +}) { + return ( +
+

Something went wrong:

+ 
{getErrorMessage(error)}
+ +
+ ); +} + + ( + + )} + onError={(error, info) => { + // Log the error to your error reporting service + }} +> + +; +``` + +## What errors are caught? + +This package is built on top of React [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary), so it has all of the advantages and constraints of that API. + +Error boundaries catch errors thrown during render, lifecycle methods, and constructors of the whole tree below them. + +Error boundaries do not catch errors thrown during: + +- Server side rendering +- Event handlers +- Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises + +React 19 includes one important async exception: errors thrown inside Actions, including functions passed to `startTransition`, can be caught by the nearest error boundary. + +For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action and show the nearest error boundary: + +```tsx +"use client"; + +import { useTransition } from "react"; +import { ErrorBoundary } from "react-error-boundary"; + +function UserProfileContainer({ username }: { username: string }) { + return ( + Could not load profile

}> + + + ); +} + +function UserProfile({ username }: { username: string }) { + const [isPending, startTransition] = useTransition(); + + function loadProfile() { + startTransition(async () => { + await fetchUserProfile(username); + }); + } + + return ( + + ); +} +``` + +For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with `useErrorBoundary`. + ## API ### ErrorBoundary + A reusable React [error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) component. Wrap this component around other React components to "catch" errors and render a fallback UI. This package is built on top of React [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary), -so it has all of the advantages and constraints of that API. -This means that it can't catch errors during: -- Server side rendering +so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render, +lifecycle methods, and constructors of the whole tree below them. + +Error boundaries do not catch errors thrown during: + +- Server side rendering - Event handlers -- Asynchronous code (including effects) +- Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises + +React 19 includes one important async exception: errors thrown inside Actions, including functions passed to +`startTransition`, can be caught by the nearest error boundary. + +For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The +`useErrorBoundary` hook can also be used to pass errors from async code outside of Actions to the nearest error +boundary. ℹ️ The component provides several ways to render a fallback: `fallback`, `fallbackRender`, and `FallbackComponent`. Refer to the documentation to determine which is best for your application. -ℹ️ This is a **client component**. You can only pass props to it that are serializeable or use it in files that have a `"use client";` directive. +ℹ️ This is a **client component**. You can only pass props to it that are serializable or use it in files that have a `"use client";` directive. + #### Required props + None + #### Optional props @@ -72,14 +172,14 @@ None onReset -

Optional callback to to be notified when an error boundary is "reset" so React can retry the failed render.

+

Optional callback to be notified when an error boundary is reset so React can retry the failed render.

resetKeys

When changed, these keys will reset a triggered error boundary. This can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key). -See the the documentation for examples of how to use this prop.

+See the documentation for examples of how to use this prop.

@@ -109,10 +209,13 @@ See the the documentation for examples of how to use this prop.

# FAQ + ## `ErrorBoundary` cannot be used as a JSX component + This error can be caused by a version mismatch between [react](https://npmjs.com/package/react) and [@types/react](https://npmjs.com/package/@types/react). To fix this, ensure that both match exactly, e.g.: If using NPM: + ```json { ... @@ -124,6 +227,7 @@ If using NPM: ``` If using Yarn: + ```json { ... diff --git a/lib/components/ErrorBoundary.tsx b/lib/components/ErrorBoundary.tsx index 5943ea95..a7c194fb 100644 --- a/lib/components/ErrorBoundary.tsx +++ b/lib/components/ErrorBoundary.tsx @@ -24,16 +24,25 @@ const initialState: ErrorBoundaryState = { * Wrap this component around other React components to "catch" errors and render a fallback UI. * * This package is built on top of React [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary), - * so it has all of the advantages and constraints of that API. - * This means that it can't catch errors during: - * - Server side rendering + * so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render, + * lifecycle methods, and constructors of the whole tree below them. + * + * Error boundaries do not catch errors thrown during: + * - Server side rendering * - Event handlers - * - Asynchronous code (including effects) + * - Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises + * + * React 19 includes one important async exception: errors thrown inside Actions, including functions passed to + * `startTransition`, can be caught by the nearest error boundary. + * + * For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The + * `useErrorBoundary` hook can also be used to pass errors from async code outside of Actions to the nearest error + * boundary. * * ℹ️ The component provides several ways to render a fallback: `fallback`, `fallbackRender`, and `FallbackComponent`. * Refer to the documentation to determine which is best for your application. * - * ℹ️ This is a **client component**. You can only pass props to it that are serializeable or use it in files that have a `"use client";` directive. + * ℹ️ This is a **client component**. You can only pass props to it that are serializable or use it in files that have a `"use client";` directive. */ export class ErrorBoundary extends Component< ErrorBoundaryProps, diff --git a/lib/hooks/useErrorBoundary.ts b/lib/hooks/useErrorBoundary.ts index 869431b7..3070fafd 100644 --- a/lib/hooks/useErrorBoundary.ts +++ b/lib/hooks/useErrorBoundary.ts @@ -31,9 +31,9 @@ export function useErrorBoundary(): { /** * Trigger the nearest error boundary to display the error provided. * - * ℹ️ React only handles errors thrown during render or during component lifecycle methods (e.g. effects and did-mount/did-update). - * Errors thrown in event handlers, or after async code has run, will not be caught. - * This method is a way to imperatively trigger an error boundary during these phases. + * ℹ️ React handles errors thrown during render, lifecycle methods, and constructors. + * Errors thrown in event handlers, or after async code has run, will not be caught automatically. + * This method is a way to imperatively show the nearest error boundary for those errors. */ showBoundary: (error: unknown) => void; } { diff --git a/lib/types.ts b/lib/types.ts index 14ea3ddc..082cac1c 100644 --- a/lib/types.ts +++ b/lib/types.ts @@ -22,7 +22,7 @@ type ErrorBoundarySharedProps = PropsWithChildren<{ onError?: (error: unknown, info: ErrorInfo) => void; /** - * Optional callback to to be notified when an error boundary is "reset" so React can retry the failed render. + * Optional callback to be notified when an error boundary is reset so React can retry the failed render. */ onReset?: ( details: @@ -37,7 +37,7 @@ type ErrorBoundarySharedProps = PropsWithChildren<{ /** * When changed, these keys will reset a triggered error boundary. * This can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key). - * See the the documentation for examples of how to use this prop. + * See the documentation for examples of how to use this prop. */ resetKeys?: unknown[]; }>; diff --git a/public/generated/docs/ErrorBoundary.json b/public/generated/docs/ErrorBoundary.json index 9f36aae8..8c65f906 100644 --- a/public/generated/docs/ErrorBoundary.json +++ b/public/generated/docs/ErrorBoundary.json @@ -4,14 +4,23 @@ "content": "

A reusable React error boundary component.\nWrap this component around other React components to "catch" errors and render a fallback UI.

\n" }, { - "content": "

This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API.\nThis means that it can't catch errors during:

\n\n" + "content": "

This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render,\nlifecycle methods, and constructors of the whole tree below them.

\n" + }, + { + "content": "

Error boundaries do not catch errors thrown during:

\n\n" + }, + { + "content": "

React 19 includes one important async exception: errors thrown inside Actions, including functions passed to\nstartTransition, can be caught by the nearest error boundary.

\n" + }, + { + "content": "

For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The\nuseErrorBoundary hook can also be used to pass errors from async code outside of Actions to the nearest error\nboundary.

\n" }, { "content": "

The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.

\n", "intent": "primary" }, { - "content": "

This is a client component. You can only pass props to it that are serializeable or use it in files that have a "use client"; directive.

\n", + "content": "

This is a client component. You can only pass props to it that are serializable or use it in files that have a "use client"; directive.

\n", "intent": "primary" } ], @@ -31,7 +40,7 @@ "onReset": { "description": [ { - "content": "

Optional callback to to be notified when an error boundary is "reset" so React can retry the failed render.

\n" + "content": "

Optional callback to be notified when an error boundary is reset so React can retry the failed render.

\n" } ], "html": "
onReset?: (details: { reason: \"imperative-api\"; args: unknown[]; } | { reason: \"keys\"; prev: unknown[]; next: unknown[]; }) => void
", @@ -41,7 +50,7 @@ "resetKeys": { "description": [ { - "content": "

When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the the documentation for examples of how to use this prop.

\n" + "content": "

When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the documentation for examples of how to use this prop.

\n" } ], "html": "
resetKeys?: unknown[]
", diff --git a/public/generated/examples/AsyncUserCodeErrors.json b/public/generated/examples/AsyncUserCodeErrors.json index 52276e19..94bdb034 100644 --- a/public/generated/examples/AsyncUserCodeErrors.json +++ b/public/generated/examples/AsyncUserCodeErrors.json @@ -1,3 +1,3 @@ { - "html": "
import { useErrorBoundary } from \"react-error-boundary\";
\n
 
\n
function useUserProfileInfo({ username }: { username: string }) {
\n
const { showBoundary } = useErrorBoundary();
\n
 
\n
useEffect(() => {
\n
fetchGreeting(username).then(
\n
(response) => {
\n
// Set data in state and re-render ...
\n
},
\n
(error) => {
\n
// Show error boundary
\n
showBoundary(error);
\n
}
\n
);
\n
});
\n
}
" + "html": "
import { useErrorBoundary } from \"react-error-boundary\";
\n
 
\n
function UserProfile({ username }: { username: string }) {
\n
const { showBoundary } = useErrorBoundary();
\n
 
\n
async function loadProfile() {
\n
try {
\n
await fetchUserProfile(username);
\n
} catch (error) {
\n
showBoundary(error);
\n
}
\n
}
\n
 
\n
return <button onClick={loadProfile}>Load profile</button>;
\n
}
" } \ No newline at end of file diff --git a/public/generated/examples/TransitionErrors.json b/public/generated/examples/TransitionErrors.json new file mode 100644 index 00000000..03d68f04 --- /dev/null +++ b/public/generated/examples/TransitionErrors.json @@ -0,0 +1,3 @@ +{ + "html": "
import { useTransition } from \"react\";
\n
import { ErrorBoundary } from \"react-error-boundary\";
\n
 
\n
function AddCommentContainer() {
\n
return (
\n
<ErrorBoundary fallback={<p>Could not add comment</p>}>
\n
<AddCommentButton />
\n
</ErrorBoundary>
\n
);
\n
}
\n
 
\n
function AddCommentButton() {
\n
const [isPending, startTransition] = useTransition();
\n
 
\n
function handleClick() {
\n
startTransition(async () => {
\n
await addComment();
\n
});
\n
}
\n
 
\n
return (
\n
<button disabled={isPending} onClick={handleClick}>
\n
{isPending ? \"Adding...\" : \"Add comment\"}
\n
</button>
\n
);
\n
}
" +} \ No newline at end of file diff --git a/public/generated/search-index.json b/public/generated/search-index.json index 13ee6149..bb834899 100644 --- a/public/generated/search-index.json +++ b/public/generated/search-index.json @@ -37,8 +37,8 @@ "n": 0.5 }, "2": { - "v": " Getting started with react-error-boundary React components and utils for managing runtime errors. Supports all React renderers (including React DOM and React Native). This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. This means that it can't catch errors during: Server side rendering Event handlers Asynchronous code (including effects) You can show an error boundary for asynchronous code, but you have to catch the error yourself. Learn more. Installation Begin by installing the library from NPM: npm install react-error-boundary TypeScript definitions are included within the published dist folder. Support Here are some ways to support this project: Become a GitHub sponsor Buy me a coffee ", - "n": 0.092 + "v": " Getting started with react-error-boundary React components and utils for managing runtime errors. Supports all React renderers (including React DOM and React Native). This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render, lifecycle methods, and constructors of the whole tree below them. This means that it can't catch errors during: Server side rendering Event handlers Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. Installation Begin by installing the library from NPM: npm install react-error-boundary TypeScript definitions are included within the published dist folder. Support Here are some ways to support this project: Become a GitHub sponsor Buy me a coffee ", + "n": 0.073 } } }, @@ -122,13 +122,30 @@ "n": 1 }, "2": { - "v": " Examples Async user code errors React only handles errors thrown during render or during component lifecycle methods (e.g. effects and did-mount/did-update). Errors thrown in event handlers, or after async code has run, will not be caught. The useErrorBoundary hook can be used to pass those errors to the nearest error boundary: import { useErrorBoundary } from \"react-error-boundary\" ; \n \n function useUserProfileInfo ( { username } : { username : string } ) { \n const { showBoundary } = useErrorBoundary ( ) ; \n \n useEffect ( ( ) => { \n fetchGreeting ( username ) . then ( \n ( response ) => { \n // Set data in state and re-render ... \n } , \n ( error ) => { \n // Show error boundary \n showBoundary ( error ) ; \n } \n ) ; \n } ) ; \n } ", - "n": 0.083 + "v": " Examples Async user code errors React handles errors thrown during render, lifecycle methods, and constructors. Errors thrown in event handlers, or after async code has run, will not be caught by an error boundary automatically. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action and show the nearest error boundary. Learn more. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary: import { useErrorBoundary } from \"react-error-boundary\" ; \n \n function UserProfile ( { username } : { username : string } ) { \n const { showBoundary } = useErrorBoundary ( ) ; \n \n async function loadProfile ( ) { \n try { \n await fetchUserProfile ( username ) ; \n } catch ( error ) { \n showBoundary ( error ) ; \n } \n } \n \n return < button onClick = { loadProfile } > Load profile ; \n } ", + "n": 0.077 } } }, { "i": 6, + "$": { + "0": { + "v": "Transition errors", + "n": 0.707 + }, + "1": { + "v": "Examples", + "n": 1 + }, + "2": { + "v": " Examples Transition errors React 19 catches errors thrown inside Actions and shows the fallback for the nearest error boundary. Actions include functions passed to startTransition. This is useful for user-initiated async work where an unexpected error should replace a section of the UI. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary. import { useTransition } from \"react\" ; \n import { ErrorBoundary } from \"react-error-boundary\" ; \n \n function AddCommentContainer ( ) { \n return ( \n < ErrorBoundary fallback = { < p > Could not add comment } > \n < AddCommentButton /> \n \n ) ; \n } \n \n function AddCommentButton ( ) { \n const [ isPending , startTransition ] = useTransition ( ) ; \n \n function handleClick ( ) { \n startTransition ( async ( ) => { \n await addComment ( ) ; \n } ) ; \n } \n \n return ( \n < button disabled = { isPending } onClick = { handleClick } > \n { isPending ? \"Adding...\" : \"Add comment\" } \n \n ) ; \n } ", + "n": 0.071 + } + } + }, + { + "i": 7, "$": { "0": { "v": "Reset nearest boundary", @@ -145,7 +162,7 @@ } }, { - "i": 7, + "i": 8, "$": { "0": { "v": "ErrorBoundary component props", @@ -156,13 +173,13 @@ "n": 1 }, "2": { - "v": " API ErrorBoundary component props A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API.\nThis means that it can't catch errors during:\n\nServer side rendering\nEvent handlers\nAsynchronous code (including effects)\n\n The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.\n This is a client component. You can only pass props to it that are serializeable or use it in files that have a \"use client\"; directive.\n Optional props fallback ? : ReactNode Static content to render in place of an error if one is thrown.\n < ErrorBoundary fallback = { < div className = \"text-red\" > Something went wrong } /> FallbackComponent ? : ComponentType < FallbackProps > React component responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary FallbackComponent = { Fallback } /> fallbackRender ? : ( props : FallbackProps ) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => < div > ... } /> onError ? : ( error : unknown , info : ErrorInfo ) => void Optional callback to enable e.g. logging error information to a server.\n\n error Value that was thrown; typically an instance of Error \n info React \"component stack\" identifying where the error was thrown\n\n onReset ? : ( details : { reason : \"imperative-api\" ; args : unknown [ ] ; } | { reason : \"keys\" ; prev : unknown [ ] ; next : unknown [ ] ; } ) => void Optional callback to to be notified when an error boundary is \"reset\" so React can retry the failed render.\n resetKeys ? : unknown [ ] When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the the documentation for examples of how to use this prop.\n ", - "n": 0.052 + "v": " API ErrorBoundary component props A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render,\nlifecycle methods, and constructors of the whole tree below them.\n Error boundaries do not catch errors thrown during:\n\nServer side rendering\nEvent handlers\nAsync code that runs after rendering, like setTimeout callbacks or unresolved promises\n\n React 19 includes one important async exception: errors thrown inside Actions, including functions passed to\nstartTransition, can be caught by the nearest error boundary.\n For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The\nuseErrorBoundary hook can also be used to pass errors from async code outside of Actions to the nearest error\nboundary.\n The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.\n This is a client component. You can only pass props to it that are serializable or use it in files that have a \"use client\"; directive.\n Optional props fallback ? : ReactNode Static content to render in place of an error if one is thrown.\n < ErrorBoundary fallback = { < div className = \"text-red\" > Something went wrong } /> FallbackComponent ? : ComponentType < FallbackProps > React component responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary FallbackComponent = { Fallback } /> fallbackRender ? : ( props : FallbackProps ) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => < div > ... } /> onError ? : ( error : unknown , info : ErrorInfo ) => void Optional callback to enable e.g. logging error information to a server.\n\n error Value that was thrown; typically an instance of Error \n info React \"component stack\" identifying where the error was thrown\n\n onReset ? : ( details : { reason : \"imperative-api\" ; args : unknown [ ] ; } | { reason : \"keys\" ; prev : unknown [ ] ; next : unknown [ ] ; } ) => void Optional callback to be notified when an error boundary is reset so React can retry the failed render.\n resetKeys ? : unknown [ ] When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the documentation for examples of how to use this prop.\n ", + "n": 0.047 } } }, { - "i": 8, + "i": 9, "$": { "0": { "v": "useErrorBoundary hook", @@ -179,7 +196,7 @@ } }, { - "i": 9, + "i": 10, "$": { "0": { "v": "withErrorBoundary HOC", @@ -196,7 +213,7 @@ } }, { - "i": 10, + "i": 11, "$": { "0": { "v": "getErrorMessage helper", @@ -213,20 +230,20 @@ } }, { - "i": 11, + "i": 12, "$": { "0": { "v": "Common questions", "n": 0.707 }, "2": { - "v": " Common questions Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. This means that it can't catch errors during: Server side rendering Event handlers Asynchronous code (including effects) You can show an error boundary for asynchronous code, but you have to catch the error yourself. Learn more. ErrorBoundary cannot be used as a JSX component This error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly. For NPM, you may need to use an override: { \n \"overrides\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Yarn has a similar mechanism called a resolution: { \n \"resolutions\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Unable to resolve path to module 'react-error-boundary' The version 6.0 release of this library switched to ESM-only to better work with modern JavaScript tooling. If your project uses a framework or runtime that does not yet support ES Modules (like Expo or Hermes) then you should use version 5 of this library. There are no major API differences between these two versions other than ESM support. ", - "n": 0.07 + "v": " Common questions Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render, lifecycle methods, and constructors of the whole tree below them. This means that it can't catch errors during: Server side rendering Event handlers Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. ErrorBoundary cannot be used as a JSX component This error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly. For NPM, you may need to use an override: { \n \"overrides\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Yarn has a similar mechanism called a resolution: { \n \"resolutions\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Unable to resolve path to module 'react-error-boundary' The version 6.0 release of this library switched to ESM-only to better work with modern JavaScript tooling. If your project uses a framework or runtime that does not yet support ES Modules (like Expo or Hermes) then you should use version 5 of this library. There are no major API differences between these two versions other than ESM support. ", + "n": 0.06 } } }, { - "i": 12, + "i": 13, "$": { "0": { "v": "Support", diff --git a/public/generated/search-records.json b/public/generated/search-records.json index f42d4d19..aebf66c6 100644 --- a/public/generated/search-records.json +++ b/public/generated/search-records.json @@ -1,7 +1,7 @@ [ { "path": "/", - "text": " Getting started with react-error-boundary React components and utils for managing runtime errors. Supports all React renderers (including React DOM and React Native). This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. This means that it can't catch errors during: Server side rendering Event handlers Asynchronous code (including effects) You can show an error boundary for asynchronous code, but you have to catch the error yourself. Learn more. Installation Begin by installing the library from NPM: npm install react-error-boundary TypeScript definitions are included within the published dist folder. Support Here are some ways to support this project: Become a GitHub sponsor Buy me a coffee ", + "text": " Getting started with react-error-boundary React components and utils for managing runtime errors. Supports all React renderers (including React DOM and React Native). This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render, lifecycle methods, and constructors of the whole tree below them. This means that it can't catch errors during: Server side rendering Event handlers Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. Installation Begin by installing the library from NPM: npm install react-error-boundary TypeScript definitions are included within the published dist folder. Support Here are some ways to support this project: Become a GitHub sponsor Buy me a coffee ", "title": "Getting started with react-error-boundary" }, { @@ -31,9 +31,15 @@ { "path": "/examples/async-user-code-errors", "section": "Examples", - "text": " Examples Async user code errors React only handles errors thrown during render or during component lifecycle methods (e.g. effects and did-mount/did-update). Errors thrown in event handlers, or after async code has run, will not be caught. The useErrorBoundary hook can be used to pass those errors to the nearest error boundary: import { useErrorBoundary } from \"react-error-boundary\" ; \n \n function useUserProfileInfo ( { username } : { username : string } ) { \n const { showBoundary } = useErrorBoundary ( ) ; \n \n useEffect ( ( ) => { \n fetchGreeting ( username ) . then ( \n ( response ) => { \n // Set data in state and re-render ... \n } , \n ( error ) => { \n // Show error boundary \n showBoundary ( error ) ; \n } \n ) ; \n } ) ; \n } ", + "text": " Examples Async user code errors React handles errors thrown during render, lifecycle methods, and constructors. Errors thrown in event handlers, or after async code has run, will not be caught by an error boundary automatically. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action and show the nearest error boundary. Learn more. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary: import { useErrorBoundary } from \"react-error-boundary\" ; \n \n function UserProfile ( { username } : { username : string } ) { \n const { showBoundary } = useErrorBoundary ( ) ; \n \n async function loadProfile ( ) { \n try { \n await fetchUserProfile ( username ) ; \n } catch ( error ) { \n showBoundary ( error ) ; \n } \n } \n \n return < button onClick = { loadProfile } > Load profile ; \n } ", "title": "Async user code errors" }, + { + "path": "/examples/transition-errors", + "section": "Examples", + "text": " Examples Transition errors React 19 catches errors thrown inside Actions and shows the fallback for the nearest error boundary. Actions include functions passed to startTransition. This is useful for user-initiated async work where an unexpected error should replace a section of the UI. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary. import { useTransition } from \"react\" ; \n import { ErrorBoundary } from \"react-error-boundary\" ; \n \n function AddCommentContainer ( ) { \n return ( \n < ErrorBoundary fallback = { < p > Could not add comment } > \n < AddCommentButton /> \n \n ) ; \n } \n \n function AddCommentButton ( ) { \n const [ isPending , startTransition ] = useTransition ( ) ; \n \n function handleClick ( ) { \n startTransition ( async ( ) => { \n await addComment ( ) ; \n } ) ; \n } \n \n return ( \n < button disabled = { isPending } onClick = { handleClick } > \n { isPending ? \"Adding...\" : \"Add comment\" } \n \n ) ; \n } ", + "title": "Transition errors" + }, { "path": "/examples/retry-nearest-boundary", "section": "Examples", @@ -43,7 +49,7 @@ { "path": "/api/error-boundary-props", "section": "API", - "text": " API ErrorBoundary component props A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API.\nThis means that it can't catch errors during:\n\nServer side rendering\nEvent handlers\nAsynchronous code (including effects)\n\n The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.\n This is a client component. You can only pass props to it that are serializeable or use it in files that have a \"use client\"; directive.\n Optional props fallback ? : ReactNode Static content to render in place of an error if one is thrown.\n < ErrorBoundary fallback = { < div className = \"text-red\" > Something went wrong } /> FallbackComponent ? : ComponentType < FallbackProps > React component responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary FallbackComponent = { Fallback } /> fallbackRender ? : ( props : FallbackProps ) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => < div > ... } /> onError ? : ( error : unknown , info : ErrorInfo ) => void Optional callback to enable e.g. logging error information to a server.\n\n error Value that was thrown; typically an instance of Error \n info React \"component stack\" identifying where the error was thrown\n\n onReset ? : ( details : { reason : \"imperative-api\" ; args : unknown [ ] ; } | { reason : \"keys\" ; prev : unknown [ ] ; next : unknown [ ] ; } ) => void Optional callback to to be notified when an error boundary is \"reset\" so React can retry the failed render.\n resetKeys ? : unknown [ ] When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the the documentation for examples of how to use this prop.\n ", + "text": " API ErrorBoundary component props A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render,\nlifecycle methods, and constructors of the whole tree below them.\n Error boundaries do not catch errors thrown during:\n\nServer side rendering\nEvent handlers\nAsync code that runs after rendering, like setTimeout callbacks or unresolved promises\n\n React 19 includes one important async exception: errors thrown inside Actions, including functions passed to\nstartTransition, can be caught by the nearest error boundary.\n For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The\nuseErrorBoundary hook can also be used to pass errors from async code outside of Actions to the nearest error\nboundary.\n The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.\n This is a client component. You can only pass props to it that are serializable or use it in files that have a \"use client\"; directive.\n Optional props fallback ? : ReactNode Static content to render in place of an error if one is thrown.\n < ErrorBoundary fallback = { < div className = \"text-red\" > Something went wrong } /> FallbackComponent ? : ComponentType < FallbackProps > React component responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary FallbackComponent = { Fallback } /> fallbackRender ? : ( props : FallbackProps ) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => < div > ... } /> onError ? : ( error : unknown , info : ErrorInfo ) => void Optional callback to enable e.g. logging error information to a server.\n\n error Value that was thrown; typically an instance of Error \n info React \"component stack\" identifying where the error was thrown\n\n onReset ? : ( details : { reason : \"imperative-api\" ; args : unknown [ ] ; } | { reason : \"keys\" ; prev : unknown [ ] ; next : unknown [ ] ; } ) => void Optional callback to be notified when an error boundary is reset so React can retry the failed render.\n resetKeys ? : unknown [ ] When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the documentation for examples of how to use this prop.\n ", "title": "ErrorBoundary component props" }, { @@ -66,7 +72,7 @@ }, { "path": "/common-questions", - "text": " Common questions Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. This means that it can't catch errors during: Server side rendering Event handlers Asynchronous code (including effects) You can show an error boundary for asynchronous code, but you have to catch the error yourself. Learn more. ErrorBoundary cannot be used as a JSX component This error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly. For NPM, you may need to use an override: { \n \"overrides\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Yarn has a similar mechanism called a resolution: { \n \"resolutions\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Unable to resolve path to module 'react-error-boundary' The version 6.0 release of this library switched to ESM-only to better work with modern JavaScript tooling. If your project uses a framework or runtime that does not yet support ES Modules (like Expo or Hermes) then you should use version 5 of this library. There are no major API differences between these two versions other than ESM support. ", + "text": " Common questions Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render, lifecycle methods, and constructors of the whole tree below them. This means that it can't catch errors during: Server side rendering Event handlers Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. ErrorBoundary cannot be used as a JSX component This error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly. For NPM, you may need to use an override: { \n \"overrides\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Yarn has a similar mechanism called a resolution: { \n \"resolutions\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Unable to resolve path to module 'react-error-boundary' The version 6.0 release of this library switched to ESM-only to better work with modern JavaScript tooling. If your project uses a framework or runtime that does not yet support ES Modules (like Expo or Hermes) then you should use version 5 of this library. There are no major API differences between these two versions other than ESM support. ", "title": "Common questions" }, { diff --git a/src/App.tsx b/src/App.tsx index dfb083fb..525bf3c6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -31,6 +31,9 @@ export default function App() { Async user code errors + + Transition errors + Retry nearest boundary @@ -77,15 +80,29 @@ const clientSideWarning = ( , so it has all of the advantages and constraints of that API. +
+ Error boundaries catch errors thrown during render, lifecycle methods, and + constructors of the whole tree below them. +
This means that it can't catch errors during:
- You can show an error boundary for asynchronous code, but you - have to catch the error yourself.{" "} + React 19 includes one important async exception: errors thrown inside + Actions, including functions passed to startTransition, can be caught by + the nearest error boundary.{" "} + Learn more. +
+
+ For user-initiated async work, wrap the work in a Transition so React can + catch errors from the Action. For async work outside of Actions, catch the + error yourself and pass it to the nearest boundary.{" "} Learn more.
diff --git a/src/routes.ts b/src/routes.ts index 2d37e19b..d263f674 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -12,6 +12,9 @@ export const routes = { "/examples/async-user-code-errors": lazy( () => import("./routes/AsyncUserCodeErrorsRoute"), ), + "/examples/transition-errors": lazy( + () => import("./routes/TransitionErrorsRoute"), + ), "/examples/retry-nearest-boundary": lazy( () => import("./routes/ResetNearestBoundaryRoute"), ), diff --git a/src/routes/AsyncUserCodeErrorsRoute.tsx b/src/routes/AsyncUserCodeErrorsRoute.tsx index c07612cc..b54fd3c5 100644 --- a/src/routes/AsyncUserCodeErrorsRoute.tsx +++ b/src/routes/AsyncUserCodeErrorsRoute.tsx @@ -6,13 +6,19 @@ export default function AsyncUserCodeErrorsRoute() {
- React only handles errors thrown during render or during component - lifecycle methods (e.g. effects and did-mount/did-update). Errors thrown - in event handlers, or after async code has run, will not be caught. + React handles errors thrown during render, lifecycle methods, and + constructors. Errors thrown in event handlers, or after async code has + run, will not be caught by an error boundary automatically.
- The useErrorBoundary hook - can be used to pass those errors to the nearest error boundary: + For user-initiated async work, wrap the work in a Transition so React + can catch errors from the Action and show the nearest error boundary.{" "} + Learn more. +
+
+ For async work outside of Actions, catch the error yourself and pass it + to the nearest boundary with{" "} + useErrorBoundary:
diff --git a/src/routes/TransitionErrorsRoute.tsx b/src/routes/TransitionErrorsRoute.tsx new file mode 100644 index 00000000..5687bf2d --- /dev/null +++ b/src/routes/TransitionErrorsRoute.tsx @@ -0,0 +1,26 @@ +import { Box, Code, ExternalLink, Header } from "react-lib-tools"; +import { html } from "../../public/generated/examples/TransitionErrors.json"; +import { Link } from "../components/Link"; + +export default function TransitionErrorsRoute() { + return ( + +
+
+ React 19 catches errors thrown inside Actions and shows the fallback for + the nearest error boundary. Actions include functions passed to{" "} + + startTransition + + . +
+
+ This is useful for user-initiated async work where an unexpected error + should replace a section of the UI. For async work outside of Actions, + catch the error yourself and pass it to the nearest boundary with{" "} + useErrorBoundary. +
+ + + ); +} diff --git a/src/routes/examples/AsyncUserCodeErrors.tsx b/src/routes/examples/AsyncUserCodeErrors.tsx index a4bfcb31..ccb81cb3 100644 --- a/src/routes/examples/AsyncUserCodeErrors.tsx +++ b/src/routes/examples/AsyncUserCodeErrors.tsx @@ -1,25 +1,21 @@ -import { useEffect } from "react"; // hidden import { useErrorBoundary } from "react-error-boundary"; -function useUserProfileInfo({ username }: { username: string }) { +function UserProfile({ username }: { username: string }) { const { showBoundary } = useErrorBoundary(); - useEffect(() => { - fetchGreeting(username).then( - (response) => { - // Set data in state and re-render ... - response; // hidden - }, - (error) => { - // Show error boundary - showBoundary(error); - } - ); - }); + async function loadProfile() { + try { + await fetchUserProfile(username); + } catch (error) { + showBoundary(error); + } + } + + return ; } // -export { useUserProfileInfo }; +export { UserProfile }; -async function fetchGreeting(_: string) {} +async function fetchUserProfile(_: string) {} diff --git a/src/routes/examples/TransitionErrors.tsx b/src/routes/examples/TransitionErrors.tsx new file mode 100644 index 00000000..1fb97919 --- /dev/null +++ b/src/routes/examples/TransitionErrors.tsx @@ -0,0 +1,34 @@ +import { useTransition } from "react"; +import { ErrorBoundary } from "react-error-boundary"; + +function AddCommentContainer() { + return ( + Could not add comment

}> + + + ); +} + +function AddCommentButton() { + const [isPending, startTransition] = useTransition(); + + function handleClick() { + startTransition(async () => { + await addComment(); + }); + } + + return ( + + ); +} + +// + +export { AddCommentContainer }; + +async function addComment() { + throw new Error("Unable to add comment"); +} From 8882cfe12a1a9da9ecc800dd6b25edd3c2f77f87 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Sun, 24 May 2026 17:39:43 -0400 Subject: [PATCH 2/6] Run 'pnpm compile' to update docs --- README.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/README.md b/README.md index d9480055..6cf2cbb7 100644 --- a/README.md +++ b/README.md @@ -115,7 +115,6 @@ For async work outside of Actions, catch the error yourself and pass it to the n ### ErrorBoundary - A reusable React [error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) component. Wrap this component around other React components to "catch" errors and render a fallback UI. @@ -124,7 +123,6 @@ so it has all of the advantages and constraints of that API. Error boundaries ca lifecycle methods, and constructors of the whole tree below them. Error boundaries do not catch errors thrown during: - - Server side rendering - Event handlers - Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises @@ -140,15 +138,12 @@ boundary. Refer to the documentation to determine which is best for your application. ℹ️ This is a **client component**. You can only pass props to it that are serializable or use it in files that have a `"use client";` directive. - #### Required props - None - #### Optional props From 7813ed6261f5345b6ff1d903f1a4ecb16c9259bc Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Sun, 24 May 2026 23:50:49 +0200 Subject: [PATCH 3/6] Address docs review feedback --- README.md | 32 ++++++++++++++---------- lib/components/ErrorBoundary.tsx | 5 ++-- lib/hooks/useErrorBoundary.ts | 2 +- public/generated/docs/ErrorBoundary.json | 4 +-- public/generated/search-index.json | 10 ++++---- public/generated/search-records.json | 8 +++--- src/App.tsx | 4 +-- src/routes/AsyncUserCodeErrorsRoute.tsx | 11 ++++---- 8 files changed, 42 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 6cf2cbb7..09bb8043 100644 --- a/README.md +++ b/README.md @@ -49,28 +49,33 @@ function ErrorFallback({ ); } - ( - - )} - onError={(error, info) => { - // Log the error to your error reporting service - }} -> - -; +export default function App() { + return ( + ( + + )} + onError={(error, info) => { + // Log the error to your error reporting service + }} + > + {/* Render your app here */} + + ); +} ``` ## What errors are caught? This package is built on top of React [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary), so it has all of the advantages and constraints of that API. -Error boundaries catch errors thrown during render, lifecycle methods, and constructors of the whole tree below them. +Error boundaries catch errors thrown while rendering the tree below them. Error boundaries do not catch errors thrown during: - Server side rendering - Event handlers +- Errors thrown in the error boundary itself - Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to `startTransition`, can be caught by the nearest error boundary. @@ -119,12 +124,13 @@ A reusable React [error boundary](https://react.dev/reference/react/Component#ca Wrap this component around other React components to "catch" errors and render a fallback UI. This package is built on top of React [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary), -so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render, -lifecycle methods, and constructors of the whole tree below them. +so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering +the tree below them. Error boundaries do not catch errors thrown during: - Server side rendering - Event handlers +- Errors thrown in the error boundary itself - Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to diff --git a/lib/components/ErrorBoundary.tsx b/lib/components/ErrorBoundary.tsx index a7c194fb..c4c6b563 100644 --- a/lib/components/ErrorBoundary.tsx +++ b/lib/components/ErrorBoundary.tsx @@ -24,12 +24,13 @@ const initialState: ErrorBoundaryState = { * Wrap this component around other React components to "catch" errors and render a fallback UI. * * This package is built on top of React [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary), - * so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render, - * lifecycle methods, and constructors of the whole tree below them. + * so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering + * the tree below them. * * Error boundaries do not catch errors thrown during: * - Server side rendering * - Event handlers + * - Errors thrown in the error boundary itself * - Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises * * React 19 includes one important async exception: errors thrown inside Actions, including functions passed to diff --git a/lib/hooks/useErrorBoundary.ts b/lib/hooks/useErrorBoundary.ts index 3070fafd..a3f0abf0 100644 --- a/lib/hooks/useErrorBoundary.ts +++ b/lib/hooks/useErrorBoundary.ts @@ -31,7 +31,7 @@ export function useErrorBoundary(): { /** * Trigger the nearest error boundary to display the error provided. * - * ℹ️ React handles errors thrown during render, lifecycle methods, and constructors. + * ℹ️ React handles errors thrown while rendering. * Errors thrown in event handlers, or after async code has run, will not be caught automatically. * This method is a way to imperatively show the nearest error boundary for those errors. */ diff --git a/public/generated/docs/ErrorBoundary.json b/public/generated/docs/ErrorBoundary.json index 8c65f906..e6d3722c 100644 --- a/public/generated/docs/ErrorBoundary.json +++ b/public/generated/docs/ErrorBoundary.json @@ -4,10 +4,10 @@ "content": "

A reusable React error boundary component.\nWrap this component around other React components to "catch" errors and render a fallback UI.

\n" }, { - "content": "

This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render,\nlifecycle methods, and constructors of the whole tree below them.

\n" + "content": "

This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering\nthe tree below them.

\n" }, { - "content": "

Error boundaries do not catch errors thrown during:

\n
    \n
  • Server side rendering
    • \n
  • Event handlers
    • \n
  • Async code that runs after rendering, like setTimeout callbacks or unresolved promises
    • \n
\n" + "content": "

Error boundaries do not catch errors thrown during:

\n
    \n
  • Server side rendering
    • \n
  • Event handlers
    • \n
  • Errors thrown in the error boundary itself
    • \n
  • Async code that runs after rendering, like setTimeout callbacks or unresolved promises
    • \n
\n" }, { "content": "

React 19 includes one important async exception: errors thrown inside Actions, including functions passed to\nstartTransition, can be caught by the nearest error boundary.

\n" diff --git a/public/generated/search-index.json b/public/generated/search-index.json index bb834899..2b5da34a 100644 --- a/public/generated/search-index.json +++ b/public/generated/search-index.json @@ -37,7 +37,7 @@ "n": 0.5 }, "2": { - "v": " Getting started with react-error-boundary React components and utils for managing runtime errors. Supports all React renderers (including React DOM and React Native). This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render, lifecycle methods, and constructors of the whole tree below them. This means that it can't catch errors during: Server side rendering Event handlers Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. Installation Begin by installing the library from NPM: npm install react-error-boundary TypeScript definitions are included within the published dist folder. Support Here are some ways to support this project: Become a GitHub sponsor Buy me a coffee ", + "v": " Getting started with react-error-boundary React components and utils for managing runtime errors. Supports all React renderers (including React DOM and React Native). This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. Installation Begin by installing the library from NPM: npm install react-error-boundary TypeScript definitions are included within the published dist folder. Support Here are some ways to support this project: Become a GitHub sponsor Buy me a coffee ", "n": 0.073 } } @@ -122,8 +122,8 @@ "n": 1 }, "2": { - "v": " Examples Async user code errors React handles errors thrown during render, lifecycle methods, and constructors. Errors thrown in event handlers, or after async code has run, will not be caught by an error boundary automatically. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action and show the nearest error boundary. Learn more. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary: import { useErrorBoundary } from \"react-error-boundary\" ; \n \n function UserProfile ( { username } : { username : string } ) { \n const { showBoundary } = useErrorBoundary ( ) ; \n \n async function loadProfile ( ) { \n try { \n await fetchUserProfile ( username ) ; \n } catch ( error ) { \n showBoundary ( error ) ; \n } \n } \n \n return < button onClick = { loadProfile } > Load profile ; \n } ", - "n": 0.077 + "v": " Examples Async user code errors React handles errors thrown while rendering the tree below an error boundary. Errors thrown in event handlers, or after async code has run, will not be caught by an error boundary automatically. In React 19, for user-initiated async work, wrap the work in a Transition so React can catch errors from the Action and show the nearest error boundary. Learn more. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary: import { useErrorBoundary } from \"react-error-boundary\" ; \n \n function UserProfile ( { username } : { username : string } ) { \n const { showBoundary } = useErrorBoundary ( ) ; \n \n async function loadProfile ( ) { \n try { \n await fetchUserProfile ( username ) ; \n } catch ( error ) { \n showBoundary ( error ) ; \n } \n } \n \n return < button onClick = { loadProfile } > Load profile ; \n } ", + "n": 0.076 } } }, @@ -173,7 +173,7 @@ "n": 1 }, "2": { - "v": " API ErrorBoundary component props A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render,\nlifecycle methods, and constructors of the whole tree below them.\n Error boundaries do not catch errors thrown during:\n\nServer side rendering\nEvent handlers\nAsync code that runs after rendering, like setTimeout callbacks or unresolved promises\n\n React 19 includes one important async exception: errors thrown inside Actions, including functions passed to\nstartTransition, can be caught by the nearest error boundary.\n For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The\nuseErrorBoundary hook can also be used to pass errors from async code outside of Actions to the nearest error\nboundary.\n The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.\n This is a client component. You can only pass props to it that are serializable or use it in files that have a \"use client\"; directive.\n Optional props fallback ? : ReactNode Static content to render in place of an error if one is thrown.\n < ErrorBoundary fallback = { < div className = \"text-red\" > Something went wrong } /> FallbackComponent ? : ComponentType < FallbackProps > React component responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary FallbackComponent = { Fallback } /> fallbackRender ? : ( props : FallbackProps ) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => < div > ... } /> onError ? : ( error : unknown , info : ErrorInfo ) => void Optional callback to enable e.g. logging error information to a server.\n\n error Value that was thrown; typically an instance of Error \n info React \"component stack\" identifying where the error was thrown\n\n onReset ? : ( details : { reason : \"imperative-api\" ; args : unknown [ ] ; } | { reason : \"keys\" ; prev : unknown [ ] ; next : unknown [ ] ; } ) => void Optional callback to be notified when an error boundary is reset so React can retry the failed render.\n resetKeys ? : unknown [ ] When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the documentation for examples of how to use this prop.\n ", + "v": " API ErrorBoundary component props A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering\nthe tree below them.\n Error boundaries do not catch errors thrown during:\n\nServer side rendering\nEvent handlers\nErrors thrown in the error boundary itself\nAsync code that runs after rendering, like setTimeout callbacks or unresolved promises\n\n React 19 includes one important async exception: errors thrown inside Actions, including functions passed to\nstartTransition, can be caught by the nearest error boundary.\n For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The\nuseErrorBoundary hook can also be used to pass errors from async code outside of Actions to the nearest error\nboundary.\n The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.\n This is a client component. You can only pass props to it that are serializable or use it in files that have a \"use client\"; directive.\n Optional props fallback ? : ReactNode Static content to render in place of an error if one is thrown.\n < ErrorBoundary fallback = { < div className = \"text-red\" > Something went wrong } /> FallbackComponent ? : ComponentType < FallbackProps > React component responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary FallbackComponent = { Fallback } /> fallbackRender ? : ( props : FallbackProps ) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => < div > ... } /> onError ? : ( error : unknown , info : ErrorInfo ) => void Optional callback to enable e.g. logging error information to a server.\n\n error Value that was thrown; typically an instance of Error \n info React \"component stack\" identifying where the error was thrown\n\n onReset ? : ( details : { reason : \"imperative-api\" ; args : unknown [ ] ; } | { reason : \"keys\" ; prev : unknown [ ] ; next : unknown [ ] ; } ) => void Optional callback to be notified when an error boundary is reset so React can retry the failed render.\n resetKeys ? : unknown [ ] When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the documentation for examples of how to use this prop.\n ", "n": 0.047 } } @@ -237,7 +237,7 @@ "n": 0.707 }, "2": { - "v": " Common questions Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render, lifecycle methods, and constructors of the whole tree below them. This means that it can't catch errors during: Server side rendering Event handlers Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. ErrorBoundary cannot be used as a JSX component This error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly. For NPM, you may need to use an override: { \n \"overrides\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Yarn has a similar mechanism called a resolution: { \n \"resolutions\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Unable to resolve path to module 'react-error-boundary' The version 6.0 release of this library switched to ESM-only to better work with modern JavaScript tooling. If your project uses a framework or runtime that does not yet support ES Modules (like Expo or Hermes) then you should use version 5 of this library. There are no major API differences between these two versions other than ESM support. ", + "v": " Common questions Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. ErrorBoundary cannot be used as a JSX component This error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly. For NPM, you may need to use an override: { \n \"overrides\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Yarn has a similar mechanism called a resolution: { \n \"resolutions\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Unable to resolve path to module 'react-error-boundary' The version 6.0 release of this library switched to ESM-only to better work with modern JavaScript tooling. If your project uses a framework or runtime that does not yet support ES Modules (like Expo or Hermes) then you should use version 5 of this library. There are no major API differences between these two versions other than ESM support. ", "n": 0.06 } } diff --git a/public/generated/search-records.json b/public/generated/search-records.json index aebf66c6..b41f04bf 100644 --- a/public/generated/search-records.json +++ b/public/generated/search-records.json @@ -1,7 +1,7 @@ [ { "path": "/", - "text": " Getting started with react-error-boundary React components and utils for managing runtime errors. Supports all React renderers (including React DOM and React Native). This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render, lifecycle methods, and constructors of the whole tree below them. This means that it can't catch errors during: Server side rendering Event handlers Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. Installation Begin by installing the library from NPM: npm install react-error-boundary TypeScript definitions are included within the published dist folder. Support Here are some ways to support this project: Become a GitHub sponsor Buy me a coffee ", + "text": " Getting started with react-error-boundary React components and utils for managing runtime errors. Supports all React renderers (including React DOM and React Native). This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. Installation Begin by installing the library from NPM: npm install react-error-boundary TypeScript definitions are included within the published dist folder. Support Here are some ways to support this project: Become a GitHub sponsor Buy me a coffee ", "title": "Getting started with react-error-boundary" }, { @@ -31,7 +31,7 @@ { "path": "/examples/async-user-code-errors", "section": "Examples", - "text": " Examples Async user code errors React handles errors thrown during render, lifecycle methods, and constructors. Errors thrown in event handlers, or after async code has run, will not be caught by an error boundary automatically. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action and show the nearest error boundary. Learn more. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary: import { useErrorBoundary } from \"react-error-boundary\" ; \n \n function UserProfile ( { username } : { username : string } ) { \n const { showBoundary } = useErrorBoundary ( ) ; \n \n async function loadProfile ( ) { \n try { \n await fetchUserProfile ( username ) ; \n } catch ( error ) { \n showBoundary ( error ) ; \n } \n } \n \n return < button onClick = { loadProfile } > Load profile ; \n } ", + "text": " Examples Async user code errors React handles errors thrown while rendering the tree below an error boundary. Errors thrown in event handlers, or after async code has run, will not be caught by an error boundary automatically. In React 19, for user-initiated async work, wrap the work in a Transition so React can catch errors from the Action and show the nearest error boundary. Learn more. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary: import { useErrorBoundary } from \"react-error-boundary\" ; \n \n function UserProfile ( { username } : { username : string } ) { \n const { showBoundary } = useErrorBoundary ( ) ; \n \n async function loadProfile ( ) { \n try { \n await fetchUserProfile ( username ) ; \n } catch ( error ) { \n showBoundary ( error ) ; \n } \n } \n \n return < button onClick = { loadProfile } > Load profile ; \n } ", "title": "Async user code errors" }, { @@ -49,7 +49,7 @@ { "path": "/api/error-boundary-props", "section": "API", - "text": " API ErrorBoundary component props A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render,\nlifecycle methods, and constructors of the whole tree below them.\n Error boundaries do not catch errors thrown during:\n\nServer side rendering\nEvent handlers\nAsync code that runs after rendering, like setTimeout callbacks or unresolved promises\n\n React 19 includes one important async exception: errors thrown inside Actions, including functions passed to\nstartTransition, can be caught by the nearest error boundary.\n For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The\nuseErrorBoundary hook can also be used to pass errors from async code outside of Actions to the nearest error\nboundary.\n The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.\n This is a client component. You can only pass props to it that are serializable or use it in files that have a \"use client\"; directive.\n Optional props fallback ? : ReactNode Static content to render in place of an error if one is thrown.\n < ErrorBoundary fallback = { < div className = \"text-red\" > Something went wrong } /> FallbackComponent ? : ComponentType < FallbackProps > React component responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary FallbackComponent = { Fallback } /> fallbackRender ? : ( props : FallbackProps ) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => < div > ... } /> onError ? : ( error : unknown , info : ErrorInfo ) => void Optional callback to enable e.g. logging error information to a server.\n\n error Value that was thrown; typically an instance of Error \n info React \"component stack\" identifying where the error was thrown\n\n onReset ? : ( details : { reason : \"imperative-api\" ; args : unknown [ ] ; } | { reason : \"keys\" ; prev : unknown [ ] ; next : unknown [ ] ; } ) => void Optional callback to be notified when an error boundary is reset so React can retry the failed render.\n resetKeys ? : unknown [ ] When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the documentation for examples of how to use this prop.\n ", + "text": " API ErrorBoundary component props A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering\nthe tree below them.\n Error boundaries do not catch errors thrown during:\n\nServer side rendering\nEvent handlers\nErrors thrown in the error boundary itself\nAsync code that runs after rendering, like setTimeout callbacks or unresolved promises\n\n React 19 includes one important async exception: errors thrown inside Actions, including functions passed to\nstartTransition, can be caught by the nearest error boundary.\n For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The\nuseErrorBoundary hook can also be used to pass errors from async code outside of Actions to the nearest error\nboundary.\n The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.\n This is a client component. You can only pass props to it that are serializable or use it in files that have a \"use client\"; directive.\n Optional props fallback ? : ReactNode Static content to render in place of an error if one is thrown.\n < ErrorBoundary fallback = { < div className = \"text-red\" > Something went wrong } /> FallbackComponent ? : ComponentType < FallbackProps > React component responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary FallbackComponent = { Fallback } /> fallbackRender ? : ( props : FallbackProps ) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => < div > ... } /> onError ? : ( error : unknown , info : ErrorInfo ) => void Optional callback to enable e.g. logging error information to a server.\n\n error Value that was thrown; typically an instance of Error \n info React \"component stack\" identifying where the error was thrown\n\n onReset ? : ( details : { reason : \"imperative-api\" ; args : unknown [ ] ; } | { reason : \"keys\" ; prev : unknown [ ] ; next : unknown [ ] ; } ) => void Optional callback to be notified when an error boundary is reset so React can retry the failed render.\n resetKeys ? : unknown [ ] When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the documentation for examples of how to use this prop.\n ", "title": "ErrorBoundary component props" }, { @@ -72,7 +72,7 @@ }, { "path": "/common-questions", - "text": " Common questions Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown during render, lifecycle methods, and constructors of the whole tree below them. This means that it can't catch errors during: Server side rendering Event handlers Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. ErrorBoundary cannot be used as a JSX component This error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly. For NPM, you may need to use an override: { \n \"overrides\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Yarn has a similar mechanism called a resolution: { \n \"resolutions\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Unable to resolve path to module 'react-error-boundary' The version 6.0 release of this library switched to ESM-only to better work with modern JavaScript tooling. If your project uses a framework or runtime that does not yet support ES Modules (like Expo or Hermes) then you should use version 5 of this library. There are no major API differences between these two versions other than ESM support. ", + "text": " Common questions Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. ErrorBoundary cannot be used as a JSX component This error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly. For NPM, you may need to use an override: { \n \"overrides\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Yarn has a similar mechanism called a resolution: { \n \"resolutions\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Unable to resolve path to module 'react-error-boundary' The version 6.0 release of this library switched to ESM-only to better work with modern JavaScript tooling. If your project uses a framework or runtime that does not yet support ES Modules (like Expo or Hermes) then you should use version 5 of this library. There are no major API differences between these two versions other than ESM support. ", "title": "Common questions" }, { diff --git a/src/App.tsx b/src/App.tsx index 525bf3c6..e0598935 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -81,13 +81,13 @@ const clientSideWarning = ( , so it has all of the advantages and constraints of that API.
- Error boundaries catch errors thrown during render, lifecycle methods, and - constructors of the whole tree below them. + Error boundaries catch errors thrown while rendering the tree below them.
This means that it can't catch errors during:
  • Server side rendering
  • Event handlers
    • +
  • Errors thrown in the error boundary itself
  • Async code that runs after rendering, like setTimeout callbacks or unresolved promises diff --git a/src/routes/AsyncUserCodeErrorsRoute.tsx b/src/routes/AsyncUserCodeErrorsRoute.tsx index b54fd3c5..e2e23e10 100644 --- a/src/routes/AsyncUserCodeErrorsRoute.tsx +++ b/src/routes/AsyncUserCodeErrorsRoute.tsx @@ -6,13 +6,14 @@ export default function AsyncUserCodeErrorsRoute() {
    - React handles errors thrown during render, lifecycle methods, and - constructors. Errors thrown in event handlers, or after async code has - run, will not be caught by an error boundary automatically. + React handles errors thrown while rendering the tree below an error + boundary. Errors thrown in event handlers, or after async code has run, + will not be caught by an error boundary automatically.
    - For user-initiated async work, wrap the work in a Transition so React - can catch errors from the Action and show the nearest error boundary.{" "} + In React 19, for user-initiated async work, wrap the work in a + Transition so React can catch errors from the Action and show the + nearest error boundary.{" "} Learn more.
    From 9bd0b8f204dfa36d57e826e75273e465c3454aa2 Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Sun, 24 May 2026 23:55:26 +0200 Subject: [PATCH 4/6] Clarify useTransition error handling docs --- README.md | 6 +++--- lib/components/ErrorBoundary.tsx | 4 ++-- public/generated/docs/ErrorBoundary.json | 2 +- public/generated/search-index.json | 12 ++++++------ public/generated/search-records.json | 8 ++++---- src/App.tsx | 4 ++-- src/routes/TransitionErrorsRoute.tsx | 6 +++--- 7 files changed, 21 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 09bb8043..9b257d29 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ Error boundaries do not catch errors thrown during: - Errors thrown in the error boundary itself - Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises -React 19 includes one important async exception: errors thrown inside Actions, including functions passed to `startTransition`, can be caught by the nearest error boundary. +React 19 includes one important async exception: errors thrown inside Actions, including functions passed to the `startTransition` function returned by `useTransition`, can be caught by the nearest error boundary. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action and show the nearest error boundary: @@ -133,8 +133,8 @@ Error boundaries do not catch errors thrown during: - Errors thrown in the error boundary itself - Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises -React 19 includes one important async exception: errors thrown inside Actions, including functions passed to -`startTransition`, can be caught by the nearest error boundary. +React 19 includes one important async exception: errors thrown inside Actions, including functions passed to the +`startTransition` function returned by `useTransition`, can be caught by the nearest error boundary. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The `useErrorBoundary` hook can also be used to pass errors from async code outside of Actions to the nearest error diff --git a/lib/components/ErrorBoundary.tsx b/lib/components/ErrorBoundary.tsx index c4c6b563..82a2d6b4 100644 --- a/lib/components/ErrorBoundary.tsx +++ b/lib/components/ErrorBoundary.tsx @@ -33,8 +33,8 @@ const initialState: ErrorBoundaryState = { * - Errors thrown in the error boundary itself * - Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises * - * React 19 includes one important async exception: errors thrown inside Actions, including functions passed to - * `startTransition`, can be caught by the nearest error boundary. + * React 19 includes one important async exception: errors thrown inside Actions, including functions passed to the + * `startTransition` function returned by `useTransition`, can be caught by the nearest error boundary. * * For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The * `useErrorBoundary` hook can also be used to pass errors from async code outside of Actions to the nearest error diff --git a/public/generated/docs/ErrorBoundary.json b/public/generated/docs/ErrorBoundary.json index e6d3722c..48f96c20 100644 --- a/public/generated/docs/ErrorBoundary.json +++ b/public/generated/docs/ErrorBoundary.json @@ -10,7 +10,7 @@ "content": "

    Error boundaries do not catch errors thrown during:

    \n
      \n
    • Server side rendering
      • \n
    • Event handlers
      • \n
    • Errors thrown in the error boundary itself
      • \n
    • Async code that runs after rendering, like setTimeout callbacks or unresolved promises
      • \n
    \n" }, { - "content": "

    React 19 includes one important async exception: errors thrown inside Actions, including functions passed to\nstartTransition, can be caught by the nearest error boundary.

    \n" + "content": "

    React 19 includes one important async exception: errors thrown inside Actions, including functions passed to the\nstartTransition function returned by useTransition, can be caught by the nearest error boundary.

    \n" }, { "content": "

    For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The\nuseErrorBoundary hook can also be used to pass errors from async code outside of Actions to the nearest error\nboundary.

    \n" diff --git a/public/generated/search-index.json b/public/generated/search-index.json index 2b5da34a..b3d88740 100644 --- a/public/generated/search-index.json +++ b/public/generated/search-index.json @@ -37,8 +37,8 @@ "n": 0.5 }, "2": { - "v": " Getting started with react-error-boundary React components and utils for managing runtime errors. Supports all React renderers (including React DOM and React Native). This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. Installation Begin by installing the library from NPM: npm install react-error-boundary TypeScript definitions are included within the published dist folder. Support Here are some ways to support this project: Become a GitHub sponsor Buy me a coffee ", - "n": 0.073 + "v": " Getting started with react-error-boundary React components and utils for managing runtime errors. Supports all React renderers (including React DOM and React Native). This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to the startTransition function returned by useTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. Installation Begin by installing the library from NPM: npm install react-error-boundary TypeScript definitions are included within the published dist folder. Support Here are some ways to support this project: Become a GitHub sponsor Buy me a coffee ", + "n": 0.072 } } }, @@ -139,8 +139,8 @@ "n": 1 }, "2": { - "v": " Examples Transition errors React 19 catches errors thrown inside Actions and shows the fallback for the nearest error boundary. Actions include functions passed to startTransition. This is useful for user-initiated async work where an unexpected error should replace a section of the UI. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary. import { useTransition } from \"react\" ; \n import { ErrorBoundary } from \"react-error-boundary\" ; \n \n function AddCommentContainer ( ) { \n return ( \n < ErrorBoundary fallback = { < p > Could not add comment } > \n < AddCommentButton /> \n \n ) ; \n } \n \n function AddCommentButton ( ) { \n const [ isPending , startTransition ] = useTransition ( ) ; \n \n function handleClick ( ) { \n startTransition ( async ( ) => { \n await addComment ( ) ; \n } ) ; \n } \n \n return ( \n < button disabled = { isPending } onClick = { handleClick } > \n { isPending ? \"Adding...\" : \"Add comment\" } \n \n ) ; \n } ", - "n": 0.071 + "v": " Examples Transition errors React 19 catches errors thrown inside Actions and shows the fallback for the nearest error boundary. This includes functions passed to the startTransition function returned by useTransition. This is useful for user-initiated async work where an unexpected error should replace a section of the UI. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary. import { useTransition } from \"react\" ; \n import { ErrorBoundary } from \"react-error-boundary\" ; \n \n function AddCommentContainer ( ) { \n return ( \n < ErrorBoundary fallback = { < p > Could not add comment } > \n < AddCommentButton /> \n \n ) ; \n } \n \n function AddCommentButton ( ) { \n const [ isPending , startTransition ] = useTransition ( ) ; \n \n function handleClick ( ) { \n startTransition ( async ( ) => { \n await addComment ( ) ; \n } ) ; \n } \n \n return ( \n < button disabled = { isPending } onClick = { handleClick } > \n { isPending ? \"Adding...\" : \"Add comment\" } \n \n ) ; \n } ", + "n": 0.07 } } }, @@ -173,7 +173,7 @@ "n": 1 }, "2": { - "v": " API ErrorBoundary component props A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering\nthe tree below them.\n Error boundaries do not catch errors thrown during:\n\nServer side rendering\nEvent handlers\nErrors thrown in the error boundary itself\nAsync code that runs after rendering, like setTimeout callbacks or unresolved promises\n\n React 19 includes one important async exception: errors thrown inside Actions, including functions passed to\nstartTransition, can be caught by the nearest error boundary.\n For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The\nuseErrorBoundary hook can also be used to pass errors from async code outside of Actions to the nearest error\nboundary.\n The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.\n This is a client component. You can only pass props to it that are serializable or use it in files that have a \"use client\"; directive.\n Optional props fallback ? : ReactNode Static content to render in place of an error if one is thrown.\n < ErrorBoundary fallback = { < div className = \"text-red\" > Something went wrong } /> FallbackComponent ? : ComponentType < FallbackProps > React component responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary FallbackComponent = { Fallback } /> fallbackRender ? : ( props : FallbackProps ) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => < div > ... } /> onError ? : ( error : unknown , info : ErrorInfo ) => void Optional callback to enable e.g. logging error information to a server.\n\n error Value that was thrown; typically an instance of Error \n info React \"component stack\" identifying where the error was thrown\n\n onReset ? : ( details : { reason : \"imperative-api\" ; args : unknown [ ] ; } | { reason : \"keys\" ; prev : unknown [ ] ; next : unknown [ ] ; } ) => void Optional callback to be notified when an error boundary is reset so React can retry the failed render.\n resetKeys ? : unknown [ ] When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the documentation for examples of how to use this prop.\n ", + "v": " API ErrorBoundary component props A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering\nthe tree below them.\n Error boundaries do not catch errors thrown during:\n\nServer side rendering\nEvent handlers\nErrors thrown in the error boundary itself\nAsync code that runs after rendering, like setTimeout callbacks or unresolved promises\n\n React 19 includes one important async exception: errors thrown inside Actions, including functions passed to the\nstartTransition function returned by useTransition, can be caught by the nearest error boundary.\n For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The\nuseErrorBoundary hook can also be used to pass errors from async code outside of Actions to the nearest error\nboundary.\n The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.\n This is a client component. You can only pass props to it that are serializable or use it in files that have a \"use client\"; directive.\n Optional props fallback ? : ReactNode Static content to render in place of an error if one is thrown.\n < ErrorBoundary fallback = { < div className = \"text-red\" > Something went wrong } /> FallbackComponent ? : ComponentType < FallbackProps > React component responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary FallbackComponent = { Fallback } /> fallbackRender ? : ( props : FallbackProps ) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => < div > ... } /> onError ? : ( error : unknown , info : ErrorInfo ) => void Optional callback to enable e.g. logging error information to a server.\n\n error Value that was thrown; typically an instance of Error \n info React \"component stack\" identifying where the error was thrown\n\n onReset ? : ( details : { reason : \"imperative-api\" ; args : unknown [ ] ; } | { reason : \"keys\" ; prev : unknown [ ] ; next : unknown [ ] ; } ) => void Optional callback to be notified when an error boundary is reset so React can retry the failed render.\n resetKeys ? : unknown [ ] When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the documentation for examples of how to use this prop.\n ", "n": 0.047 } } @@ -237,7 +237,7 @@ "n": 0.707 }, "2": { - "v": " Common questions Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. ErrorBoundary cannot be used as a JSX component This error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly. For NPM, you may need to use an override: { \n \"overrides\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Yarn has a similar mechanism called a resolution: { \n \"resolutions\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Unable to resolve path to module 'react-error-boundary' The version 6.0 release of this library switched to ESM-only to better work with modern JavaScript tooling. If your project uses a framework or runtime that does not yet support ES Modules (like Expo or Hermes) then you should use version 5 of this library. There are no major API differences between these two versions other than ESM support. ", + "v": " Common questions Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to the startTransition function returned by useTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. ErrorBoundary cannot be used as a JSX component This error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly. For NPM, you may need to use an override: { \n \"overrides\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Yarn has a similar mechanism called a resolution: { \n \"resolutions\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Unable to resolve path to module 'react-error-boundary' The version 6.0 release of this library switched to ESM-only to better work with modern JavaScript tooling. If your project uses a framework or runtime that does not yet support ES Modules (like Expo or Hermes) then you should use version 5 of this library. There are no major API differences between these two versions other than ESM support. ", "n": 0.06 } } diff --git a/public/generated/search-records.json b/public/generated/search-records.json index b41f04bf..c36bcbf5 100644 --- a/public/generated/search-records.json +++ b/public/generated/search-records.json @@ -1,7 +1,7 @@ [ { "path": "/", - "text": " Getting started with react-error-boundary React components and utils for managing runtime errors. Supports all React renderers (including React DOM and React Native). This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. Installation Begin by installing the library from NPM: npm install react-error-boundary TypeScript definitions are included within the published dist folder. Support Here are some ways to support this project: Become a GitHub sponsor Buy me a coffee ", + "text": " Getting started with react-error-boundary React components and utils for managing runtime errors. Supports all React renderers (including React DOM and React Native). This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to the startTransition function returned by useTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. Installation Begin by installing the library from NPM: npm install react-error-boundary TypeScript definitions are included within the published dist folder. Support Here are some ways to support this project: Become a GitHub sponsor Buy me a coffee ", "title": "Getting started with react-error-boundary" }, { @@ -37,7 +37,7 @@ { "path": "/examples/transition-errors", "section": "Examples", - "text": " Examples Transition errors React 19 catches errors thrown inside Actions and shows the fallback for the nearest error boundary. Actions include functions passed to startTransition. This is useful for user-initiated async work where an unexpected error should replace a section of the UI. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary. import { useTransition } from \"react\" ; \n import { ErrorBoundary } from \"react-error-boundary\" ; \n \n function AddCommentContainer ( ) { \n return ( \n < ErrorBoundary fallback = { < p > Could not add comment } > \n < AddCommentButton /> \n \n ) ; \n } \n \n function AddCommentButton ( ) { \n const [ isPending , startTransition ] = useTransition ( ) ; \n \n function handleClick ( ) { \n startTransition ( async ( ) => { \n await addComment ( ) ; \n } ) ; \n } \n \n return ( \n < button disabled = { isPending } onClick = { handleClick } > \n { isPending ? \"Adding...\" : \"Add comment\" } \n \n ) ; \n } ", + "text": " Examples Transition errors React 19 catches errors thrown inside Actions and shows the fallback for the nearest error boundary. This includes functions passed to the startTransition function returned by useTransition. This is useful for user-initiated async work where an unexpected error should replace a section of the UI. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary. import { useTransition } from \"react\" ; \n import { ErrorBoundary } from \"react-error-boundary\" ; \n \n function AddCommentContainer ( ) { \n return ( \n < ErrorBoundary fallback = { < p > Could not add comment } > \n < AddCommentButton /> \n \n ) ; \n } \n \n function AddCommentButton ( ) { \n const [ isPending , startTransition ] = useTransition ( ) ; \n \n function handleClick ( ) { \n startTransition ( async ( ) => { \n await addComment ( ) ; \n } ) ; \n } \n \n return ( \n < button disabled = { isPending } onClick = { handleClick } > \n { isPending ? \"Adding...\" : \"Add comment\" } \n \n ) ; \n } ", "title": "Transition errors" }, { @@ -49,7 +49,7 @@ { "path": "/api/error-boundary-props", "section": "API", - "text": " API ErrorBoundary component props A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering\nthe tree below them.\n Error boundaries do not catch errors thrown during:\n\nServer side rendering\nEvent handlers\nErrors thrown in the error boundary itself\nAsync code that runs after rendering, like setTimeout callbacks or unresolved promises\n\n React 19 includes one important async exception: errors thrown inside Actions, including functions passed to\nstartTransition, can be caught by the nearest error boundary.\n For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The\nuseErrorBoundary hook can also be used to pass errors from async code outside of Actions to the nearest error\nboundary.\n The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.\n This is a client component. You can only pass props to it that are serializable or use it in files that have a \"use client\"; directive.\n Optional props fallback ? : ReactNode Static content to render in place of an error if one is thrown.\n < ErrorBoundary fallback = { < div className = \"text-red\" > Something went wrong } /> FallbackComponent ? : ComponentType < FallbackProps > React component responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary FallbackComponent = { Fallback } /> fallbackRender ? : ( props : FallbackProps ) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => < div > ... } /> onError ? : ( error : unknown , info : ErrorInfo ) => void Optional callback to enable e.g. logging error information to a server.\n\n error Value that was thrown; typically an instance of Error \n info React \"component stack\" identifying where the error was thrown\n\n onReset ? : ( details : { reason : \"imperative-api\" ; args : unknown [ ] ; } | { reason : \"keys\" ; prev : unknown [ ] ; next : unknown [ ] ; } ) => void Optional callback to be notified when an error boundary is reset so React can retry the failed render.\n resetKeys ? : unknown [ ] When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the documentation for examples of how to use this prop.\n ", + "text": " API ErrorBoundary component props A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering\nthe tree below them.\n Error boundaries do not catch errors thrown during:\n\nServer side rendering\nEvent handlers\nErrors thrown in the error boundary itself\nAsync code that runs after rendering, like setTimeout callbacks or unresolved promises\n\n React 19 includes one important async exception: errors thrown inside Actions, including functions passed to the\nstartTransition function returned by useTransition, can be caught by the nearest error boundary.\n For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The\nuseErrorBoundary hook can also be used to pass errors from async code outside of Actions to the nearest error\nboundary.\n The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.\n This is a client component. You can only pass props to it that are serializable or use it in files that have a \"use client\"; directive.\n Optional props fallback ? : ReactNode Static content to render in place of an error if one is thrown.\n < ErrorBoundary fallback = { < div className = \"text-red\" > Something went wrong } /> FallbackComponent ? : ComponentType < FallbackProps > React component responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary FallbackComponent = { Fallback } /> fallbackRender ? : ( props : FallbackProps ) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => < div > ... } /> onError ? : ( error : unknown , info : ErrorInfo ) => void Optional callback to enable e.g. logging error information to a server.\n\n error Value that was thrown; typically an instance of Error \n info React \"component stack\" identifying where the error was thrown\n\n onReset ? : ( details : { reason : \"imperative-api\" ; args : unknown [ ] ; } | { reason : \"keys\" ; prev : unknown [ ] ; next : unknown [ ] ; } ) => void Optional callback to be notified when an error boundary is reset so React can retry the failed render.\n resetKeys ? : unknown [ ] When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the documentation for examples of how to use this prop.\n ", "title": "ErrorBoundary component props" }, { @@ -72,7 +72,7 @@ }, { "path": "/common-questions", - "text": " Common questions Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to startTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. ErrorBoundary cannot be used as a JSX component This error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly. For NPM, you may need to use an override: { \n \"overrides\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Yarn has a similar mechanism called a resolution: { \n \"resolutions\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Unable to resolve path to module 'react-error-boundary' The version 6.0 release of this library switched to ESM-only to better work with modern JavaScript tooling. If your project uses a framework or runtime that does not yet support ES Modules (like Expo or Hermes) then you should use version 5 of this library. There are no major API differences between these two versions other than ESM support. ", + "text": " Common questions Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to the startTransition function returned by useTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. ErrorBoundary cannot be used as a JSX component This error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly. For NPM, you may need to use an override: { \n \"overrides\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Yarn has a similar mechanism called a resolution: { \n \"resolutions\" : { \n \"@types/react\" : \"17.0.60\" \n } \n } Unable to resolve path to module 'react-error-boundary' The version 6.0 release of this library switched to ESM-only to better work with modern JavaScript tooling. If your project uses a framework or runtime that does not yet support ES Modules (like Expo or Hermes) then you should use version 5 of this library. There are no major API differences between these two versions other than ESM support. ", "title": "Common questions" }, { diff --git a/src/App.tsx b/src/App.tsx index e0598935..8bb5794f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -95,8 +95,8 @@ const clientSideWarning = (
React 19 includes one important async exception: errors thrown inside - Actions, including functions passed to startTransition, can be caught by - the nearest error boundary.{" "} + Actions, including functions passed to the startTransition function + returned by useTransition, can be caught by the nearest error boundary.{" "} Learn more.
diff --git a/src/routes/TransitionErrorsRoute.tsx b/src/routes/TransitionErrorsRoute.tsx index 5687bf2d..9dc94ce0 100644 --- a/src/routes/TransitionErrorsRoute.tsx +++ b/src/routes/TransitionErrorsRoute.tsx @@ -8,11 +8,11 @@ export default function TransitionErrorsRoute() {
React 19 catches errors thrown inside Actions and shows the fallback for - the nearest error boundary. Actions include functions passed to{" "} + the nearest error boundary. This includes functions passed to the{" "} startTransition - - . + {" "} + function returned by useTransition.
This is useful for user-initiated async work where an unexpected error From 7ecd5ae71645781a9f00bddf23d242ba8f18fdc6 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Sun, 24 May 2026 18:03:57 -0400 Subject: [PATCH 5/6] Bump react-lib-tools for better search UX --- package.json | 2 +- pnpm-lock.yaml | 17 ++----- public/generated/site-map.json | 83 ++++++++++++++++++++++++++++++++++ 3 files changed, 89 insertions(+), 13 deletions(-) create mode 100644 public/generated/site-map.json diff --git a/package.json b/package.json index 583f4d92..3c91b6f8 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "react-docgen-typescript": "^2.4.0", "react-dom": "^19.2.3", "react-error-boundary": "^6.0.0", - "react-lib-tools": "0.0.47", + "react-lib-tools": "0.0.53", "react-router-dom": "^7.6.3", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-visualizer": "^6.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e1ff40d7..0568ca35 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -126,8 +126,8 @@ importers: specifier: ^6.0.0 version: 6.0.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3) react-lib-tools: - specifier: 0.0.47 - version: 0.0.47(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.8.3) + specifier: 0.0.53 + version: 0.0.53(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.8.3) react-router-dom: specifier: ^7.6.3 version: 7.11.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3) @@ -2394,10 +2394,6 @@ packages: function-bind@1.1.2: resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==} - fuse.js@7.1.0: - resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==} - engines: {node: '>=10'} - gensync@1.0.0-beta.2: resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} engines: {node: '>=6.9.0'} @@ -3104,8 +3100,8 @@ packages: react-is@17.0.2: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} - react-lib-tools@0.0.47: - resolution: {integrity: sha512-uIJOufAWskBSjCwhsnnsF3Xt6aAPd0UjdhOnyXkWXMZVXoQ2oXW60lsi+hB1buaF5DkOvK2BPE8d5UjwWg6X8A==} + react-lib-tools@0.0.53: + resolution: {integrity: sha512-0KSuuryin8JbehtPtW9D9KMScWKWdE+GwDZC2SZIN9g7/7YzmoXcUxT6v+3GQ1jV3Bh7z+TJcOYY00XaeV5b8w==} peerDependencies: react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0 @@ -5936,8 +5932,6 @@ snapshots: function-bind@1.1.2: {} - fuse.js@7.1.0: {} - gensync@1.0.0-beta.2: {} get-caller-file@2.0.5: {} @@ -6574,7 +6568,7 @@ snapshots: react-is@17.0.2: {} - react-lib-tools@0.0.47(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.8.3): + react-lib-tools@0.0.53(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.8.3): dependencies: '@codemirror/lang-css': 6.3.1 '@codemirror/lang-html': 6.4.11 @@ -6585,7 +6579,6 @@ snapshots: '@codemirror/state': 6.5.3 '@lezer/highlight': 1.2.3 '@ts-ast-parser/core': 0.8.0(typescript@5.8.3) - fuse.js: 7.1.0 puppeteer: 24.38.0(typescript@5.8.3) react: 19.2.3 react-dom: 19.2.3(react@19.2.3) diff --git a/public/generated/site-map.json b/public/generated/site-map.json new file mode 100644 index 00000000..74e8f798 --- /dev/null +++ b/public/generated/site-map.json @@ -0,0 +1,83 @@ +[ + { + "path": "/", + "text": " React components and utils for managing runtime errors. Supports all React renderers (including React DOM and React Native). This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to the startTransition function returned by useTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. Installation Begin by installing the library from NPM: npm install react-error-boundary TypeScript definitions are included within the published dist folder. Support Here are some ways to support this project: Become a GitHub sponsor Buy me a coffee ", + "title": "Getting started with react-error-boundary" + }, + { + "path": "/examples/fallback", + "section": "Examples", + "text": " The simplest way to render a default error message. import { ErrorBoundary } from \"react-error-boundary\";\n \nSomething went wrong
}>\n \n; ", + "title": "Fallback content" + }, + { + "path": "/examples/render-prop", + "section": "Examples", + "text": " Render prop function responsible for returning a fallback UI based on a thrown value. import { ErrorBoundary, getErrorMessage } from \"react-error-boundary\";\n \n (\n
\n

Something went wrong:

\n 
{getErrorMessage(error)}
\n \n
\n )}\n onReset={(details) => {\n // Reset the state of your app so the error doesn't happen again\n }}\n>\n \n; ", + "title": "Render props" + }, + { + "path": "/examples/fallback-component", + "section": "Examples", + "text": " React component responsible for returning a fallback UI based on a thrown value. import { ErrorBoundary, getErrorMessage, type FallbackProps } from \"react-error-boundary\";\n \nfunction Fallback({ error, resetErrorBoundary }: FallbackProps) {\n return (\n
\n

Something went wrong:

\n 
{getErrorMessage(error)}
\n \n
\n );\n}\n \n {\n // Reset the state of your app so the error doesn't happen again\n }}\n>\n \n; ", + "title": "Fallback component" + }, + { + "path": "/examples/error-logging", + "section": "Examples", + "text": " Use the onError callback to log errors to a service like Sentry. import type { ErrorInfo } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n \nfunction logError(error: unknown, info: ErrorInfo) {\n // Do something with the error, e.g. log to an external API\n}\n \n\n \n; ", + "title": "Error logging" + }, + { + "path": "/examples/async-user-code-errors", + "section": "Examples", + "text": " React handles errors thrown while rendering the tree below an error boundary. Errors thrown in event handlers, or after async code has run, will not be caught by an error boundary automatically. In React 19, for user-initiated async work, wrap the work in a Transition so React can catch errors from the Action and show the nearest error boundary. Learn more. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary: import { useErrorBoundary } from \"react-error-boundary\";\n \nfunction UserProfile({ username }: { username: string }) {\n const { showBoundary } = useErrorBoundary();\n \n async function loadProfile() {\n try {\n await fetchUserProfile(username);\n } catch (error) {\n showBoundary(error);\n }\n }\n \n return ;\n} ", + "title": "Async user code errors" + }, + { + "path": "/examples/transition-errors", + "section": "Examples", + "text": " React 19 catches errors thrown inside Actions and shows the fallback for the nearest error boundary. This includes functions passed to the startTransition function returned by useTransition. This is useful for user-initiated async work where an unexpected error should replace a section of the UI. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary with useErrorBoundary. import { useTransition } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n \nfunction AddCommentContainer() {\n return (\n Could not add comment

}>\n \n \n );\n}\n \nfunction AddCommentButton() {\n const [isPending, startTransition] = useTransition();\n \n function handleClick() {\n startTransition(async () => {\n await addComment();\n });\n }\n \n return (\n \n );\n} ", + "title": "Transition errors" + }, + { + "path": "/examples/retry-nearest-boundary", + "section": "Examples", + "text": " The useErrorBoundary hook can be used to reset the nearest error boundary and retry a failed render attempt. import { useErrorBoundary } from \"react-error-boundary\";\n \nfunction Example() {\n const { resetBoundary } = useErrorBoundary();\n \n // Call resetBoundary() to reset the nearest ErrorBoundary and retry a failed render\n} ", + "title": "Reset nearest boundary" + }, + { + "path": "/api/error-boundary-props", + "section": "API", + "text": " A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n This package is built on top of React error boundaries,\nso it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering\nthe tree below them.\n Error boundaries do not catch errors thrown during:\n\nServer side rendering\nEvent handlers\nErrors thrown in the error boundary itself\nAsync code that runs after rendering, like setTimeout callbacks or unresolved promises\n\n React 19 includes one important async exception: errors thrown inside Actions, including functions passed to the\nstartTransition function returned by useTransition, can be caught by the nearest error boundary.\n For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. The\nuseErrorBoundary hook can also be used to pass errors from async code outside of Actions to the nearest error\nboundary.\n The component provides several ways to render a fallback: fallback, fallbackRender, and FallbackComponent.\nRefer to the documentation to determine which is best for your application.\n This is a client component. You can only pass props to it that are serializable or use it in files that have a \"use client\"; directive.\n Optional props fallback?: ReactNode Static content to render in place of an error if one is thrown.\n < ErrorBoundary fallback = { < div className = \"text-red\" > Something went wrong } /> FallbackComponent?: ComponentType React component responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary FallbackComponent = { Fallback } /> fallbackRender?: (props: FallbackProps) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n < ErrorBoundary fallbackRender = { ( { error , resetErrorBoundary } ) => < div > ... } /> onError?: (error: unknown, info: ErrorInfo) => void Optional callback to enable e.g. logging error information to a server.\n\n error Value that was thrown; typically an instance of Error \n info React \"component stack\" identifying where the error was thrown\n\n onReset?: (details: { reason: \"imperative-api\"; args: unknown[]; } | { reason: \"keys\"; prev: unknown[]; next: unknown[]; }) => void Optional callback to be notified when an error boundary is reset so React can retry the failed render.\n resetKeys?: unknown[] When changed, these keys will reset a triggered error boundary.\nThis can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).\nSee the documentation for examples of how to use this prop.\n ", + "title": "ErrorBoundary component props" + }, + { + "path": "/api/use-error-boundary-hook", + "section": "API", + "text": " Convenience hook for imperatively showing or dismissing error boundaries. import { useErrorBoundary } from \"react-error-boundary\";\n \nfunction Example() {\n const {\n // The currently visible Error (if one has been thrown).\n error,\n \n // Method to reset and retry the nearest active error boundary (if one is active).\n resetBoundary,\n \n // Trigger the nearest error boundary to display the error provided.\n showBoundary,\n } = useErrorBoundary();\n \n // ...\n} This hook must only be used within an ErrorBoundary subtree. ", + "title": "useErrorBoundary hook" + }, + { + "path": "/api/with-error-boundary-hoc", + "section": "API", + "text": " This package can also be used as a higher-order component. For example, given a component like this: function UserProfile({ username }: { username: string }) {\n // Render...\n} You could use the withErrorBoundary HOC to create a wrapper component: import { withErrorBoundary } from \"react-error-boundary\";\n \nconst UserProfileWithErrorBoundary = withErrorBoundary(UserProfile, {\n fallback:
Something went wrong
,\n onError(error, info) {\n // Do something with the error\n // E.g. log to an error logging client here\n },\n}); And then render it like this ; This might be useful for certain types of reusable/library components. ", + "title": "withErrorBoundary HOC" + }, + { + "path": "/api/get-error-message", + "section": "API", + "text": " Typically thrown errors in JavaScript are instances of type Error, but this is not always the case. Any value can be thrown- strings, numbers, even null or undefined. To simplify working with thrown values, this library exports a utility method called getErrorMessage. import { getErrorMessage, type FallbackProps } from \"react-error-boundary\";\n \nfunction Fallback({ error }: FallbackProps) {\n // Because 'error' can be anything, it's safest not to assume it's an Error\n // Use the getErrorMessage helper method to extract the message instead.\n const message = getErrorMessage(error) ?? \"Unknown error\";\n \n // Render fallback UI...\n} ", + "title": "getErrorMessage helper" + }, + { + "path": "/common-questions", + "text": " Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it has all of the advantages and constraints of that API. Error boundaries catch errors thrown while rendering the tree below them. This means that it can't catch errors during: Server side rendering Event handlers Errors thrown in the error boundary itself Async code that runs after rendering, like setTimeout callbacks or unresolved promises React 19 includes one important async exception: errors thrown inside Actions, including functions passed to the startTransition function returned by useTransition, can be caught by the nearest error boundary. Learn more. For user-initiated async work, wrap the work in a Transition so React can catch errors from the Action. For async work outside of Actions, catch the error yourself and pass it to the nearest boundary. Learn more. ErrorBoundary cannot be used as a JSX component This error can be caused by a version mismatch between react and @types/react. To fix this, ensure that both match exactly. For NPM, you may need to use an override: {\n \"overrides\": {\n \"@types/react\": \"17.0.60\"\n }\n} Yarn has a similar mechanism called a resolution: {\n \"resolutions\": {\n \"@types/react\": \"17.0.60\"\n }\n} Unable to resolve path to module 'react-error-boundary' The version 6.0 release of this library switched to ESM-only to better work with modern JavaScript tooling. If your project uses a framework or runtime that does not yet support ES Modules (like Expo or Hermes) then you should use version 5 of this library. There are no major API differences between these two versions other than ESM support. ", + "title": "Common questions" + }, + { + "path": "/support", + "text": " GitHub is the easiest place to look for help, but it's probably not the fastest. This project is maintained by a single developer so there is limited bandwidth for answering questions. I recommend asking questions on Stack Overflow or Reddit to start with. Both sites have active communities who often respond quickly. If you don't find an answer there you can try opening a GitHub issue- but please take a moment first to see if your question has has already been answered before opening a new one. ", + "title": "Support" + } +] \ No newline at end of file From d513ee16ea504ddfe9188c9a8ddc0d089c62ab69 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Sun, 24 May 2026 18:07:05 -0400 Subject: [PATCH 6/6] Update pending-changes YML --- .github/workflows/pending-changes.yml | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/.github/workflows/pending-changes.yml b/.github/workflows/pending-changes.yml index 6fb2d40b..592943d3 100644 --- a/.github/workflows/pending-changes.yml +++ b/.github/workflows/pending-changes.yml @@ -9,8 +9,20 @@ jobs: - uses: pnpm/action-setup@v2 with: version: 10 + - name: Install dependencies run: pnpm install --frozen-lockfile --recursive + env: + PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 'true' + + - name: Setup Google Chrome + uses: browser-actions/setup-chrome@v2 + id: setup-chrome + with: + install-dependencies: true + - uses: nickcharlton/diff-check@main with: - command: pnpm run compile + command: pnpm dev & pnpm run compile + env: + CHROME_PATH: ${{ steps.setup-chrome.outputs.chrome-path }} \ No newline at end of file