Alphard Session Replay SDK - Record and replay user sessions with automatic user identification. One-script setup for session recording and user tracking.
npm install alphard-session-replaybash
npm install alphard-session-replay
`
Quick Start
$3
`javascript
import Alphard from 'alphard-session-replay';
Alphard.init({
projectKey: 'YOUR_PROJECT_KEY',
autoIdentify: true,
getUserInfo: () => {
// Return user info if available, or null
const user = getCurrentUser();
return user ? {
id: user.id,
name: user.name,
email: user.email
} : null;
}
});
`
That's it! Sessions will be recorded AND users will be automatically identified.
Platform-Specific Examples
$3
`typescript
import { useEffect } from 'react';
import { useUser } from '@clerk/clerk-react';
import Alphard from 'alphard-session-replay';
function App() {
const { user } = useUser();
useEffect(() => {
Alphard.init({
projectKey: process.env.NEXT_PUBLIC_ALPHARD_KEY!,
autoIdentify: true,
getUserInfo: () => user ? ({
id: user.id,
name: ${user.firstName} ${user.lastName},
email: user.primaryEmailAddress?.emailAddress
}) : null
});
}, [user]);
return
}
`
$3
`javascript
import { createApp } from 'vue';
import Alphard from 'alphard-session-replay';
import { useAuthStore } from './stores/auth';
const authStore = useAuthStore();
Alphard.init({
projectKey: 'YOUR_PROJECT_KEY',
autoIdentify: true,
getUserInfo: () => {
const user = authStore.currentUser;
return user ? {
id: user.id,
name: user.name,
email: user.email
} : null;
}
});
createApp(App).mount('#app');
`
$3
`html
`
Configuration Options
`typescript
Alphard.init({
// Required
projectKey: string;
// Auto-Identification
autoIdentify?: boolean; // Default: false
getUserInfo?: () => UserInfo | null;
// Privacy
maskAllInputs?: boolean; // Default: false
maskSelectors?: string[]; // Default: []
blockSelectors?: string[]; // Default: []
// Sampling
sampleRate?: number; // Default: 1.0 (100%)
// Performance
capturePageSnapshots?: boolean; // Default: true
snapshotOnRouteChange?: boolean; // Default: true
maxMousemoveFps?: number; // Default: 10
// Features
captureConsole?: boolean; // Default: false
captureNetwork?: boolean; // Default: false
// Advanced
apiUrl?: string; // Default: 'http://localhost:5001/api'
consent?: boolean; // Default: true
shouldRecord?: (userInfo) => boolean;
// Callbacks
onSessionStart?: (sessionId: string) => void;
onSessionEnd?: (sessionId: string) => void;
});
`
API Reference
$3
Initialize Alphard Session Replay.
`javascript
const replay = Alphard.init({
projectKey: 'YOUR_PROJECT_KEY',
autoIdentify: true,
getUserInfo: () => getCurrentUser()
});
`
$3
Manually update user information (rarely needed with autoIdentify).
`javascript
Alphard.updateUser({
id: 'user_123',
name: 'John Doe',
email: 'john@example.com'
});
`
$3
Get the current session ID.
`javascript
const sessionId = Alphard.getSessionId();
`
$3
Stop recording the current session.
`javascript
Alphard.stop();
`
$3
Legacy method for user identification. Use autoIdentify instead.
`javascript
Alphard.identify('user_123', {
name: 'John Doe',
email: 'john@example.com'
});
`
Privacy & Compliance
$3
- ✅ Password fields automatically masked
- ✅ Credit card inputs hidden
- ✅ Sensitive form fields obscured
$3
`javascript
Alphard.init({
projectKey: 'YOUR_PROJECT_KEY',
// Mask all text inputs
maskAllInputs: true,
// Mask specific elements
maskSelectors: ['.sensitive', '.ssn', '[data-private]'],
// Block entire sections
blockSelectors: ['.payment-details', '.confidential']
});
`
$3
`javascript
// Only initialize after user consent
if (userHasGivenConsent()) {
Alphard.init({
projectKey: 'YOUR_PROJECT_KEY',
consent: true
});
}
`
TypeScript Support
Full TypeScript definitions included:
`typescript
import Alphard, { AlphardConfig, UserInfo } from 'alphard-session-replay';
const config: AlphardConfig = {
projectKey: 'YOUR_PROJECT_KEY',
autoIdentify: true,
getUserInfo: (): UserInfo | null => {
// Your user detection logic
}
};
Alphard.init(config);
`
Troubleshooting
$3
1. Check Project Key is correct
2. Verify getUserInfo() returns user object (or null)
3. Check browser console for errors
4. Ensure consent: true is set
$3
1. Ensure autoIdentify: true is enabled
2. Verify getUserInfo() returns correct user object
3. Add debug log: console.log('User:', getUserInfo())
$3
1. Reduce sample rate: sampleRate: 0.5
2. Lower mouse tracking: maxMousemoveFps: 5`