Client SDK reference

Everything cluebase-next and cluebase-react export. Both packages ship the same surface.

Components

CluebaseProvider

Wraps your application root. Installs the global error boundary and the window-level error listeners. See Configuration for every prop.

tsx
<CluebaseProvider apiKey={process.env.NEXT_PUBLIC_CLUEBASE_API_KEY!}>
{children}
</CluebaseProvider>

CluebaseBoundary

Wraps one section so a crash inside it is recovered without taking down the page. See Error recovery.

CluebaseErrorBoundary

The page-level boundary. The provider installs one for you, so you rarely need this directly.

CluebaseOverlayProvider

Renders the widget. Mounted by CluebaseProvider.

Hooks

useCluebaseReport()

Reports an error from an event handler or a catch block. React swallows thrown errors in event handlers before any boundary sees them, so this is the only way to capture those.

tsx
const { reportError } = useCluebaseReport()
try {
await submitPayment()
} catch (error) {
await reportError(error, { action: 'payment_submit' })
}

useCluebaseIdentify()

Attaches the signed-in user, and clears them on logout. See Identifying users.

tsx
const { identify, reset } = useCluebaseIdentify()
identify({ id: user.id, email: user.email, name: user.name })
reset() // on logout

useCluebaseFetch()

A fetch wrapper that reports non-2xx responses and network failures automatically. See Manual reporting.

useCluebaseContext()

The resolved config and the reporting functions. Rarely needed directly.

useCluebaseOverlay()

Widget visibility state, for the uncommon case of driving it yourself.

Identity, outside React

The same store the hook writes to, for call sites that are not components: an auth callback, a saga, a plain module.

ts
import { identify, reset } from 'cluebase-next'
identify({ id: user.id, email: user.email, name: user.name })
reset()
Identity is always yours to supply.Cluebase never infers who your user is. It does not read localStorage or cookies, decode tokens, scan the page for email addresses, or read form field values.

Helpers

redactPII(text), redactEmailsOnly(text), redactUrl(url)

The same redaction the SDK applies before anything is sent, exported so you can reuse it in your own sanitize function.

isRenderableIngest(response)

Narrows an ingest response to the variant that actually carries a conversation. A rate-limited or suppressed report has nothing to render.

injectCluebaseDOMOverlay(options)

Mounts the widget imperatively, outside React. Used internally by the global error listeners so capture survives a crash during hydration.

Next steps