ErrorBoundary

A React error boundary that catches render-phase exceptions in its subtree and displays a friendly fallback UI instead of a blank screen. Built on react-error-boundary.

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

import { ErrorBoundary } from "@xocialive/ui-components";

Basic usage

<ErrorBoundary>
  <FeatureSection />
</ErrorBoundary>

With custom fallback

<ErrorBoundary
  fallback={({ error, resetError }) => (
    <Box>
      <Typography>Something went wrong: {error.message}</Typography>
      <Button onClick={resetError}>Try again</Button>
    </Box>
  )}
>
  <FeatureSection />
</ErrorBoundary>

Props

Prop	Type	Default	Description
children	ReactNode	—	Subtree to guard
fallback	(props: { error: Error; resetError: () => void }) => ReactNode	Built-in error card	Custom fallback renderer
onError	(error: Error, info: ErrorInfo) => void	—	Side-effect hook for error logging
sx	SxProps<Theme>	—	Root element style overrides (default fallback only)

Notes

• Wrap individual page sections rather than the entire app so one broken section does not take down the full UI.
• The onError callback is a good place to forward errors to your logging service (Sentry, Application Insights, etc.).