Error Boundary

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

Import

import { ErrorBoundary } from '@nostromo/ui-core'
// or
import { ErrorBoundary } from '@nostromo/ui-core/error-boundary'

Usage

import { ErrorBoundary } from '@nostromo/ui-core'
 
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>
      )}
    >
      <YourComponent />
    </ErrorBoundary>
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

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

Code Examples

import { ErrorBoundary } from '@nostromo/ui-core'
 
export default function ErrorBoundaryExample() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong!</div>}>
      <YourComponent />
    </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

Dialog Hero