Error Boundary

The Error Boundary component provides you with error handling and fallback UI for your application.

Live Examples

Live Example

☀️

Copy

View Code

import { ErrorBoundary } from '@jarllyng/nostromo' function BrokenComponent() { throw new Error('Something went wrong!') return null } export default function ErrorBoundaryExample() { return ( <ErrorBoundary ...

Import


import { ErrorBoundary } from "@jarllyng/nostromo";
// or
import { ErrorBoundary } from "@jarllyng/nostromo/error-boundary";

Usage


import { ErrorBoundary } from "@jarllyng/nostromo";
 
export default function Example() {
  return (
    <ErrorBoundary
      fallback={({ error, resetError }) => (
        <div>
          <h2>Something went wrong!</h2>
          <p>{error?.message}</p>
          <button onClick={resetError}>Try again</button>
        </div>
      )}
    >
      <p>The rest of the page.</p>
    </ErrorBoundary>
  );
}

Code Examples


import { ErrorBoundary } from "@jarllyng/nostromo";
 
// `fallback` takes a component, not an element, because the boundary calls it
// with the error and a reset function. Passing `<div>...</div>` does not compile.
function SomethingWentWrong() {
  return <div>Something went wrong!</div>;
}
 
export default function ErrorBoundaryExample() {
  return (
    <ErrorBoundary fallback={SomethingWentWrong}>
      <p>The rest of the page.</p>
    </ErrorBoundary>
  );
}

Props

Prop	Type	Default	Required	Description
`fallback`	`React.ComponentType<{ error: Error \| undefined; resetError: () => void }> \| React.ReactNode`	`undefined`	No	Fallback UI component or element to show when error occurs
`onError`	`(error: Error, errorInfo: React.ErrorInfo) => void`	`undefined`	No	Callback function called when an error is caught
`children`	`React.ReactNode`	-	Yes	Child components to wrap with error boundary