ErrorBoundary

A container component that catches errors and displays a fallback UI.

Use ErrorBoundary to make sure the UI of your app stays accessible to people in the event of any errors. It allows your to log the errors and display a fallback UI.

Import

import { ErrorBoundary } from '@saas-ui/react'

Usage

Basic setup

import { ErrorBoundary } from '@saas-ui/react'


export default function CustomComponent({ children }) {
  return <ErrorBoundary>{children}</ErrorBoundary>
}

Errors can picked up by setting the onError handler of SaasProvider.

import { SaasProvider } from '@saas-ui/react'


export default function App({ children }) {
  const onError = React.useCallback((error) => {
    console.log(error)
  }, [])


  return <SaasProvider onError={onError}>{children}</SaasProvider>
}

Fallback component

By default a Something went wrong. message will be down. Customize the error message with a custom error component.

import { ErrorBoundary, EmptyState } from '@saas-ui/react'


export default function CustomComponent({ children }) {
  return (
    <ErrorBoundary
      fallback={<EmptyState title="Oops this doesn't look good" />}
    >
      {children}
    </ErrorBoundary>
  )
}

Was this helpful?