Session recording is lazy-loaded only when enabled, keeping your bundle size small (~5KB base + ~200KB when recording).
What is Session Recording? Session recording captures all user interactions, allowing you to replay sessions exactly as users experienced them. This includes:
Mouse movements and clicks
Keyboard input (with privacy options)
Page scrolls and navigation
DOM changes and animations
Console logs and errors
Network requests (optional)
Quick Start Enable session recording in your content script:
// content.js import composite from '@composite-inc/composite-js/content-script' ; await composite . init ({ apiKey: 'pk_your_api_key' , transport: 'chrome-extension' , sessionRecording: true // That's it! });
The SDK automatically:
Lazy-loads recording libraries (~200KB)
Starts capturing user sessions
Handles compression and batching
Manages privacy and security
Configuration Options Basic Configuration await composite . init ({ apiKey: 'pk_your_api_key' , transport: 'chrome-extension' , sessionRecording: { // Privacy & Masking maskAllInputs: true , // Mask all input values maskSelector: '.private' , // CSS selector for elements to mask blockSelector: '.sensitive' , // CSS selector for elements to block entirely ignoreSelector: '.no-record' , // CSS selector for elements to ignore // Recording Features recordCanvas: false , // Record canvas elements (default: false) recordCrossOriginIframes: false , // Record cross-origin iframes collectFonts: true , // Capture web fonts (default: true) inlineImages: false , // Inline images as data URLs // Performance & Sampling sampling: { mousemove: true , // Record mouse movements scroll: 150 , // Scroll throttle interval (ms) media: 800 , // Media event throttle (ms) input: 'last' , // Input recording: 'all' or 'last' }, checkoutEveryNms: 60000 , // Full snapshot every 60 seconds // Buffer & Transport compress: true , // Enable compression (default: true) bufferTimeout: 2000 , // Flush buffer every 2 seconds // Plugins enableRecordingConsoleLog: true , // Capture console logs networkCapture: true , // Capture network requests } });
Privacy-First Recording Protect sensitive user data with multiple privacy options:
await composite . init ({ apiKey: 'pk_your_api_key' , transport: 'chrome-extension' , sessionRecording: { // Mask all text input by default maskAllInputs: true , // Mask specific elements by CSS selector maskSelector: '.password, .credit-card, [data-sensitive]' , // Completely block elements from recording blockSelector: '.privacy-block, #sensitive-data' , // Ignore specific input types ignoreSelector: '[type="password"], [type="email"]' } });
Always mask sensitive information. Use the blockSelector option to completely exclude sensitive areas from recordings.
Options Reference Option Type Default Description maskAllInputsbooleanfalseMask all input field values maskSelectorstring- CSS selector for elements to mask text content blockSelectorstring- CSS selector for elements to block entirely ignoreSelectorstring- CSS selector for elements to ignore recordCanvasbooleanfalseRecord canvas elements (impacts performance) recordCrossOriginIframesbooleanfalseRecord cross-origin iframes collectFontsbooleantrueCapture web fonts inlineImagesbooleanfalseInline images as data URLs samplingobject- Customize event sampling for performance checkoutEveryNmsnumber- Take full snapshot every N milliseconds compressbooleantrueEnable gzip compression enableRecordingConsoleLogbooleanfalseCapture console logs networkCaptureboolean | objectfalseCapture network requests
Manual Control Control recording programmatically:
// Start recording manually composite . startSessionRecording (); // Stop recording composite . stopSessionRecording (); // Check if recording is active const isRecording = composite . isSessionRecordingActive (); // Pause and resume composite . pauseSessionRecording (); composite . resumeSessionRecording ();
Conditional Recording Record only specific user segments or pages:
// Record only for specific users const user = await getUserFromStorage (); if ( user . plan === 'premium' || user . isInternalUser ) { composite . startSessionRecording (); } // Record based on feature flag if ( featureFlags . sessionRecordingEnabled ) { composite . startSessionRecording (); }
Reduce performance impact with sampling (not recommended): await composite . init ({ apiKey: 'pk_your_api_key' , transport: 'chrome-extension' , sessionRecording: { // Record only 50% of sessions sampleRate: 0.5 , // Or use custom sampling logic shouldRecord : () => { // Record 100% of checkout pages if ( isCheckoutPage ()) return true ; // Record 30% of other sessions return Math . random () < 0.3 ; } } });
Configure batching and compression: await composite . init ({ apiKey: 'pk_your_api_key' , transport: 'chrome-extension' , sessionRecording: { // Compression (reduces size by ~70%) compress: true , // Batching configuration bufferTimeout: 2000 , // Send every 2 seconds maxBatchSize: 5000000 , // 5MB max batch size } });
Reduce recording overhead: await composite . init ({ apiKey: 'pk_your_api_key' , transport: 'chrome-extension' , sessionRecording: { // Don't record heavy elements recordCanvas: false , recordCrossOriginIframes: false , // Slim DOM options slimDOMOptions: { script: true , comment: true , headFavicon: true , headWhitespace: true } } });
Canvas recording can significantly impact performance. Only enable when necessary.
Playback in Dashboard View recordings in the Analytics Dashboard:
Navigate to Sessions
Click on any session to view recording
Use playback controls:
Play/Pause
Speed control (1x - 8x)
Skip inactivity
Jump to events
View console logs
Inspect network
Troubleshooting
Recordings not appearing in dashboard
Check:
Session recording is enabled: sessionRecording: true
API key is correct and has recording permissions
No JavaScript errors in console
Network tab shows requests to the API
Background script is properly forwarding messages
Optimize performance: sessionRecording : { recordCanvas : false , compress : true }
Enable compression and filtering: sessionRecording : { compress : true , slimDOMOptions : { script : true , comment : true }, recordCanvas : false , maxBatchSize : 5000000 }
What’s Next? 
