Add Session Recording

Add Session Recording

Implement privacy-aware session recording with @temps-sdk/react-analytics (rrweb under the hood).

> Verified against the real published package. A prior version of this skill documented ` and startRecording/stopRecording/isRecording — **none of those exist**. Confirm before changing: > `bash > npm pack @temps-sdk/react-analytics@latest && tar -xzf temps-sdk-react-analytics-*.tgz \ > && cat package/dist/types.d.ts package/dist/useSessionRecording.d.ts > ``

Installation

npm install @temps-sdk/react-analytics

There are two ways to record — pick one

A) Recommended: configure recording on the analytics provider

Recording is driven by the main TempsAnalyticsProvider via enableSessionRecording + sessionRecordingConfig. If the app already uses the analytics provider (see the add-react-analytics skill), just turn recording on — no second provider needed.

// app/layout.tsx (Next App Router) — provider ships its own 'use client', layout stays a Server Component.
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        
          {children}
        
      
    
  );
}

> basePath="/api/_temps" is correct for apps deployed on Temps — the proxy ingests /api/_temps/session-replay directly. See the add-react-analytics skill for the full basePath explanation.

B) User-toggleable recording (consent flows)

For an explicit on/off toggle, use the separate SessionRecordingProvider. Its real props are only defaultEnabled and persistPreference — masking/blocking is still configured on the analytics provider's sessionRecordingConfig.

// Real signatures:
function SessionRecordingProvider(props: {
  children: React.ReactNode;
  defaultEnabled?: boolean;
  persistPreference?: boolean;   // remember the user's choice in localStorage
}): JSX.Element;

function useSessionRecordingControl(defaultEnabled?: boolean): {
  isEnabled: boolean;
  enable: () => void;
  disable: () => void;
  toggle: () => void;
};

'use client';
import { SessionRecordingProvider, useSessionRecordingControl } from '@temps-sdk/react-analytics';

export function RecordingRoot({ children }: { children: React.ReactNode }) {
  return (
    
      {children}
    
  );
}

function RecordingControls() {
  const { isEnabled, toggle } = useSessionRecordingControl();
  return (
    {isEnabled ? 'Stop' : 'Start'} Recording
  );
}

> ⚠️ The control hook returns { isEnabled, enable, disable, toggle } — not { isRecording, startRecording, stopRecording, toggleRecording }. useSessionRecording() (no "Control") returns { isRecordingEnabled, enableRecording, disableRecording, toggleRecording, sessionId } instead.

Privacy controls

Masking/blocking uses the CSS classes configured in sessionRecordingConfig (defaults: rr-block, rr-mask, rr-ignore).

// Block entirely (placeholder in replay)

  
  

// Mask text content (asterisks in replay)
{socialSecurityNumber}

// Ignore from recording

> ⚠️ data-rr-block / data-rr-mask attribute selectors are not wired by default — use the configured CSS classes, or set custom selectors via sessionRecordingConfig.

GDPR consent flow

'use client';
import { useSessionRecordingControl } from '@temps-sdk/react-analytics';
import { useState, useEffect } from 'react';

function ConsentBanner() {
  const [show, setShow] = useState(false);
  const { enable, disable } = useSessionRecordingControl();

  useEffect(() => {
    const consent = localStorage.getItem('session_recording_consent');
    if (consent === null) setShow(true);
    else if (consent === 'true') enable();
  }, [enable]);

  if (!show) return null;
  return (
    
      We record sessions to improve your experience.
      
         { localStorage.setItem('session_recording_consent', 'true'); enable(); setShow(false); }}>Accept
         { localStorage.setItem('session_recording_consent', 'false'); disable(); setShow(false); }}>Decline
      
    
  );
}

Conditional recording

// Only in production (via the analytics provider)

// Only for some users — gate the SessionRecordingProvider default

// Exclude specific pages — use sessionRecordingConfig.excludedPaths instead of toggling per-route
sessionRecordingConfig={{ excludedPaths: ['/checkout', '/account/billing'] }}

Verification

1. DevTools → Network: look for POSTs to /api/_temps/session-replay.
2. Interact with the app to generate events.
3. Open the session replay in the Temps dashboard.
4. Confirm masked/blocked elements are obscured in the replay.

> The ingest endpoint is /api/_temps/session-replay — not /api/_temps/recordings.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: gotempsh
• Source: gotempsh/temps
• License: Apache-2.0
• Homepage: https://temps.sh/docs

Install and usage instructions live in the source repository linked above.