React guide

SPA replay integration and quality tips

Setup wizard

React & SPA replay

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.

  1. Add the agent once

    In index.html or your root layout, before the app bundle:

    <script>window.__SHIELDREPLAY_TOKEN__ = 'YOUR_SITE_TOKEN';</script>
<script src="https://your-shieldreplay-host/agent/shieldreplay.min.js" defer></script>

  2. Emit custom events (optional)

    window.__shieldreplay?.track?.('checkout_step', { step: 2, cartValue: 120 });

  3. SPA routing

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

  4. 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.