React — Recording control

Control session replay recording and event flushing. Access these methods via useSignal().

Accessing the methods

Get recording control methods from useSignal():

import { useSignal } from '@signal-js/react';

function RecordingControls() {
  const { 
    startRecording, 
    stopRecording, 
    pauseRecording, 
    resumeRecording, 
    flush,
    isRecording 
  } = useSignal();

  return (
    <div>
      <button onClick={startRecording}>Start</button>
      <button onClick={stopRecording}>Stop</button>
      <button onClick={pauseRecording}>Pause</button>
      <button onClick={resumeRecording}>Resume</button>
      <button onClick={flush}>Flush Events</button>
      <p>Recording: {isRecording ? 'Yes' : 'No'}</p>
    </div>
  );
}

startRecording()

Start session replay recording. Returns a Promise. When to use: Manually start recording if autoStart is false in SignalProvider, or restart recording after stopping.

const { startRecording } = useSignal();

const handleStart = async () => {
  await startRecording();
  console.log('Recording started');
};

stopRecording()

Stop session replay recording. Stops rrweb recorder, network capture, and console capture. When to use: Stop recording when the user navigates away or when you want to disable tracking temporarily.

const { stopRecording } = useSignal();

const handleStop = () => {
  stopRecording();
  console.log('Recording stopped');
};

pauseRecording()

Pause recording temporarily. Events are not captured while paused. When to use: Pause recording for sensitive operations (e.g. payment forms, password entry) without fully stopping.

const { pauseRecording } = useSignal();

const handleSensitiveAction = () => {
  pauseRecording();
  // ... perform sensitive operation
};

resumeRecording()

Resume recording after pausing. When to use: Resume recording after a sensitive operation is complete.

const { resumeRecording } = useSignal();

const handleSensitiveActionComplete = () => {
  resumeRecording();
  // ... continue normal operation
};

flush()

Flush all queued events to the server immediately. Returns a Promise. When to use: Before page unload, before navigation, or when you need to ensure events are sent immediately.

const { flush } = useSignal();

useEffect(() => {
  const handleBeforeUnload = async () => {
    await flush();
  };

  window.addEventListener('beforeunload', handleBeforeUnload);
  return () => window.removeEventListener('beforeunload', handleBeforeUnload);
}, [flush]);

Example: Conditional recording

import { useSignal } from '@signal-js/react';
import { useEffect } from 'react';

function ConditionalRecording({ userConsent }) {
  const { startRecording, stopRecording, isRecording } = useSignal();

  useEffect(() => {
    if (userConsent) {
      startRecording();
    } else {
      stopRecording();
    }
  }, [userConsent, startRecording, stopRecording]);

  return (
    <div>
      {isRecording ? 'Recording active' : 'Recording paused'}
    </div>
  );
}

Getting Started

Features

Integrations

Recording control

React — Recording control

Accessing the methods

startRecording()

stopRecording()

pauseRecording()

resumeRecording()

flush()

Example: Conditional recording

See also

​React — Recording control

​Accessing the methods

​startRecording()

​stopRecording()

​pauseRecording()

​resumeRecording()

​flush()

​Example: Conditional recording

​See also

React — Recording control

Accessing the methods

startRecording()

stopRecording()

pauseRecording()

resumeRecording()

flush()

Example: Conditional recording

See also