React

Hooks

React-friendly wrappers around the core API. Every hook returns a referentially stable function — safe to put in dependency arrays.

Overview#

Name	Type	Default	Description
useReliable	() => ReliableClient \| null	—	Raw client from the provider context.
useIdentify	(user) => void	—	Calls identify() on mount and when externalId changes.
useCaptureException	() => fn	—	Stable reference to captureException.
useCaptureMessage	() => fn	—	Stable reference to captureMessage.
useAddBreadcrumb	() => fn	—	Stable reference to addBreadcrumb.
useSetTag	() => fn	—	Stable reference to setTag.
useSetTags	() => fn	—	Stable reference to setTags.
useFlush	() => fn	—	Stable reference to flush.

useIdentify#

Call this once near the top of your app, after auth state is resolved. The hook re-runs identify() only when user.externalId changes — so passing a fresh object on every render is fine.

tsx

import { useIdentify } from '@reliableapp/react';

function App() {
  const { user } = useAuth();

  useIdentify(
    user
      ? { externalId: user.id, email: user.email, name: user.name }
      : null
  );

  return <Routes />;
}

useCaptureException#

Returns a stable function — safe to put in useCallback or useEffect dependency arrays without triggering re-runs.

tsx

import { useCaptureException } from '@reliableapp/react';

function CheckoutButton() {
  const captureException = useCaptureException();

  const handleClick = useCallback(async () => {
    try {
      await submitOrder();
    } catch (err) {
      const eventId = captureException(err, {
        severity: 'high',
        tags: { flow: 'checkout' },
      });
      showErrorToast(`Error ${eventId}`);
    }
  }, [captureException]);

  return <button onClick={handleClick}>Place Order</button>;
}

useCaptureMessage#

tsx

import { useCaptureMessage } from '@reliableapp/react';

function PaymentRetry() {
  const captureMessage = useCaptureMessage();

  useEffect(() => {
    if (retryCount > 0 && success) {
      captureMessage('payment retry succeeded', {
        severity: 'low',
        tags: { retry_count: String(retryCount) },
      });
    }
  }, [success, retryCount, captureMessage]);
}

useAddBreadcrumb#

tsx

import { useAddBreadcrumb } from '@reliableapp/react';

function Wizard() {
  const addBreadcrumb = useAddBreadcrumb();
  const [step, setStep] = useState(0);

  const goToStep = (n: number) => {
    addBreadcrumb({
      category: 'wizard',
      message: `step ${n}`,
      level: 'info',
      data: { from: step, to: n },
    });
    setStep(n);
  };
}

useSetTag / useSetTags#

tsx

import { useSetTag, useSetTags } from '@reliableapp/react';

function App() {
  const setTag = useSetTag();
  const setTags = useSetTags();
  const { user, abVariant, version } = useAppState();

  useEffect(() => { setTag('plan', user.plan); }, [user.plan, setTag]);

  useEffect(() => {
    setTags({ ab_variant: abVariant, app_version: version });
  }, [abVariant, version, setTags]);
}

useFlush#

tsx

import { useFlush } from '@reliableapp/react';

function LogoutButton() {
  const flush = useFlush();
  const router = useRouter();

  const handleLogout = async () => {
    await flush();
    await api.logout();
    router.push('/login');
  };

  return <button onClick={handleLogout}>Sign out</button>;
}

useReliable#

Get the raw client object if you need direct access — e.g. to call client.track() or to inspect SDK state.

tsx

import { useReliable } from '@reliableapp/react';

function FeatureFlagToggle() {
  const client = useReliable();

  const handleToggle = (flag: string) => {
    client?.track('feature_flag_toggled', { flag });
  };
}

Provider required

All hooks must be called inside a <ReliableProvider>. Without one, useReliable() returns null and the action hooks become no-ops.

Error Boundary

React

Router Adapters

React