{"_id":"@achado/session-replay","_rev":"2-c4e171c95bc974891fcef63ba168be84","name":"@achado/session-replay","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@achado/session-replay","version":"0.0.1","_id":"@achado/session-replay@0.0.1","maintainers":[{"name":"achado","email":"achadolabs@gmail.com"}],"dist":{"shasum":"d3d6ad0f7914188627ef73c332e9c269b28aa147","tarball":"https://registry.npmjs.org/@achado/session-replay/-/session-replay-0.0.1.tgz","fileCount":27,"integrity":"sha512-mRSEgZJiZ+awGwtxMDFofA0PQVyYZu2KLo/OGTAlGZ8xp8gBdAz5B7QMpfnQK+eLYmyNdfbG6He7K6OGngbdoQ==","signatures":[{"sig":"MEUCIB2zO1vmFrFQzSo6le5wta7ECDAeXVp45XksI09CKYCAAiEAquTOQe/q04K95VYFmvzJw0skE/uQqI/FseWOskN1NLc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":152534},"main":"dist/index.js","type":"commonjs","_from":"file:achado-session-replay-0.0.1.tgz","types":"dist/types/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.js"},"./plugin":{"types":"./dist/types/session-replay-plugin.d.ts","import":"./dist/esm/session-replay-plugin.js","require":"./dist/cjs/session-replay-plugin.js"},"./recorder":{"types":"./dist/types/session-recorder.d.ts","import":"./dist/esm/session-recorder.js","require":"./dist/cjs/session-recorder.js"},"./package.json":"./package.json","./session-replay":{"types":"./dist/types/session-replay.d.ts","import":"./dist/esm/session-replay.js","require":"./dist/cjs/session-replay.js"}},"scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"vitest run","build":"rollup -c","clean":"rm -rf dist","test:watch":"vitest","type-check":"tsc --noEmit"},"_npmUser":{"name":"achado","email":"achadolabs@gmail.com"},"_resolved":"/tmp/406760a82704869eabd800a56544c308/achado-session-replay-0.0.1.tgz","_integrity":"sha512-mRSEgZJiZ+awGwtxMDFofA0PQVyYZu2KLo/OGTAlGZ8xp8gBdAz5B7QMpfnQK+eLYmyNdfbG6He7K6OGngbdoQ==","_npmVersion":"10.9.3","description":"Session replay functionality using rrweb for Achado platform","directories":{},"sideEffects":false,"_nodeVersion":"22.20.0","dependencies":{"rrweb":"^2.0.0-alpha.11","@achado/core":"0.0.1","rrweb-snapshot":"^2.0.0-alpha.11"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{},"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/session-replay_0.0.1_1759924668207_0.3773235439393898","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@achado/session-replay","version":"0.0.2","type":"commonjs","description":"Session replay functionality using rrweb for Achado platform","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/types/index.d.ts","exports":{".":{"import":"./dist/esm/index.js","require":"./dist/cjs/index.js","types":"./dist/types/index.d.ts"},"./session-replay":{"import":"./dist/esm/session-replay.js","require":"./dist/cjs/session-replay.js","types":"./dist/types/session-replay.d.ts"},"./plugin":{"import":"./dist/esm/session-replay-plugin.js","require":"./dist/cjs/session-replay-plugin.js","types":"./dist/types/session-replay-plugin.d.ts"},"./recorder":{"import":"./dist/esm/session-recorder.js","require":"./dist/cjs/session-recorder.js","types":"./dist/types/session-recorder.d.ts"},"./package.json":"./package.json"},"sideEffects":false,"dependencies":{"rrweb":"^2.0.0-alpha.11","rrweb-snapshot":"^2.0.0-alpha.11","@achado/core":"0.0.2"},"devDependencies":{},"peerDependencies":{},"publishConfig":{"access":"public"},"scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"vitest run","test:watch":"vitest","lint":"eslint src --ext .ts,.tsx","type-check":"tsc --noEmit","clean":"rm -rf dist"},"_id":"@achado/session-replay@0.0.2","_integrity":"sha512-Y7VZIRUSZ8pGbLNERKykESpin9sd7nNtQuGEnCIMqzh4ApIQCNMW4/EGvYGOAIbETewKgpKhWgmIF8sHolhoYQ==","_resolved":"/tmp/4b49ca8afdb88a7ad691d999bd3489d2/achado-session-replay-0.0.2.tgz","_from":"file:achado-session-replay-0.0.2.tgz","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-Y7VZIRUSZ8pGbLNERKykESpin9sd7nNtQuGEnCIMqzh4ApIQCNMW4/EGvYGOAIbETewKgpKhWgmIF8sHolhoYQ==","shasum":"f713404127537f91090f7a4ccbea32b4d21b3514","tarball":"https://registry.npmjs.org/@achado/session-replay/-/session-replay-0.0.2.tgz","fileCount":27,"unpackedSize":152534,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAEqKm1f8/wy4R4zOIwv4Z6/5xzWAcmARKdHRmqKr2NtAiEArnYNu/tpIRnFphTEVZ35dDiz+PZfC6yAq9SB+F9RW0U="}]},"_npmUser":{"name":"achado","email":"achadolabs@gmail.com"},"directories":{},"maintainers":[{"name":"achado","email":"achadolabs@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/session-replay_0.0.2_1759937318873_0.7839876872361964"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-08T11:57:48.140Z","modified":"2025-10-08T15:28:39.251Z","0.0.1":"2025-10-08T11:57:48.399Z","0.0.2":"2025-10-08T15:28:39.092Z"},"description":"Session replay functionality using rrweb for Achado platform","maintainers":[{"name":"achado","email":"achadolabs@gmail.com"}],"readme":"# @achado/session-replay\n\nSession recording functionality using rrweb for the Achado platform. Capture complete user sessions with privacy controls and efficient storage.\n\n## Installation\n\n```bash\nnpm install @achado/core @achado/session-replay\n```\n\n## Quick Start\n\n```typescript\nimport { AchadoClient } from '@achado/core';\nimport { SessionReplay } from '@achado/session-replay';\n\nconst client = new AchadoClient({ apiKey: 'your-api-key' });\nconst sessionReplay = new SessionReplay(client, {\n  enabled: true,\n  sampleRate: 0.1, // Record 10% of sessions\n});\n\nawait client.initialize();\nawait sessionReplay.initialize();\n\n// Sessions are now being recorded automatically!\n```\n\n## Features\n\n### 🎥 Complete Session Recording\n\n- Full DOM snapshots and incremental changes\n- Mouse movements, clicks, and scrolls\n- Keyboard inputs (with privacy controls)\n- Window resize and focus events\n- Network requests (optional)\n\n### 🔒 Privacy Controls\n\n- Text input masking\n- Sensitive element blocking\n- Custom masking rules\n- Selective recording areas\n- Compliance-ready defaults\n\n### ⚡ Performance Optimized\n\n- Efficient compression\n- Smart segmentation\n- Background processing\n- Minimal performance impact\n- Automatic cleanup\n\n### 📊 Error Correlation\n\n- Automatic error tracking\n- Error replay linking\n- Stack trace capture\n- Context preservation\n\n## Configuration\n\n```typescript\ninterface SessionReplayConfig {\n  enabled?: boolean; // Default: true\n  sampleRate?: number; // Default: 1.0 (100%)\n  maxDuration?: number; // Default: 1800000 (30 min)\n  inactiveThreshold?: number; // Default: 300000 (5 min)\n  captureConsole?: boolean; // Default: false\n  captureNetwork?: boolean; // Default: false\n  maskTextInputs?: boolean; // Default: true\n  maskAllText?: boolean; // Default: false\n  maskTextSelector?: string; // Custom mask selector\n  blockClass?: string; // Default: 'rr-block'\n  blockSelector?: string; // Custom block selector\n  ignoreClass?: string; // Default: 'rr-ignore'\n  checkoutEveryNth?: number; // Default: 200\n  checkoutEveryNms?: number; // Default: 300000 (5 min)\n  slimDOMOptions?: SlimDOMOptions;\n}\n```\n\n### Example Configuration\n\n```typescript\nconst sessionReplay = new SessionReplay(client, {\n  enabled: true,\n  sampleRate: 0.2, // Record 20% of sessions\n  maxDuration: 900000, // 15 minutes max\n  maskTextInputs: true,\n  blockClass: 'no-record',\n  checkoutEveryNth: 100,\n  captureConsole: false,\n  slimDOMOptions: {\n    script: true,\n    comment: true,\n    headFavicon: true,\n    headWhitespace: true,\n  },\n});\n```\n\n## API Reference\n\n### SessionReplay Class\n\n#### Constructor\n\n```typescript\nnew SessionReplay(client: AchadoClient, config?: SessionReplayConfig)\n```\n\n#### Methods\n\n##### `initialize(): Promise<void>`\n\nStart session recording.\n\n##### `startRecording(): Promise<void>`\n\nManually start recording.\n\n##### `stopRecording(): Promise<void>`\n\nManually stop recording.\n\n##### `isRecording(): boolean`\n\nCheck if currently recording.\n\n##### `getSessionId(): string | undefined`\n\nGet the current session ID.\n\n##### `getRecordingDuration(): number`\n\nGet recording duration in milliseconds.\n\n##### `getEventCount(): number`\n\nGet total recorded events.\n\n##### `getRecordingStats()`\n\nGet comprehensive recording statistics.\n\n```typescript\nconst stats = sessionReplay.getRecordingStats();\n// Returns: { sessionId, isRecording, duration, eventCount }\n```\n\n##### `updateConfig(config: Partial<SessionReplayConfig>): void`\n\nUpdate configuration at runtime.\n\n##### `destroy(): Promise<void>`\n\nStop recording and clean up.\n\n## Privacy & Masking\n\n### Automatic Masking\n\nBy default, sensitive inputs are masked:\n\n- Password fields\n- Credit card inputs\n- Any field with `data-sensitive` attribute\n\n### HTML Attributes\n\n```html\n<!-- Block entire sections from recording -->\n<div class=\"rr-block\">This content will not be recorded</div>\n\n<!-- Ignore elements (still recorded but marked) -->\n<div class=\"rr-ignore\">This will be in replay but marked as ignored</div>\n\n<!-- Mask text content -->\n<div data-mask-text>This text will be masked in recordings</div>\n\n<!-- Mark sensitive inputs -->\n<input type=\"text\" data-sensitive placeholder=\"SSN\" />\n<input type=\"password\" />\n<!-- Automatically masked -->\n```\n\n### Custom Masking\n\n```typescript\nconst sessionReplay = new SessionReplay(client, {\n  maskTextInputs: true,\n  maskTextSelector: '.mask-this, [data-private]',\n  blockClass: 'no-record',\n  blockSelector: '.admin-only, .sensitive-area',\n});\n```\n\n### Compliance Options\n\n```typescript\n// GDPR-friendly setup\nconst sessionReplay = new SessionReplay(client, {\n  maskAllText: true, // Mask all text content\n  maskTextInputs: true, // Mask all inputs\n  captureConsole: false, // Don't capture console logs\n  captureNetwork: false, // Don't capture network requests\n  blockClass: 'gdpr-block', // Custom blocking class\n});\n```\n\n## Recording Lifecycle\n\n### Session Management\n\n1. **Session Start**: New session begins on page load\n2. **Event Capture**: DOM mutations and interactions recorded\n3. **Segmentation**: Events split into manageable chunks\n4. **Transmission**: Segments sent to API\n5. **Session End**: Recording stops on inactivity or max duration\n\n### Event Types\n\n- **Full Snapshot**: Complete DOM state\n- **Incremental Snapshot**: DOM changes\n- **Mouse Interaction**: Clicks, movements, scrolls\n- **Input**: Keyboard and form interactions\n- **ViewportResize**: Window size changes\n- **Meta**: Custom events and errors\n\n## Data Structure\n\n### Session Metadata\n\n```typescript\n{\n  sessionId: 'session_1234567890_abc123',\n  userId: 'user-456',\n  startTime: 1640995200000,\n  endTime: 1640998800000,\n  duration: 3600000,\n  totalEvents: 1247,\n  segments: 12,\n  url: 'https://example.com/app',\n  userAgent: 'Mozilla/5.0...',\n  errors: 2,\n  interactions: 45\n}\n```\n\n### Replay Segment\n\n```typescript\n{\n  id: 'segment_uuid',\n  sessionId: 'session_1234567890_abc123',\n  sequence: 3,\n  events: [...], // rrweb events\n  startTime: 1640995800000,\n  endTime: 1640996100000,\n  size: 15420 // bytes\n}\n```\n\n## Performance Impact\n\n### Benchmarks\n\n- **Memory Usage**: < 10MB for typical sessions\n- **CPU Impact**: < 1% additional usage\n- **Network**: Compressed segments, < 100KB/minute\n- **DOM Performance**: Negligible impact on interactions\n\n### Optimization Features\n\n- **Smart Segmentation**: Automatic chunking for efficiency\n- **Compression**: Event data compressed before transmission\n- **Debouncing**: Rapid events intelligently merged\n- **Cleanup**: Automatic memory management\n\n## Error Integration\n\n### Automatic Error Tracking\n\nErrors are automatically correlated with recordings:\n\n```typescript\n// This error will be linked to the current recording\nthrow new Error('Payment processing failed');\n```\n\n### Manual Error Tracking\n\n```typescript\ntry {\n  processPayment();\n} catch (error) {\n  // Error automatically tracked and linked to recording\n  console.error('Payment failed:', error);\n}\n```\n\n### Error Playback\n\nRecordings with errors are automatically flagged and can be filtered for debugging.\n\n## Sampling Strategy\n\n### Basic Sampling\n\n```typescript\n// Record 10% of all sessions\nconst sessionReplay = new SessionReplay(client, {\n  sampleRate: 0.1,\n});\n```\n\n### Conditional Sampling\n\n```typescript\n// Custom sampling logic\nconst shouldRecord = () => {\n  // Record all admin users\n  if (user.role === 'admin') return true;\n\n  // Record 5% of regular users\n  if (Math.random() < 0.05) return true;\n\n  return false;\n};\n\nconst sessionReplay = new SessionReplay(client, {\n  enabled: shouldRecord(),\n});\n```\n\n### Error-Based Recording\n\n```typescript\n// Start recording when errors occur\nwindow.addEventListener('error', () => {\n  if (!sessionReplay.isRecording()) {\n    sessionReplay.startRecording();\n  }\n});\n```\n\n## Storage & Bandwidth\n\n### Local Storage\n\n- Session data temporarily stored locally\n- Automatic cleanup after transmission\n- Fallback for network failures\n\n### Network Optimization\n\n- Gzip compression\n- Incremental transmission\n- Retry logic with exponential backoff\n- Offline support\n\n## Browser Support\n\n- Chrome 70+\n- Firefox 65+\n- Safari 12+\n- Edge 79+\n\n## Examples\n\n### Basic Setup\n\n```typescript\nconst sessionReplay = new SessionReplay(client, {\n  enabled: true,\n  sampleRate: 1.0, // Record all sessions in development\n});\n```\n\n### Production Setup\n\n```typescript\nconst sessionReplay = new SessionReplay(client, {\n  enabled: process.env.NODE_ENV === 'production',\n  sampleRate: 0.05, // 5% of production sessions\n  maxDuration: 1200000, // 20 minutes max\n  maskTextInputs: true,\n  blockClass: 'no-record',\n});\n```\n\n### High-Privacy Setup\n\n```typescript\nconst sessionReplay = new SessionReplay(client, {\n  enabled: true,\n  maskAllText: true,\n  maskTextInputs: true,\n  captureConsole: false,\n  captureNetwork: false,\n  blockClass: 'sensitive',\n  slimDOMOptions: {\n    script: true,\n    comment: true,\n    headFavicon: true,\n  },\n});\n```\n\n### Error-Focused Recording\n\n```typescript\nlet hasError = false;\n\nwindow.addEventListener('error', () => {\n  hasError = true;\n});\n\nconst sessionReplay = new SessionReplay(client, {\n  enabled: () => hasError, // Only record sessions with errors\n  sampleRate: 1.0,\n});\n```\n","readmeFilename":"README.md"}