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
- Call at the top level (not in loops or conditionals)
- Call from React components or custom hooks only
<Analytics />must be mounted or hooks throw an error