From 5944372c6aaae764624133d33167cd6c4928f6e4 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Sat, 10 Oct 2026 13:23:39 -0400 Subject: [PATCH] Fix typos --- README.md | 14 +++++++------- index.html | 4 ++-- lib/components/ErrorBoundary.tsx | 6 +++--- public/generated/docs/ErrorBoundary.json | 2 +- public/generated/examples/GetErrorMessage.json | 2 +- public/generated/site-map.json | 16 ++++++++-------- src/App.tsx | 10 +++++----- src/routes/AsyncUserCodeErrorsRoute.tsx | 2 +- src/routes/FallbackContentRoute.tsx | 2 +- src/routes/GetErrorMessageRoute.tsx | 2 +- src/routes/RenderPropRoute.tsx | 2 +- src/routes/ResetNearestBoundaryRoute.tsx | 2 +- src/routes/WithErrorBoundaryRoute.tsx | 2 +- src/routes/examples/GetErrorMessage.ts | 2 +- 14 files changed, 34 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 3a06140f..e4fc38b5 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ ### If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/) > [!NOTE] -> Projects using framework or runtimes that don't support ES Modules should use version 5 of this library. +> Projects using frameworks or runtimes that don't support ES Modules should use version 5 of this library. ## Getting started @@ -62,11 +62,11 @@ This package is built on top of React [error boundaries](https://react.dev/refer Error boundaries catch errors thrown while rendering the tree below them. -Error boundaries do not catch errors thrown during: +Error boundaries do not catch errors from: -- Server side rendering +- Server-side rendering - Event handlers -- Errors thrown in the error boundary itself +- The error boundary itself - Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises ## Event handler and async errors @@ -117,10 +117,10 @@ Wrap this component around other React components to "catch" errors and render a Catches errors thrown while rendering the tree below it. -Does not catch errors thrown during: -- Server side rendering +Does not catch errors from: +- Server-side rendering - Event handlers -- Errors thrown in the error boundary itself +- The error boundary itself - Async code that runs after rendering, like `setTimeout` callbacks or unresolved promises Event handler and async errors: diff --git a/index.html b/index.html index 2417f84c..9348a5fc 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - react-error-boundary | runtime error handler + react-error-boundary | runtime error handling @@ -17,7 +17,7 @@ Catches errors thrown while rendering the tree below it.

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

Does not catch errors thrown during:

\n\n" + "content": "

Does not catch errors from:

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

Event handler and async errors:

\n" diff --git a/public/generated/examples/GetErrorMessage.json b/public/generated/examples/GetErrorMessage.json index 57382300..b4324600 100644 --- a/public/generated/examples/GetErrorMessage.json +++ b/public/generated/examples/GetErrorMessage.json @@ -1,3 +1,3 @@ { - "html": "
import { getErrorMessage, type FallbackProps } from \"react-error-boundary\";
\n
 
\n
function 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
}
" + "html": "
import { getErrorMessage, type FallbackProps } from \"react-error-boundary\";
\n
 
\n
function 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
}
" } \ No newline at end of file diff --git a/public/generated/site-map.json b/public/generated/site-map.json index d5105ba6..c0a0e811 100644 --- a/public/generated/site-map.json +++ b/public/generated/site-map.json @@ -1,7 +1,7 @@ [ { "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 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. 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": " 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 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 from: Server-side rendering Event handlers 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. 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" }, { @@ -14,7 +14,7 @@ "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" + "title": "Render prop" }, { "path": "/examples/fallback-component", @@ -31,7 +31,7 @@ { "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. 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: errors thrown from a function passed to the returned startTransition function are caught by the nearest boundary. Learn more. import { useEffect } from \"react\";\nimport { ErrorBoundary, useErrorBoundary } from \"react-error-boundary\";\n \nfunction UserProfileContainer({ username }: { username: string }) {\n return (\n Could not load profile

}\n resetKeys={[username]}\n >\n \n \n );\n}\n \nfunction UserProfile({ 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 }, [showBoundary, username]);\n \n return null;\n} ", + "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. 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: import { useEffect } from \"react\";\nimport { ErrorBoundary, useErrorBoundary } from \"react-error-boundary\";\n \nfunction UserProfileContainer({ username }: { username: string }) {\n return (\n Could not load profile

}\n resetKeys={[username]}\n >\n \n \n );\n}\n \nfunction UserProfile({ 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 }, [showBoundary, username]);\n \n return null;\n} 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. Learn more. ", "title": "Events & async methods" }, { @@ -44,12 +44,12 @@ "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" + "title": "Retry 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 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 Something went wrong} /> FallbackComponent?: ComponentType React component responsible for returning a fallback UI based on a thrown value.\n fallbackRender?: (props: FallbackProps) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n
...
} /> 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 from:\n\nServer-side rendering\nEvent handlers\nThe 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 Something went wrong} /> FallbackComponent?: ComponentType React component responsible for returning a fallback UI based on a thrown value.\n fallbackRender?: (props: FallbackProps) => ReactNode Render prop function responsible for returning a fallback UI based on a thrown value.\n
...
} /> 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" }, { @@ -61,18 +61,18 @@ { "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. ", + "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} ", + "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 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. ", + "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 from: Server-side rendering Event handlers 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 5715857c..19c7c7d4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -83,14 +83,14 @@ const clientSideWarning = (
Error boundaries catch errors thrown while rendering the tree below them.
-
This means that it can't catch errors during:
+
This means that it can't catch errors from:
    -
  • Server side rendering
    • +
  • Server-side rendering
  • Event handlers
    • -
  • Errors thrown in the error boundary itself
    • +
  • The error boundary itself
  • - Async code that runs after rendering, like setTimeout callbacks or - unresolved promises + Async code that runs after rendering, like setTimeout{" "} + callbacks or unresolved promises
For event handler errors and async callback errors:
diff --git a/src/routes/AsyncUserCodeErrorsRoute.tsx b/src/routes/AsyncUserCodeErrorsRoute.tsx index 11805ae8..998e6ab7 100644 --- a/src/routes/AsyncUserCodeErrorsRoute.tsx +++ b/src/routes/AsyncUserCodeErrorsRoute.tsx @@ -17,13 +17,13 @@ export default function AsyncUserCodeErrorsRoute() { useErrorBoundary. You can use the same pattern for event handler errors: +
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. Learn more.
- ); } diff --git a/src/routes/FallbackContentRoute.tsx b/src/routes/FallbackContentRoute.tsx index 83e9acc3..7b9dcfcd 100644 --- a/src/routes/FallbackContentRoute.tsx +++ b/src/routes/FallbackContentRoute.tsx @@ -1,7 +1,7 @@ import { Box, Code, Header } from "react-lib-tools"; import { html } from "../../public/generated/examples/FallbackContent.json"; -export default function RenderPropRoute() { +export default function FallbackContentRoute() { return (
diff --git a/src/routes/GetErrorMessageRoute.tsx b/src/routes/GetErrorMessageRoute.tsx index e4e4c0bf..6ff1dcc2 100644 --- a/src/routes/GetErrorMessageRoute.tsx +++ b/src/routes/GetErrorMessageRoute.tsx @@ -11,7 +11,7 @@ export default function GetErrorMessageRoute() { this is not always the case - . Any value can be thrown- strings, numbers, even null or{" "} + . Any value can be thrown: strings, numbers, even null or{" "} undefined.
diff --git a/src/routes/RenderPropRoute.tsx b/src/routes/RenderPropRoute.tsx index 5ee55da4..55ebc8ae 100644 --- a/src/routes/RenderPropRoute.tsx +++ b/src/routes/RenderPropRoute.tsx @@ -4,7 +4,7 @@ import { html } from "../../public/generated/examples/RenderProp.json"; export default function RenderPropRoute() { return ( -
+
Render prop diff --git a/src/routes/ResetNearestBoundaryRoute.tsx b/src/routes/ResetNearestBoundaryRoute.tsx index b947ecf4..da740dc3 100644 --- a/src/routes/ResetNearestBoundaryRoute.tsx +++ b/src/routes/ResetNearestBoundaryRoute.tsx @@ -5,7 +5,7 @@ import { Link } from "../components/Link"; export default function ResetNearestBoundaryRoute() { return ( -
+
The useErrorBoundary hook can be used to reset the nearest error boundary and retry a failed diff --git a/src/routes/WithErrorBoundaryRoute.tsx b/src/routes/WithErrorBoundaryRoute.tsx index a6e1f4ea..d1b4e084 100644 --- a/src/routes/WithErrorBoundaryRoute.tsx +++ b/src/routes/WithErrorBoundaryRoute.tsx @@ -20,7 +20,7 @@ export default function WithErrorBoundaryRoute() { component:
-
And then render it like this
+
And then render it like this:
This might be useful for certain types of reusable/library components. diff --git a/src/routes/examples/GetErrorMessage.ts b/src/routes/examples/GetErrorMessage.ts index 57d06a90..2dc59bf3 100644 --- a/src/routes/examples/GetErrorMessage.ts +++ b/src/routes/examples/GetErrorMessage.ts @@ -1,7 +1,7 @@ import { getErrorMessage, type FallbackProps } from "react-error-boundary"; function Fallback({ error }: FallbackProps) { - // Because 'error' can be anything, it's safest not to assume it's an Error + // Because 'error' can be anything, it's safest not to assume it's an Error. // Use the getErrorMessage helper method to extract the message instead. const message = getErrorMessage(error) ?? "Unknown error";