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/pro'

Usage#

Basic setup#

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

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

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.

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

Was this helpful?