DevSkin Browser SDK for complete user analytics and monitoring with rrweb session recording
npm install @devskin/browser-sdkComprehensive browser monitoring SDK for collecting user analytics, performance metrics, errors, and session recordings.
- 📊 Product Analytics: Track custom events, page views, and user behavior
- 🎯 Session Recording: Record and replay user sessions with privacy controls
- ⚡ Performance Monitoring: Collect Core Web Vitals (LCP, FID, CLS, FCP, TTFB)
- 🐛 Error Tracking: Automatic error capture with breadcrumbs and context
- 🌐 Network Monitoring: Track all network requests (fetch, XHR)
- 📱 Device Detection: Comprehensive device, browser, and OS information
- 🌍 Geolocation: Optional location tracking with user permission
- 🔒 Privacy-First: Built-in privacy controls and data masking
``html
`
`bash`
npm install @devskin/browser-sdk
`javascript
import DevSkin from '@devskin/browser-sdk';
DevSkin.init({
apiKey: 'your-api-key',
appId: 'your-app-id',
apiUrl: 'https://api-monitoring.devskin.com', // Required!
});
`
`javascript
DevSkin.init({
// Required
apiKey: 'your-api-key',
appId: 'your-app-id',
apiUrl: 'https://api-monitoring.devskin.com', // IMPORTANT: Backend URL (Required!)
// Optional
debug: false,
environment: 'production',
release: '1.0.0',
// Feature flags
captureWebVitals: true,
captureNetworkRequests: true,
captureErrors: true,
captureUserAgent: true,
captureLocation: true,
captureDevice: true,
// Session Recording
sessionRecording: {
enabled: true,
maskAllInputs: true,
maskTextSelector: '.sensitive',
blockSelector: '.private',
sampling: 0.1, // Record 10% of sessions
recordCanvas: false,
recordCrossOriginIframes: false,
ignoreClass: 'devskin-block',
},
// Heatmap & User Behavior
heatmapOptions: {
enabled: true,
trackClicks: true, // Track click heatmaps
trackScroll: true, // Track scroll depth
trackMouseMovement: false, // Track mouse movement (can be heavy)
mouseMoveSampling: 0.1, // Sample 10% of mouse movements
},
// Network options
networkRequestOptions: {
ignoreUrls: [/analytics\.google\.com/],
captureHeaders: false,
captureBody: false,
captureFailedOnly: false,
},
// Error options
errorOptions: {
ignoreErrors: [/Script error/i],
denyUrls: [/extensions\//],
includeLocalVariables: true,
maxBreadcrumbs: 30,
},
// Privacy
privacy: {
respectDoNotTrack: true,
cookieConsent: false,
},
// Long task threshold (ms)
longTaskThreshold: 50,
// Callbacks
beforeSend: (event) => {
// Modify or filter events before sending
return event;
},
});
`
`javascript
// Track a custom event
DevSkin.track('button_clicked', {
buttonId: 'signup',
page: '/landing',
});
// Track page view
DevSkin.trackPageView({
title: 'Home Page',
});
`
`javascript`
DevSkin.identify('user-123', {
name: 'John Doe',
email: 'john@example.com',
plan: 'premium',
});
`javascript`
try {
// Your code
} catch (error) {
DevSkin.captureError(error, {
context: 'checkout_process',
step: 'payment',
});
}
`javascript`
DevSkin.addBreadcrumb({
category: 'ui',
message: 'User clicked submit button',
level: 'info',
data: {
formId: 'checkout-form',
},
});
`javascript
// Start recording
DevSkin.startRecording();
// Stop recording
DevSkin.stopRecording();
`
`javascript
// Opt out
DevSkin.optOut();
// Opt in
DevSkin.optIn();
`
The SDK automatically collects:
- Browser Info: Name, version, engine, language, viewport size
- Device Info: Type (mobile/tablet/desktop), OS, screen resolution, memory, CPU cores
- Location Info: URL, hostname, pathname, referrer, timezone
- Performance Metrics: Core Web Vitals, navigation timing, resource timing
- Network Requests: URL, method, status, duration, size
- Errors: Message, stack trace, breadcrumbs, context
- User Actions: Clicks, navigation, console logs
- Heatmap Data: Click positions, scroll depth, mouse movement (if enabled)
With user permission:
- Geolocation: Country, region, city, latitude, longitude
- Session Recordings: Full DOM replay with privacy controls
- All password inputs are automatically masked
- Email addresses are masked by default
- Use CSS classes to mask sensitive data:
- .devskin-mask - Mask text content.devskin-block
- - Completely block element from recording
Record only a percentage of sessions to reduce data collection:
`javascript`
sessionRecording: {
enabled: true,
sampling: 0.1, // Record 10% of sessions
}
Respect browser DNT settings:
`javascript`
privacy: {
respectDoNotTrack: true,
}
Wait for cookie consent before tracking:
`javascript
privacy: {
cookieConsent: true,
}
// Later, after consent is given:
DevSkin.optIn();
`
- Chrome/Edge: Latest 2 versions
- Firefox: Latest 2 versions
- Safari: Latest 2 versions
- Mobile browsers: iOS Safari 12+, Chrome Android
The SDK is designed for minimal performance impact:
- Async initialization
- Efficient event batching
- Lazy loading of features
- Compressed payloads
- ~15KB gzipped
`bashInstall dependencies
npm install
MIT License
For issues and questions, please visit: https://github.com/devskin/browser-sdk