# Gotempsh Temps Temps > Add Session Recording - Skill: `tomevault-io/gotempsh-temps-temps` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/gotempsh-temps-temps` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/gotempsh-temps-temps/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/gotempsh-temps-temps --- # 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 ```bash 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. ```tsx // 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`. ```ts // 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; }; ``` ```tsx '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 ( ); } ``` > ⚠️ 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`). ```tsx // 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 ```tsx '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.

); } ``` ## Conditional recording ```tsx // 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: [gotempsh/temps](https://github.com/gotempsh/temps) — distributed by [TomeVault](https://tomevault.io).