Skip to content

Session replay · Web and React Native

Watch any user’s session. In your language.

AnyReplay records what happened in your web and React Native apps, then translates the recorded interface on demand — so a reviewer in Berlin can follow a session from Istanbul without guessing what a single button said.

Free plan: 1 project, 500 sessions/monthNo card required~36 KB gzip browser SDK
Abstract ribbons of indigo and cyan light flowing across a dark field, suggesting a session timeline

How it works

From install to insight in three steps

  1. 01

    Install the snippet

    One script tag for the web, two lines for React Native. The browser SDK is about 36 KB gzipped and needs no build step; the mobile SDK has no native module, so it runs in Expo Go on SDK 52 or later.

  2. 02

    Sessions arrive

    Recordings stream to a separate ingest service behind an origin allow-list. The setup wizard verifies the install from a real session, so you know it works before your users do.

  3. 03

    Watch in your language

    Pick a language on the player. The recorded strings are translated on demand, cached per organisation, and rebuilt into the replay — a Turkish checkout reads as an English one.

Product

Everything a replay tool should do, plus the one thing none of them did

Built for teams whose users do not all speak the language the team reviews in. Every claim below is enforced by a test in the repository, not by a slide.

Session translation

The same session, read in the language you review in

Translation is applied to the recorded event stream before the page is rebuilt, not painted over it afterwards. Headings stay headings, buttons stay short, masked input stays masked, and product names survive untouched thanks to an organisation-wide glossary shared across every project.

What the user saw

tr
  • headingSiparişiniz hazırlanıyor
  • buttonÖdemeye geç
  • labelTeslimat adresi
  • input••••••••••
  • linkİade koşulları
  • textKargo 2 iş günü içinde teslim edilir.

What you review

en
  • headingYour order is being prepared
  • buttonProceed to checkout
  • labelDelivery address
  • input••••••••••
  • linkReturn policy
  • textShipping is delivered within 2 business days.

Security and privacy

Rendering someone else’s DOM is the most dangerous thing a replay tool does

So the player treats every recording as hostile. Script bodies never leave the customer’s page, anything that slips through is rebuilt as noscript, and the replay iframe is sandboxed without script execution. Verified in a real browser, guarded by tests.

Argon2id password hashing
At OWASP parameters, enforced by test. Refresh tokens rotate, and a replayed token revokes its whole family.
Origin allow-list on ingest
The project key ships in your HTML and is public by design. Access control is the server-side Origin check a page cannot forge.
Audit trail
Append-only records for permission changes, deletions and key rotation, readable by owners and admins.
Retention controls
Recordings are deleted on the schedule you set, per organisation, by a sweeper that runs every few hours.
Read the privacy model
A faceted glass shield glowing indigo, with blurred rectangles behind it representing masked fields

Install

The real snippet, not a mock-up

This is the exact loader the setup wizard hands you, with a placeholder key. The loader carries the key in its URL so the wizard can tell “not installed” from “installed but blocked” — two problems with completely different fixes.

Web — paste before </head>

index.html
<script>
(function (w, d) {
  w.anyreplay = w.anyreplay || function () {
    (w.anyreplay.q = w.anyreplay.q || []).push(arguments);
  };
  var s = d.createElement('script');
  s.async = 1;
  s.src = 'https://cdn.anyreplay.com/v1/ar.min.js?k=ar_pk_live_your_project_key';
  d.head.appendChild(s);
})(window, document);

anyreplay('init', {
  projectKey: 'ar_pk_live_your_project_key',
  ingestUrl: 'https://in.anyreplay.com',
  // Stop recording after this many sessions in a calendar month.
  // maxSessionsPerMonth: 10000,
  // Form fields are masked: what visitors type replays as asterisks.
  // Passwords, one-time codes and card fields are masked either way.
  // Uncomment the first line to record what visitors type, or the
  // second to hide rich-text editors too.
  // maskAllInputs: false,
  // maskAllTyping: true
});
</script>

React Native — no native module, works in Expo Go

App.tsx
npm install @anyreplay/react-native

// App.tsx
import { AnyReplay, init, trackNavigation } from '@anyreplay/react-native';

init({
  projectKey: 'ar_pk_live_your_project_key',
  ingestUrl: 'https://in.anyreplay.com',
    // Read from the app when it has expo-application, react-native-device-info or expo-constants (not in Expo Go).
  // appId: 'com.example.app',
  // Stop recording after this many sessions in a calendar month.
  // maxSessionsPerMonth: 10000,
  // Fields are masked: what people type replays as asterisks. Secure
  // fields, passwords, one-time codes and card fields are masked either
  // way. Uncomment the first line to record what people type, or the
  // second to mask every field in a way nothing can weaken.
  // maskAllInputs: false,
  // maskAllTyping: true
});

export default function Root() {
  return (
    <AnyReplay>
      <NavigationContainer ref={(ref) => { if (ref) trackNavigation(ref); }}>
        <App />
      </NavigationContainer>
    </AnyReplay>
  );
}

Also available as an npm package (@anyreplay/browser), a Next.js Script snippet and a Google Tag Manager tag.

Pricing

Start free. Grow when you need to.

Free is a working plan, not a demo: one project, 500 sessions a month, 14 days of retention, and every language. Paid plans add projects, volume and longer retention.

  • 1 project

    Web or React Native

  • 500 sessions / month

    Deterministic sampling keeps you inside it

  • 14-day retention

    Deleted on schedule, recorded in the audit trail

  • All languages

    Translation and the five-language dashboard included

FAQ

Questions people ask before installing

What does AnyReplay record?

On the web, an rrweb-based SDK records DOM snapshots, mutations, clicks, scrolls, inputs (masked by default; passwords and payment fields always) and navigation. In React Native it records the element tree the app renders — element types, text and layout — rather than screenshots, so the recording is small and translatable. Ionic, Cordova and Electron apps are recorded by the same web SDK in a small package for each. Flutter apps are recorded the way React Native is, as a tree of words and boxes, by a package on pub.dev. A Tauri package is in preview, and there is no native iOS or Android SDK yet.

How does the translation work?

When a reviewer picks a language, the strings in the recorded event stream are extracted with a context hint (heading, button, label, input, link, text), translated by an AI model in batches, cached per organisation by content hash — so a string translated once is reused across every project in the organisation — and substituted back into the stream before the replay is rebuilt. Product names can be pinned with an organisation-wide glossary.

Is user input recorded?

Not by default: every form field is masked. If you want a replay of a failed checkout to show what people typed, one line turns that on, and passwords, card numbers, CVVs and payment-tagged fields stay masked in any configuration. Another line masks rich-text editors too, and a class masks single elements. All of it happens in the browser before anything is sent, and each rule is enforced by tests.

Can a recorded page run code inside my dashboard?

No. Script bodies are replaced at record time, scripts are rebuilt as noscript, and the replay iframe is sandboxed without allow-scripts. A test fails the build if that permission is ever enabled.

What does the Free plan include?

One project, 500 sessions per month, 14 days of retention and all languages, with no card required. See the pricing page for the paid plans.

Which languages does the dashboard support?

English, Turkish, German, Spanish and French. Session translation is offered into those same five languages today, with more available on request.

How big is the browser SDK?

About 36 KB gzipped, with a 45 KB budget enforced in CI. It loads asynchronously, and what it costs a page is measured from the build.

Watch any session in your language.

Install in minutes, keep the Free plan for as long as you like. One project and 500 sessions a month, free.