@bugshot/browser-sdk
v1.0.4
Published
Bugshot Browser SDK - Real-time error monitoring and session replay
Maintainers
iisweetheartiiReadme
@bugshot/browser-sdk
Official BugShot SDK for JavaScript/TypeScript applications.
🚀 Features
- ✅ Automatic Error Capture - Catches all JavaScript errors automatically
- ✅ Session Replay - Records user actions before errors occur
- ✅ Source Maps Support - De-minify production errors
- ✅ Breadcrumbs - Track user interactions leading to errors
- ✅ Custom Context - Add tags, user info, and metadata
- ✅ TypeScript Support - Full type definitions included
- ✅ Zero Dependencies - Lightweight and fast
- ✅ CDN Support - Use via CDN without npm
📦 Installation
NPM
npm install @bugshot/browser-sdkYarn
yarn add @bugshot/browser-sdkCDN
<script src="https://cdn.bugshot.com/sdk/1.0.0/bugshot.min.js"></script>
<script>
BugShot.init({
apiKey: 'your-api-key-here'
});
</script>🔧 Quick Start
Basic Setup
import BugShot from '@bugshot/browser-sdk';
BugShot.init({
apiKey: 'your-api-key-here',
environment: 'production',
release: '1.0.0'
});Configuration Options
BugShot.init({
// Required
apiKey: 'your-api-key-here',
// Optional
endpoint: 'https://bugshot-api.log8.kr', // Default
environment: 'production', // 'development', 'staging', etc.
release: '1.0.0', // Your app version
enableSessionReplay: true, // Record user sessions
enableAutoCapture: true, // Auto-capture errors
sampleRate: 1.0, // 0.0 to 1.0 (100% = capture all errors)
debug: false, // Enable debug logs
// Hooks
beforeSend: (error) => {
// Modify or filter errors before sending
if (error.message.includes('ignore')) {
return null; // Don't send this error
}
return error;
},
// User info
user: {
id: '12345',
email: '[email protected]',
username: 'john_doe'
}
});📖 Usage Examples
Manual Error Capture
try {
riskyOperation();
} catch (error) {
BugShot.captureError(error);
}Capture Messages
BugShot.captureMessage('User clicked checkout button', 'info');
BugShot.captureMessage('Payment failed', 'error');Set User Context
BugShot.setUser({
id: '12345',
email: '[email protected]',
username: 'john_doe',
plan: 'premium'
});Add Custom Context
BugShot.setContext('purchase_id', 'order-123');
BugShot.setContext('cart_value', 99.99);Vanilla JavaScript
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bugshot.com/sdk/1.0.0/bugshot.min.js"></script>
<script>
BugShot.init({
apiKey: 'ew_your_api_key_here',
environment: 'production'
});
</script>
</head>
<body>
<button onclick="throwError()">Trigger Error</button>
<script>
function throwError() {
throw new Error('Test error from button click!');
}
</script>
</body>
</html>🎯 Advanced Features
Session Replay
Session replay is enabled by default and records:
- Click events
- Input changes (excluding passwords)
- Navigation events
- Page views
// Clear replay data
BugShot.clearReplay();Error Filtering
BugShot.init({
beforeSend: (error) => {
// Ignore errors from extensions
if (error.file?.includes('chrome-extension://')) {
return null;
}
// Add extra context
error.customData = {
timestamp: Date.now(),
viewport: window.innerWidth + 'x' + window.innerHeight
};
return error;
}
});Sampling
Reduce data volume by sampling errors:
BugShot.init({
sampleRate: 0.5 // Only send 50% of errors
});🔌 Integrations
- React - Error Boundary and Hooks
- Vue - Coming soon
- Angular - Coming soon
- Next.js - Coming soon
📊 What Gets Captured?
Automatic Error Capture
- JavaScript runtime errors
- Unhandled Promise rejections
- Network errors (fetch/XHR)
- Resource loading errors
Context Information
- Browser name and version
- Operating system
- Screen resolution
- User agent
- Page URL
- User interactions (session replay)
🛠️ API Reference
init(config)
Initialize BugShot SDK.
Parameters:
config(object): Configuration options
Returns: BugShotClient
captureError(error, additionalInfo?)
Manually capture an error.
Parameters:
error(Error | string): Error object or messageadditionalInfo(object, optional): Extra context
captureMessage(message, level?)
Capture an informational message.
Parameters:
message(string): Message textlevel('info' | 'warning' | 'error'): Severity level
setUser(user)
Set user information.
Parameters:
user(object): User data
setContext(key, value)
Add custom context.
Parameters:
key(string): Context keyvalue(any): Context value
close()
Stop error capturing and clean up.
🐛 Debugging
Enable debug mode to see SDK logs:
BugShot.init({
debug: true,
apiKey: 'your-api-key'
});📝 License
MIT © BugShot Team