Error Boundary

A React error boundary that catches render errors in its subtree and shows a friendly fallback — an icon, message, and a "Try again" button that resets the boundary. Override the copy with labels, supply a fully custom fallback, or hook into onError for logging.

Import

1import { ErrorBoundary } from "@yuhuanowo/yunui/patterns";

Basic

Wrap any subtree. While no error is thrown, it renders its children transparently.

Custom labels

Pass labels to localize the fallback's title, message, and retry button.

1<ErrorBoundary
2  labels={{ title: "Something broke", message: "Please try again.", retry: "Reload" }}
3  onError={(error, info) => logToService(error, info)}
4>
5  <Dashboard />
6</ErrorBoundary>

Props