React Quickstart

Get Thisbefine tracking events in your React app in 5 minutes. Works with Vite, Create React App, or any React SPA.

Install the SDK

pnpm add @thisbefine/analytics

npm install @thisbefine/analytics

yarn add @thisbefine/analytics

Add the Analytics Component

Drop the <Analytics /> component into your app entry:

src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Analytics } from '@thisbefine/analytics/react';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
    <Analytics
      apiKey={import.meta.env.VITE_THISBEFINE_API_KEY}
      debug={import.meta.env.DEV}
    />
  </React.StrictMode>
);

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Analytics } from '@thisbefine/analytics/react';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
  <React.StrictMode>
    <App />
    <Analytics
      apiKey={process.env.REACT_APP_THISBEFINE_API_KEY!}
      debug={process.env.NODE_ENV === 'development'}
    />
  </React.StrictMode>
);

That's it. Your app now tracks pageviews automatically.

Track Your First Event

Use the useTrack hook to track custom events:

src/components/SignupButton.tsx

import { useTrack } from '@thisbefine/analytics/react';

export const SignupButton = () => {
  const trackSignup = useTrack('signup_clicked');

  return (
    <button onClick={() => trackSignup({ source: 'hero_section' })}>
      Sign Up Free
    </button>
  );
};

Identify Users

When someone logs in, tell us who they are:

src/pages/Login.tsx

import { useIdentify } from '@thisbefine/analytics/react';

export const Login = () => {
  const identify = useIdentify();

  const handleLogin = async (email: string, password: string) => {
    const user = await login(email, password);
    identify(user.id, {
      email: user.email,
      name: user.name,
      plan: user.plan,
    });
  };

  return <form>{/* your form */}</form>;
};

Previous anonymous activity gets linked to this user automatically.

Check Your Dashboard

Head to your Thisbefine dashboard. Events should start appearing.

Debug Mode: With debug: true, events are logged to the browser console. Open DevTools and watch them roll in.

Environment Variables

.env

VITE_THISBEFINE_API_KEY=tif_your_api_key

Access with import.meta.env.VITE_THISBEFINE_API_KEY

.env

REACT_APP_THISBEFINE_API_KEY=tif_your_api_key

Access with process.env.REACT_APP_THISBEFINE_API_KEY

Never commit your .env file. Add it to .gitignore.

What's Automatic?

Once you add the <Analytics /> component:

Feature	What It Does
Sessions	New session after 30 min of inactivity
Anonymous IDs	Every visitor gets a unique ID
Context	Browser, screen size, locale - all captured

Tracking Route Changes

For SPAs with React Router, track pageviews on navigation:

src/components/PageTracker.tsx

import { useLocation } from 'react-router-dom';
import { usePage } from '@thisbefine/analytics/react';
import { useEffect } from 'react';

export const PageTracker = () => {
  const page = usePage();
  const location = useLocation();

  useEffect(() => {
    page(location.pathname);
  }, [location, page]);

  return null;
};

Add it to your app:

src/main.tsx

<BrowserRouter>
  <App />
  <PageTracker />
  <Analytics apiKey={import.meta.env.VITE_THISBEFINE_API_KEY} />
</BrowserRouter>

Enable Error Tracking

Catch JavaScript errors automatically:

<Analytics
  apiKey={import.meta.env.VITE_THISBEFINE_API_KEY}
  config={{
    errors: {
      enabled: true,
      captureConsoleErrors: true,
      maxBreadcrumbs: 25,
    },
  }}
/>

Add the Bug Report Button

Let users report bugs:

src/main.tsx

import { Analytics, BugReportFAB } from '@thisbefine/analytics/react';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
    <Analytics apiKey={import.meta.env.VITE_THISBEFINE_API_KEY} />
    <BugReportFAB position="bottom-right" />
  </React.StrictMode>
);

Common Patterns

Reset on Logout

Always reset when users log out:

import { useReset } from '@thisbefine/analytics/react';
import { useNavigate } from 'react-router-dom';

const LogoutButton = () => {
  const reset = useReset();
  const navigate = useNavigate();

  const handleLogout = async () => {
    await logout();
    reset();
    navigate('/login');
  };

  return <button onClick={handleLogout}>Logout</button>;
};

Group Users by Workspace

For B2B apps:

import { useGroup } from '@thisbefine/analytics/react';

const group = useGroup();

group(workspace.id, {
  name: workspace.name,
  plan: workspace.plan,
  memberCount: workspace.members.length,
});

TypeScript with Vite

Add environment type declarations:

src/vite-env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_THISBEFINE_API_KEY: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

You're Done

You now have:

Event tracking via useTrack
User identification via useIdentify
Error capture (if enabled)
Bug reports (if added)

Configuration

Tweak batching, sessions, and more.

React Hooks

All the hooks you'll ever need.

Full React SPA Example

Complete copy-paste setup.

React Quickstart

Configuration

React Hooks

Full React SPA Example

On this page