@tracekit/replay

Privacy-first session recording for TraceKit. Records DOM changes, network requests, and console output with all text and inputs masked by default. Replays are linked to distributed traces and errors automatically.

Installation

npm install @tracekit/replay @tracekit/browser

Quick Start

import { init } from '@tracekit/browser';
import { replayIntegration } from '@tracekit/replay';

init({
  apiKey: 'your-api-key',
  addons: [replayIntegration()],
});

Configuration

All options are optional. Defaults are privacy-first and production-ready.

replayIntegration({
  sessionSampleRate: 0.1,   // Record 10% of sessions
  errorSampleRate: 0.0,     // Capture replay on error (0.0 = off, 1.0 = all errors)
  unmask: ['.public-text'], // CSS selectors to unmask (default: everything masked)
  idleTimeout: 1800000,     // End session after 30min inactivity
  flushInterval: 30000,     // Upload chunks every 30 seconds
  maxBufferSize: 24117248,  // 23MB max buffer before dropping oldest events
  inlineImages: false,      // Capture images as base64 data URIs
  blockMedia: true,         // Block img/video/canvas/svg/iframe from recording
});

Option	Type	Default	Description
sessionSampleRate	number	0.1	Percentage of sessions to record (0.0 to 1.0)
errorSampleRate	number	0.0	Capture replay when an error occurs (0.0 to 1.0)
unmask	string[]	[]	CSS selectors for elements to unmask
idleTimeout	number	1800000	Milliseconds of inactivity before session ends (30 min)
flushInterval	number	30000	Milliseconds between chunk uploads (30s)
maxBufferSize	number	24117248	Max buffer size in bytes before dropping oldest events (23MB)
inlineImages	boolean	false	Inline images as base64 data URIs in the recording
blockMedia	boolean	true	Replace media elements with placeholders

Metadata

The SDK automatically sends session metadata with each chunk upload:

• Page URL — current window.location.href
• User ID — from the browser SDK scope (setUser())
• User-Agent — for device, OS, and browser detection
• Click count — accumulated mouse clicks in the session
• Keypress count — accumulated input events in the session

These are displayed in the replay list as country flags, browser/device/OS icons, and interaction counts.

API

const replay = replayIntegration();

// Force upload pending events (e.g., before navigation)
replay.flush();

// Get the current session ID (for linking to errors)
replay.getSessionId();

Documentation

Full documentation: https://app.tracekit.dev/docs/frontend/session-replay

License

MIT