diff --git a/README.md b/README.md
index b4ab449..3a06140 100644
--- a/README.md
+++ b/README.md
@@ -69,9 +69,9 @@ 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
-## Async errors
+## Event handler and async errors
-For async errors:
+For event handler errors and async callback errors:
- Use `useErrorBoundary` to pass caught errors to the nearest boundary.
- In React 19, `useTransition` Actions can be an alternative: errors thrown from a function passed to the returned `startTransition` function are caught by the nearest boundary.
@@ -82,26 +82,26 @@ For async errors:
import { useTransition } from "react";
import { ErrorBoundary } from "react-error-boundary";
-function UserProfileContainer({ username }: { username: string }) {
+function AddCommentContainer() {
return (
- Could not load profile}>
-
+ Could not add comment}>
+
);
}
-function UserProfile({ username }: { username: string }) {
+function AddCommentButton() {
const [isPending, startTransition] = useTransition();
- function loadProfile() {
+ function handleClick() {
startTransition(async () => {
- await fetchUserProfile(username);
+ await addComment();
});
}
return (
- \n );\n}\n \nfunction UserProfile({ username }: { username: string }) {\n const { showBoundary } = useErrorBoundary();\n \n useEffect(() => {\n let cancelled = false;\n \n fetchUserProfile(username).then(\n (response) => {\n if (!cancelled) {\n // Set data in state and re-render\n }\n },\n (error) => {\n if (!cancelled) {\n showBoundary(error);\n }\n },\n );\n \n return () => {\n cancelled = true;\n };\n }, [showBoundary, username]);\n \n return null;\n} ",
+ "title": "Event handler and async errors"
},
{
"path": "/examples/transition-errors",
@@ -49,7 +49,7 @@
{
"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 Catches errors thrown while rendering the tree below it.\n Does 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 Async errors:\n \nUse useErrorBoundary to pass caught errors to the nearest boundary\nIn React 19, errors thrown from a function passed to the startTransition function returned by useTransition\nare caught by the nearest boundary\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 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 ",
+ "text": " A reusable React error boundary component.\nWrap this component around other React components to \"catch\" errors and render a fallback UI.\n Catches errors thrown while rendering the tree below it.\n Does 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 Event handler and async errors:\n \nUse useErrorBoundary to pass caught errors to the nearest boundary\nIn React 19, errors thrown from a function passed to the startTransition function returned by useTransition\nare caught by the nearest boundary\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 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"
},
{
@@ -72,7 +72,7 @@
},
{
"path": "/common-questions",
- "text": " Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it follows React's rules for what errors are caught. 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 For async errors: Use useErrorBoundary to pass caught errors to the nearest boundary. Learn more. In React 19, errors thrown from a function passed to the startTransition function returned by useTransition are caught by 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": " Why didn't the boundary catch my error? This package is built on top of React error boundaries, so it follows React's rules for what errors are caught. 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 For event handler errors and async callback errors: Use useErrorBoundary to pass caught errors to the nearest boundary. Learn more. In React 19, errors thrown from a function passed to the startTransition function returned by useTransition are caught by 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 69f4cbd..4f71e11 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,7 +29,7 @@ export default function App() {
Error logging
- Async user code errors
+ Events & async
Transition errors
@@ -93,7 +93,7 @@ const clientSideWarning = (
unresolved promises
-
For async errors:
+
For event handler errors and async callback errors:
Use useErrorBoundary to pass caught errors to the nearest
diff --git a/src/routes/AsyncUserCodeErrorsRoute.tsx b/src/routes/AsyncUserCodeErrorsRoute.tsx
index 6c12469..eaaa139 100644
--- a/src/routes/AsyncUserCodeErrorsRoute.tsx
+++ b/src/routes/AsyncUserCodeErrorsRoute.tsx
@@ -4,16 +4,18 @@ import { html } from "../../public/generated/examples/AsyncUserCodeErrors.json";
export default function AsyncUserCodeErrorsRoute() {
return (
-
+
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 async work outside of Actions, catch the error yourself and pass it
- to the nearest boundary with{" "}
- useErrorBoundary:
+ For async callback errors, like errors thrown after an Effect starts
+ loading data, catch the error yourself and pass it to the nearest
+ boundary with{" "}
+ useErrorBoundary. You can
+ use the same pattern for event handler errors:
In React 19, useTransition Actions can be an alternative:
diff --git a/src/routes/examples/AsyncUserCodeErrors.tsx b/src/routes/examples/AsyncUserCodeErrors.tsx
index ccb81cb..643aa93 100644
--- a/src/routes/examples/AsyncUserCodeErrors.tsx
+++ b/src/routes/examples/AsyncUserCodeErrors.tsx
@@ -1,21 +1,38 @@
-import { useErrorBoundary } from "react-error-boundary";
+import { useEffect } from "react";
+import { ErrorBoundary, useErrorBoundary } from "react-error-boundary";
+
+function UserProfileContainer({ username }: { username: string }) {
+ return (
+ Could not load profile}
+ resetKeys={[username]}
+ >
+
+
+ );
+}
function UserProfile({ username }: { username: string }) {
const { showBoundary } = useErrorBoundary();
- async function loadProfile() {
- try {
- await fetchUserProfile(username);
- } catch (error) {
- showBoundary(error);
- }
- }
+ useEffect(() => {
+ fetchGreeting(username).then(
+ (response) => {
+ // Set data in state and re-render ...
+ response; // hidden
+ },
+ (error) => {
+ // Show error boundary
+ showBoundary(error);
+ },
+ );
+ }, [showBoundary, username]);
- return ;
+ return null;
}
//
-export { UserProfile };
+export { UserProfileContainer };
-async function fetchUserProfile(_: string) {}
+async function fetchGreeting(_: string) {}