Thisbefine
React

React Hooks

All the hooks for tracking, identification, and error capture

React Hooks

All hooks require <Analytics /> to be mounted.

import { useTrack, useIdentify, useGroup, usePage, useReset, useGetUser, useCaptureException, useLog } from '@thisbefine/analytics/next';

For plain React, import from @thisbefine/analytics/react.


useAnalytics

Access the full Analytics instance for flush(), optOut(), optIn(), isOptedOut().

const analytics = useAnalytics();
analytics.flush();
analytics.optOut();

useTrack

Memoized event tracking function.

const trackSignup = useTrack('signup_clicked');
<button onClick={() => trackSignup({ source: 'header' })}>Sign Up</button>

useIdentify

Identify users after login.

const identify = useIdentify();
identify(user.id, { email: user.email, name: user.name, plan: user.plan });

useGroup

Associate users with a company/workspace (B2B apps).

const group = useGroup();
group(workspace.id, { name: workspace.name, plan: workspace.plan, mrr: workspace.mrr });

usePage

Manual pageview tracking for SPAs.

const page = usePage();
useEffect(() => { page(pathname); }, [pathname, page]);

useReset

Clear identity on logout. Always call this when users log out.

const reset = useReset();
const handleLogout = async () => {
  await logout();
  reset();
};

useGetUser

Get current user state for debugging.

const user = useGetUser()();
// { anonymousId, userId?, traits?, accountId?, accountTraits? }

useCaptureException

Manual error capture.

const captureException = useCaptureException();
try {
  await riskyOperation();
} catch (error) {
  captureException(error as Error, { component: 'MyForm' });
}

useLog

Structured logging.

const log = useLog();
log('Payment initiated', 'info', { amount: 99.99 });
log('Payment failed', 'error', { reason: 'card_declined' });

Levels: debug, info, warn, error, fatal


Lifecycle Hooks

Dedicated hooks for SaaS events. See the Lifecycle Events Guide.

import { useSignup, useSubscriptionCancelled, usePlanUpgraded, ... } from '@thisbefine/analytics/react';

const subscriptionCancelled = useSubscriptionCancelled();
subscriptionCancelled({ plan: 'pro', reason: 'too_expensive', mrr: 29 });

Available: useSignup, useLogin, useLogout, useAccountDeleted, useSubscriptionStarted, useSubscriptionCancelled, useSubscriptionRenewed, usePlanUpgraded, usePlanDowngraded, useTrialStarted, useTrialEnded, useInviteSent, useInviteAccepted, useFeatureActivated


Rules

  1. Call at the top level (not in loops or conditionals)
  2. Call from React components or custom hooks only
  3. <Analytics /> must be mounted or hooks throw an error

On this page