Optional callback to enable e.g. logging error information to a server.
-@param error Error that was thrown
+@param error Value that was thrown; typically an instance of Error
@param info React "component stack" identifying where the error was thrown
// Reset the state of your app so the error doesn't happen again
\n
}}
\n
>
\n
<YourApplication/>
\n
</ErrorBoundary>;
"
}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 69ac1abd..bf1b26e1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -41,6 +41,9 @@ export default function App() {
withErrorBoundary HOC
+
+ getErrorMessage helper
+ Common questionsSupport
diff --git a/src/routes.ts b/src/routes.ts
index 3490f9ef..2d37e19b 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -24,6 +24,7 @@ export const routes = {
"/api/with-error-boundary-hoc": lazy(
() => import("./routes/WithErrorBoundaryRoute"),
),
+ "/api/get-error-message": lazy(() => import("./routes/GetErrorMessageRoute")),
} satisfies Record;
export type Routes = Record;
diff --git a/src/routes/GetErrorMessageRoute.tsx b/src/routes/GetErrorMessageRoute.tsx
new file mode 100644
index 00000000..e4e4c0bf
--- /dev/null
+++ b/src/routes/GetErrorMessageRoute.tsx
@@ -0,0 +1,24 @@
+import { Box, Code, ExternalLink, Header } from "react-lib-tools";
+import { html } from "../../public/generated/examples/GetErrorMessage.json";
+
+export default function GetErrorMessageRoute() {
+ return (
+
+
+
+ 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.
+
+
+
+ );
+}
diff --git a/src/routes/examples/ErrorLogging.tsx b/src/routes/examples/ErrorLogging.tsx
index 4e765d57..d26df3f4 100644
--- a/src/routes/examples/ErrorLogging.tsx
+++ b/src/routes/examples/ErrorLogging.tsx
@@ -1,7 +1,7 @@
import type { ErrorInfo } from "react";
import { ErrorBoundary } from "react-error-boundary";
-function logError(error: Error, info: ErrorInfo) {
+function logError(error: unknown, info: ErrorInfo) {
// Do something with the error, e.g. log to an external API
error; // hidden
info; // hidden
diff --git a/src/routes/examples/FallbackComponent.tsx b/src/routes/examples/FallbackComponent.tsx
index 594a6c53..30ea517b 100644
--- a/src/routes/examples/FallbackComponent.tsx
+++ b/src/routes/examples/FallbackComponent.tsx
@@ -1,10 +1,10 @@
-import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
+import { ErrorBoundary, getErrorMessage, type FallbackProps } from "react-error-boundary";
function Fallback({ error, resetErrorBoundary }: FallbackProps) {
return (
Something went wrong:
-
{error.message}
+
{getErrorMessage(error)}
);
diff --git a/src/routes/examples/GetErrorMessage.ts b/src/routes/examples/GetErrorMessage.ts
new file mode 100644
index 00000000..57d06a90
--- /dev/null
+++ b/src/routes/examples/GetErrorMessage.ts
@@ -0,0 +1,14 @@
+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
+ // Use the getErrorMessage helper method to extract the message instead.
+ const message = getErrorMessage(error) ?? "Unknown error";
+
+ // Render fallback UI...
+ return message; // hidden
+}
+
+//
+
+export { Fallback };
diff --git a/src/routes/examples/RenderProp.tsx b/src/routes/examples/RenderProp.tsx
index c3d4c0ca..7a6fa74e 100644
--- a/src/routes/examples/RenderProp.tsx
+++ b/src/routes/examples/RenderProp.tsx
@@ -1,10 +1,10 @@
-import { ErrorBoundary } from "react-error-boundary";
+import { ErrorBoundary, getErrorMessage } from "react-error-boundary";
(