SuspenseWithBoundary
Combine React Suspense and ErrorBoundary for complete async handling.
The SuspenseWithBoundary component is a convenience wrapper that combines an ErrorBoundary and Suspense into a single component. It's the standard way to handle the full lifecycle of an asynchronous component.
Installation
npm install @zayne-labs/ui-reactBasic Usage
import { SuspenseWithBoundary } from "@zayne-labs/ui-react/common/suspense-with-boundary";
function Dashboard() {
return (
<SuspenseWithBoundary
fallback={<ChartSkeleton />}
errorFallback={({ error, resetErrorBoundary }) => (
<div className="rounded-lg border border-red-200 p-4 text-center">
<p className="text-red-700">Failed to load analytics</p>
<button onClick={resetErrorBoundary} className="mt-2 text-sm underline">
Retry
</button>
</div>
)}
>
<AsyncAnalyticsChart />
</SuspenseWithBoundary>
);
}Component API
Component Source
import { Suspense, type SuspenseProps } from "react";import { ErrorBoundary, type ErrorBoundaryProps } from "../error-boundary";export type SuspenseWithBoundaryProps = ErrorBoundaryProps & SuspenseProps;export function SuspenseWithBoundary(props: SuspenseWithBoundaryProps) { const { children, fallback, name, ...restOfErrorBoundaryProps } = props; return ( <ErrorBoundary {...restOfErrorBoundaryProps}> <Suspense fallback={fallback} name={name}> {children} </Suspense> </ErrorBoundary> );}Why use this?
Handling async states typically requires nesting:
<ErrorBoundary fallback={<ErrorUI />}>
<Suspense fallback={<LoadingUI />}>
<MyAsyncComponent />
</Suspense>
</ErrorBoundary>SuspenseWithBoundary flattens this structure, making your JSX cleaner and ensuring that errors during the loading phase are caught by the same boundary that handles errors during the success phase.
Use Cases
Async Data Fetching
Wrap components that use useSuspenseQuery or other suspending hooks.
Heavy Imports
Wrap React.lazy() imports to gracefully handle loading and network failures.
Server Components
On the client, wrap high-stakes server-side async content for better UX.
Dashboard Isolation
Prevent a single failing widget from bringing down your entire analytical dashboard.
The ErrorBoundary is placed as the outer wrapper, with Suspense as the inner wrapper. This is the
recommended pattern as it captures errors that occur during the suspension phase itself.
Last updated on