Installation

InstallCopy Anchor Link

npm install @supapulse/core @supapulse/react

@supapulse/core is a peer dependency. React 16.8 or later is required.

Add the providerCopy Anchor Link

Wrap your app once, as high as possible. Define the config outside the component so it isn't a new object on every render.

import { SupapulseProvider } from '@supapulse/react';
import { createRoot } from 'react-dom/client';
import { App } from './App';

const config = { apiToken: import.meta.env.VITE_SUPAPULSE_TOKEN };

createRoot(document.getElementById('root')!).render(
  <SupapulseProvider config={config}>
    <App />
  </SupapulseProvider>,
);

Environment variablesCopy Anchor Link

All of these end up in the browser bundle, which is fine for the public token (pub_…) and never fine for the secret one.

Check itCopy Anchor Link

1. Add debug: true to the config.
2. Load the app. The console logs [Supapulse] Initialized and a pageview send.
3. Navigate. Each route change logs one more send.

Common errorsCopy Anchor Link

useSupapulse must be used within a SupapulseProvider. A component calling a hook is rendered outside the provider. Move the provider up.

Cannot read properties of null (reading 'event'). An event was sent before the tracker was ready, usually from a child's useEffect on mount: children's effects run before the provider's. Guard on the instance; see hooks.

Two pageviews per page. You called usePageview() while automatic pageviews were on. Remove it, or set autoPageviews: false.