BugMarker 🐞

A premium, Figma-style visual bug reporting tool for React applications. Allow stakeholders and QAs to report bugs, annotate the screen, and capture context automatically.

Zero Backend Required. Works entirely client-side for Image and PDF exports.

Features

• 📸 Visual Annotation: Draw boxes, arrows, and freehand markup on the screen.
• 📝 Context Capture: Automatically captures Console Logs, Network Errors, User Agent, and Local Storage.
• 🎨 Premium UI: Beautiful, dark-mode Interface inspired by Figma.
• � Responsive: "Smart Positioning" ensures the tool works on any screen size.
• � Optional Power-Ups: Add Real-time Sync (Supabase) and Video Replay (rrweb) just by installing them.

Installation

npm install bug-marker

Basic Usage (Client-Side Only)

Import the BugMarker component and place it at the root of your application. No configuration needed!

import { BugMarker } from "bug-marker";
import "bug-marker/dist/style.css"; // Important!

function App() {
  return (
    <div>
      <YourApp />
      <BugMarker />
    </div>
  );
}

This gives you:

• Floating Bug Button
• Annotation Tools (Pen, Arrow, Box)
• Export as Image
• Export as PDF

Optional Enhancements

You can supercharge BugMarker by installing optional peer dependencies. The library detects them automatically.

1. Real-time Backend Sync (Supabase)

Sync comments instantly to your Supabase database.

1. Install: npm install @supabase/supabase-js
2. Pass Credentials:

<BugMarker
  supabaseUrl="https://your-project.supabase.co"
  supabaseAnonKey="your-anon-key"
/>

2. Session Replay (Video)

Record the last few seconds of user interaction leading up to the bug.

1. Install: npm install rrweb
2. Usage: Just install it! A "REC" indicator will appear in the UI, and replay data will be attached to exports/syncs.

Props

| Prop | Type | Description | | ----------------- | --------------------- | ---------------------------------------------------------- | | supabaseUrl | string | (Optional) Your Supabase Project URL. | | supabaseAnonKey | string | (Optional) Your Supabase Anon Key. | | tableName | string | (Optional) Table to sync bugs to (default: bug_reports). | | position | 'left' \| 'right' | Position of the floating button (default: right). | | style | CSSProperties | Custom styles for the button. | | onBeforeCapture | () => Promise<void> | Callback before screen capture starts. | | onAfterCapture | () => Promise<void> | Callback after screen capture ends. |

Admin Dashboard Component

If you use Supabase, we provide a <BugList /> component to build your own dashboard.

import { BugList } from "bug-marker";

<BugList bugs={yourSupabaseData} />;

License

MIT