@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

$3

``bash
npm install @bugshot/browser-sdk
`

$3

`bash
yarn add @bugshot/browser-sdk
`

$3

`html


`

🔧 Quick Start

$3

`typescript
import BugShot from '@bugshot/browser-sdk';

BugShot.init({
apiKey: 'your-api-key-here',
environment: 'production',
release: '1.0.0'
});
`

$3

`typescript
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: 'user@example.com',
username: 'john_doe'
}
});
`

📖 Usage Examples

$3

`typescript
try {
riskyOperation();
} catch (error) {
BugShot.captureError(error);
}
`

$3

`typescript
BugShot.captureMessage('User clicked checkout button', 'info');
BugShot.captureMessage('Payment failed', 'error');
`

$3

`typescript
BugShot.setUser({
id: '12345',
email: 'user@example.com',
username: 'john_doe',
plan: 'premium'
});
`

$3

`typescript
BugShot.setContext('purchase_id', 'order-123');
BugShot.setContext('cart_value', 99.99);
`

$3

`html







Trigger Error




`

🎯 Advanced Features

$3

Session replay is enabled by default and records:
- Click events
- Input changes (excluding passwords)
- Navigation events
- Page views

`typescript
// Clear replay data
BugShot.clearReplay();
`

$3

`typescript
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;
}
});
`

$3

Reduce data volume by sampling errors:

`typescript
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?

$3

Parameters:
- config (object): Configuration options

Returns: BugShotClient

$3

Parameters:
- error (Error | string): Error object or message
- additionalInfo (object, optional): Extra context

$3

Parameters:
- message (string): Message text
- level ('info' | 'warning' | 'error'): Severity level

$3

Parameters:
- user (object): User data

$3

Parameters:
- key (string): Context key
- value (any): Context value

$3

`typescript
BugShot.init({
debug: true,
apiKey: 'your-api-key'
});
``

📝 License

MIT © BugShot Team

🔗 Links

- Documentation
- Dashboard
- GitHub
- NPM