Bugsnap

A lightweight, customizable bug reporting widget for web applications. Capture screenshots, add annotations, and collect detailed environment information with ease.

Features

• 🎨 Customizable Design - Customize button text, colors, position, size, and more
• 📸 Screenshot Capture - Capture full page or selected areas with resizable selection box
• ✏️ Annotations - Add text and rectangle annotations to screenshots
• 🔍 Environment Data - Automatically captures browser, OS, device info, console errors, network requests, and performance metrics
• ⚡ Lightweight - Minimal bundle size with zero external dependencies for core functionality
• 🎯 Easy Integration - Simple API with just an API key

Installation

npm install bugsnap

Quick Start

import { initBugSnap } from "bugsnap";

initBugSnap({
  apiKey: "your-api-key-here"
});

That's it! The widget will automatically fetch your saved settings from the Bugsnap API.

Configuration

All widget settings are managed through the Bugsnap dashboard. Simply:

1. Go to your project's widget customization page
2. Customize the widget appearance and behavior
3. Click "Save Settings"
4. The widget will automatically use these settings when initialized with your API key

The widget fetches settings from the API on initialization, so any changes you make in the dashboard will be reflected immediately (users may need to refresh their page).

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiKey | string | required | Your Bugsnap API key | | endpoint | string | "/api/ingest/bug" | Optional custom API endpoint URL for submitting bug reports |

All other settings (button text, colors, position, etc.) are configured in the Bugsnap dashboard and fetched automatically.

Screenshot Features

• Full Page Capture - Capture the entire page with a single click
• Area Selection - Draw a resizable box to capture specific areas
• Annotations - Add text bubbles and rectangles to highlight issues
• Image Preview - Preview and edit before submitting

Collected Data

The widget automatically collects:

• Page URL and referrer
• Browser information (name, version)
• Operating system details
• Device type (Desktop/Mobile/Tablet)
• Screen and viewport dimensions
• Timezone and language
• Color scheme preference
• Console errors and warnings
• Failed network requests
• Performance metrics (FCP, LCP, FID, page load time)
• Scroll position
• Connection type and speed

License

MIT