Isolated Component Recovery

By default, a crash anywhere in your app is caught by the app-wide CluebaseProvider boundary, and the whole page goes blank behind the fallback overlay, even if only one small part actually broke. <CluebaseBoundary> lets you isolate a crash to a single section instead, so the rest of the page keeps working.

Coding Agent Prompt for Isolated Recovery

Copy & paste this prompt into Cursor, Claude, ChatGPT, Copilot, or Antigravity to add component-level crash recovery to a risky section.

Add isolated component-level crash recovery using Cluebase's <CluebaseBoundary> in this project:
1. Ensure `cluebase-next` (or `cluebase-react`) is installed and `CluebaseProvider` is wrapping the application root.
2. Import `{ CluebaseBoundary }` from 'cluebase-next' (or 'cluebase-react').
3. Wrap the specific risky section (e.g. a checkout form, a widget, a third-party embed, but not the whole app) in `<CluebaseBoundary label="section-name">...</CluebaseBoundary>`.
4. If a crash happens inside that boundary, only that section shows a small "Try Again" fallback; the rest of the page keeps working. Clicking "Try Again" remounts the wrapped children fresh.
5. Optionally pass a custom `fallback={(retry) => (...)}` render prop to replace the default fallback UI.

Note: If you have web search capability, visit https://cluebase.dev/docs for detailed documentation and API reference.

This is additive, not a replacementIf you don't wrap anything in <CluebaseBoundary>, nothing changes: the app-wide boundary from CluebaseProvider still catches everything as before.

Wrap the risky section

Wrap just the specific component you want to isolate (not your whole app). A good candidate is anything that renders unpredictable or third-party data: a checkout form, a widget, an embed.

CheckoutPage.tsx

import { CluebaseBoundary } from 'cluebase-next';
function CheckoutPage() {
  return (
    <div>
      <Header >
      <CluebaseBoundary label="checkout-form">
        <CheckoutForm >
      </CluebaseBoundary>
      <Footer >
    </div>
  );
}

If CheckoutForm crashes, only that box shows a fallback with a "Try Again" button; the header and footer stay interactive.

Try Again clears local state

Clicking "Try Again" unmounts and remounts the wrapped children fresh, which clears out whatever broken local state caused the crash, without touching anything outside the boundary. No manual state-reset code is needed.

Customize the fallback (optional)

Pass a fallback render prop to replace the default "Try Again" box.

tsx

<CluebaseBoundary
  label="checkout-form"
  fallback={(retry) => (
    <div className="p-4 border rounded">
      <p>Checkout hit a snag.</p>
      <button onClick={retry}>Try Again</button>
    </div>
  )}
>
  <CheckoutForm >
</CluebaseBoundary>

Crashes are still reported

A crash caught by <CluebaseBoundary> is still sent to your dashboard, tagged with errorType: 'component_crash' (distinct from 'render_crash', which is reserved for a fatal, whole-page crash caught by the root boundary). This lets you tell scoped crashes apart from fatal ones in your error list.

The root boundary also gets a "Try Again"

Separately, the app-wide fallback overlay (shown for a fatal, whole-page crash) now offers a "Try Again" button alongside "Go Back" and "Reload Page", offering a cheap first attempt at recovery before asking the user to reload.