sessionreplay
LoginGet Started

Session Replay for React

Session replay for React applications. Works with Create React App, Vite, and any React setup.

Quick Start

1. Install the package

npm install @puppethand/record

2. Initialize recording

App.tsx
import { useEffect } from 'react';
import { record } from '@puppethand/record';

function App() {
  useEffect(() => {
    record({
      apiKey: 'ph_pub_xxx',
    });
  }, []);

  return <YourApp />;
}

3. View sessions in your dashboard

Sessions will appear in your PuppetHand dashboard within seconds of recording.

React-Specific Features

  • Automatic React error boundary capture
  • Component tree recording
  • State change tracking
  • Hook-friendly API
  • Works with React 16.8+

Configuration Options

Configuration
record({
  apiKey: 'ph_pub_xxx',

  // Optional configuration
  maskAllInputs: true,          // Mask all input values
  maskAllText: false,           // Mask all text content
  blockClass: 'ph-block',       // Block elements with this class
  ignoreClass: 'ph-ignore',     // Ignore elements with this class

  // Sampling (reduce data volume)
  sampling: {
    mousemove: true,            // Record mouse movements
    scroll: 100,                // Throttle scroll events (ms)
    input: 'last',              // Record only last input value
  },

  // Network recording
  recordNetwork: true,          // Record fetch/XHR requests
  recordConsole: true,          // Record console logs
});

Full Documentation

For advanced configuration, troubleshooting, and best practices, check out our full React documentation.

View React Docs

Ready to add session replay to React?

Start free with 10GB storage. Setup takes 30 seconds.

Start FreeView Pricing