Quick Start

Capture your first bug report in under 5 minutes.

1. Initialize the SDK

import { BugSpotter } from '@bugspotter/sdk';

const bugspotter = await BugSpotter.init({
  endpoint: 'https://api.bugspotter.io',
  apiKey: 'bgs_your_api_key',
  showWidget: true,  // Floating bug report button
});

2. Report a Bug

Click the floating widget button — or call capture() programmatically:

// Automatic: user clicks the widget → screenshot + replay + logs captured

// Programmatic: capture and submit
const report = await bugspotter.capture();
await bugspotter.submit({
  title: 'Navigation broken on checkout',
  description: 'User cannot proceed to payment',
  priority: 'high',
  report,
});

What Gets Captured

Data	How
Screenshot	CSP-safe HTML-to-image, one click
Session Replay	Up to 30s rolling buffer via rrweb (15s default)
Console Logs	All levels (log, warn, error, info, debug)
Network Requests	URL, method, status, duration, timing
Browser Metadata	User agent, viewport, URL, OS

Widget Customization

await BugSpotter.init({
  apiKey: 'bgs_your_api_key',
  endpoint: 'https://api.bugspotter.io',
  showWidget: true,
  widgetOptions: {
    position: 'bottom-right',  // or 'bottom-left'
    text: 'Report Bug',
    backgroundColor: '#d35400',
  },
});

Production Usage

For production, use sampleRate to control overhead:

await BugSpotter.init({
  apiKey: 'bgs_your_api_key',
  endpoint: 'https://api.bugspotter.io',
  sampleRate: 0.1,  // Capture 10% of sessions
  showWidget: false, // Hide widget in production
});

Next: Configuration →