Install the Browser SDK From npm

If your app is built with a bundler, install the recorder as a dependency instead of loading it from the CDN. It is the same recorder with the same options; you call it directly and get a typed handle back instead of a global function. Framework walkthroughs, including Angular, are in integrations.

Install

npm install @anyreplay/browser

pnpm add @anyreplay/browser

yarn add @anyreplay/browser

The package ships ES module and CommonJS builds with TypeScript types. Since 0.1.1 the recording engine (rrweb) is bundled inside it, so there is nothing else to install and it can be imported outside a bundler too.

Start recording

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

export const recorder = createRecorder({
  projectKey: 'YOUR_PROJECT_KEY',
  // ingestUrl: 'https://in.anyreplay.com',  // the default; change it only when self-hosting
  // sampleRate: 1,
  // maskAllInputs: false,  // record form field values; masked by default
  // maskAllTyping: true,   // hide rich-text editors as well; off by default
  // maxSessionsPerMonth: 10000,
});

Call createRecorder once, as early as your app boots in the browser. It validates the options synchronously — a malformed project key or an out-of-range sampleRate throws a ConfigError at this point, so a typo shows up in development rather than as a silent install. After that, nothing the recorder does throws.

The handle

recorder.track('checkout_started', { cart: 3 });
recorder.identify({ userId: 'u_42', email: '[email protected]' });

recorder.status();     // 'idle' | 'awaiting-consent' | 'recording' | 'sampled-out' | 'stopped'
recorder.sessionId();  // the session id, for your own logs
await recorder.flush(); // send what is buffered now
recorder.stop();       // stop for this page

Every method is described in the browser SDK reference. Put recorder.sessionId() into your error reports or support tickets and you can jump from a bug report straight to the recording.

Server-side rendering

The recorder needs a real document, so create it only in the browser. In frameworks that render on the server, import it dynamically from client-only code — import('@anyreplay/browser') inside an effect or a client-only plugin — as the Next.js and Vue and Nuxt guides do.

Script tag or npm?