React & SPA guide

ShieldReplay captures DOM snapshots and mutations, making it well suited for client-rendered React apps.

Before deploy: Add your production origin (e.g. https://app.example.com) to allowed domains in the Setup wizard.

Add the agent once

Place this once inside your site’s <head>, before its closing tag. Replace YOUR_SITE_TOKEN with the public site token shown in the Setup wizard or Site settings. The data-site-token attribute selects the website; the loader picks the current recorder release.
```
<script src="https://sessionly.cloud/agent/loader.js"
  data-site-token="YOUR_SITE_TOKEN" defer crossorigin="anonymous"></script>
```
Emit custom events (optional)
```
window.ShieldReplay?.track?.('checkout_step', { step: 2, cartValue: 120 });
```
Call this after the agent has loaded. The optional chaining keeps the page safe if recording is unavailable.
SPA routing

The agent listens for navigation and records page views. Ensure your router triggers full URL updates — BrowserRouter from React Router is recommended.
Verify in dashboard

Deploy, interact with the app, then confirm the first session in Dashboard or Setup wizard.

Quality tips

Avoid recording sensitive fields — use data-shield-mask on inputs or add selectors under Privacy filters.
Heavy canvas/WebGL: replay shows layout; GPU content may not pixel-match.
Strict Mode double-mounting in dev can produce duplicate events — filter by session in the dashboard.