Session replay for React apps

The recorder is a plain script with no dependencies, so it works with any React setup. Add it to your HTML, or start it from code when you are ready.

You need a running Replayowl server first. See Deploy to Cloudflare Workers. Below, replace replay.example.com with your server’s domain.

Add it to index.html

<script src="https://replay.example.com/recorder.js"
  data-endpoint="https://replay.example.com/api/ingest" defer></script>

Or start it from code

Useful when you only want to record after consent, or only in production:

import { useEffect } from "react";

declare global {
  interface Window {
    ReplayOwl?: { start(o: { endpoint: string; userId?: string }): void; identify(id: string): void; stop(): void };
  }
}

export function useReplay(enabled: boolean, userId?: string) {
  useEffect(() => {
    if (!enabled) return;
    const run = () => window.ReplayOwl?.start({ endpoint: "https://replay.example.com/api/ingest", userId });
    if (window.ReplayOwl) return run();
    const s = document.createElement("script");
    s.src = "https://replay.example.com/recorder.js";
    s.onload = run;
    document.head.appendChild(s);
  }, [enabled, userId]);
}

When the user signs in later, call window.ReplayOwl?.identify(user.id). The whole session, including what happened before, is attributed to them.

Masking components

<div data-ro-mask>{account.iban}</div>
<div data-ro-block><SignaturePad /></div>

Attributes are read from the DOM, so they work on any element React renders. See Masking and privacy.

Route changes

React Router and similar libraries change the page without a full load. Those changes are recorded and replayed, but the session’s page list only includes full page loads. See limitations.