Install AnyReplay in a React App (Vite)

A client-rendered React app has a single entry point that runs once per page load, which makes it the natural place to start the recorder. This guide uses Vite; the same code works with any bundler. An overview with masking and routing tips is in session replay for React.

Install

npm install @anyreplay/browser

pnpm add @anyreplay/browser

yarn add @anyreplay/browser

Create the recorder in its own module

import { createRecorder } from '@anyreplay/browser';

export const recorder = createRecorder({
  projectKey: import.meta.env.VITE_ANYREPLAY_KEY,
});

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './anyreplay'; // start recording before the first render
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

An ES module is evaluated once, so the recorder is created once no matter how many components import it — including under Strict Mode, which runs effects twice in development. Avoid calling createRecorder inside a component or a useEffect: every mount would start another recorder.

VITE_ANYREPLAY_KEY=YOUR_PROJECT_KEY

Track events and identify users

import { recorder } from './anyreplay';

export function CheckoutButton({ items }: { items: number }) {
  return (
    <button onClick={() => recorder.track('checkout_started', { items })}>
      Checkout
    </button>
  );
}

// after sign-in
recorder.identify({ userId: user.id });

track never throws, so it is safe inside event handlers. Events tracked before recording starts — while waiting for consent, for example — are queued (up to 32) and emitted as soon as it does. See custom events and identify users.

Routing

React Router and other History API routers need no integration: pushState, replaceState and back/forward navigation are recorded as page views automatically. See single-page apps.

Waiting for consent

export const recorder = createRecorder({
  projectKey: import.meta.env.VITE_ANYREPLAY_KEY,
  requireConsent: true,
});

// in your banner's accept handler
recorder.consent(true);