@boobalan_jkkn/bug-reporter-sdk

v1.3.2

Published

3 months ago

Bug reporting SDK with screenshot, file attachments, console logging, network trace, and leaderboard - Complete bug bounty platform for teams

Downloads

0High
0Medium
0Low

boobalan_jkkn

bug-reporter error-tracking react nextjs bug-tracking error-reporting crash-reporting screenshot console-logs jkkn

@boobalan_jkkn/bug-reporter-sdk

Version 1.3.0 - Complete Bug Bounty Platform SDK for React Applications

🚀 Features

🐛 Floating Bug Button - One-click bug reporting widget
📸 Mandatory Screenshot Capture - Automatically captures page state
📎 File Attachments - Upload up to 5 files per bug report (NEW in v1.3.0)
🔍 Automatic Console Logs - Captures last 100 console logs automatically
🌐 Network Request Capture - Captures HTTP/XHR requests with timing info
📊 Enhanced Bug Dashboard - View bugs with filters, stats, and attachments (ENHANCED in v1.3.0)
🏆 Leaderboard System - Track top bug reporters with points and prizes (NEW in v1.3.0)
🔒 Secure API Key Authentication - Safe integration
⚡ Lightweight - Minimal performance impact
🎨 Customizable - Flexible configuration options
📱 Mobile Responsive - Works on all devices

📦 Installation

npm install @boobalan_jkkn/bug-reporter-sdk

Peer Dependencies:

React 18.x or 19.x
React DOM 18.x or 19.x
lucide-react ^0.400.0 or higher

🔧 Quick Start

1. Get Your API Key

Go to: https://your-platform-url.com/org/your-org/applications
Create or select your application
Copy the API key from the application settings

2. Wrap Your App with BugReporterProvider

For Next.js 13+ (App Router):

// app/layout.tsx
import { BugReporterProvider } from '@boobalan_jkkn/bug-reporter-sdk';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <BugReporterProvider
          apiKey={process.env.NEXT_PUBLIC_BUG_REPORTER_API_KEY!}
          apiUrl={process.env.NEXT_PUBLIC_BUG_REPORTER_API_URL!}
          enabled={true}
          debug={process.env.NODE_ENV === 'development'}
          userContext={{
            email: '[email protected]',  // Optional: Current user email
            name: 'John Doe'             // Optional: Current user name
          }}
        >
          {children}
        </BugReporterProvider>
      </body>
    </html>
  );
}

For Create React App:

// src/App.tsx
import { BugReporterProvider } from '@boobalan_jkkn/bug-reporter-sdk';

function App() {
  return (
    <BugReporterProvider
      apiKey={process.env.REACT_APP_BUG_REPORTER_API_KEY!}
      apiUrl={process.env.REACT_APP_BUG_REPORTER_API_URL!}
      enabled={true}
    >
      <YourApp />
    </BugReporterProvider>
  );
}

3. Set Environment Variables

Create a .env.local file:

# Next.js
NEXT_PUBLIC_BUG_REPORTER_API_KEY=app_xxxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_BUG_REPORTER_API_URL=https://your-platform.vercel.app

# Create React App
REACT_APP_BUG_REPORTER_API_KEY=app_xxxxxxxxxxxxxxxxxxxxx
REACT_APP_BUG_REPORTER_API_URL=https://your-platform.vercel.app

4. Test It!

A red bug button will appear in the bottom-right corner. Click it to:

📸 Automatically capture a screenshot
📎 Optionally attach files (images, PDFs, logs)
📝 Fill out the bug report form
🚀 Submit with console logs and network trace included

🆕 What's New in v1.3.0

📎 File Attachments

Upload up to 5 files per bug report to provide more context:

Supported File Types: Images (PNG, JPG, GIF, WebP), PDF, TXT, CSV, JSON
File Size Limit: 10MB per file
Image Previews: Thumbnails for image files
Drag & Drop: Easy file selection
Validation: Automatic size and type checking

How to Use:

Click the bug button
Fill out bug details
Click "Choose Files" to add attachments
Preview shows selected files
Remove files if needed
Submit report

🔍 Enhanced Bug Viewing (MyBugsPanel)

Completely redesigned bug viewing experience:

📊 Statistics Dashboard: Total, Open, In Progress, Resolved counts
🎯 Advanced Filtering: Filter by status (All, Open, In Progress, Resolved, Closed)
📋 Expandable Cards: Click to view full details
📎 Attachment Viewer: Grid layout with image previews
🏷️ Status & Category Badges: Color-coded visual indicators
⏰ Smart Dates: "Just now", "5m ago", "2h ago" formatting
🔗 Clickable Links: Page URLs and attachment links open in new tab
✨ Modern Design: Professional UI with hover effects

🏆 Leaderboard System (NEW)

Track and reward top bug reporters:

🥇 Medal System: Gold, Silver, Bronze for top 3
📅 Period Toggles: All Time, This Week, This Month
🎁 Prize Display: Shows weekly/monthly prize amounts
📊 Points System: Configurable points per priority level
👤 User Profiles: Avatar, name, email display
📈 Rankings: Bugs count and total points per user
🎨 Beautiful Table: Professional leaderboard design

📚 API Reference

BugReporterProvider Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | apiKey | string | ✅ Yes | - | Your application API key from the platform | | apiUrl | string | ✅ Yes | - | Platform API URL (e.g., https://bugs.example.com) | | enabled | boolean | ❌ No | true | Enable/disable bug reporting widget | | debug | boolean | ❌ No | false | Enable debug logging in console | | userContext | object | ❌ No | undefined | User information to attach to bug reports | | userContext.email | string | ❌ No | - | Reporter's email address | | userContext.name | string | ❌ No | - | Reporter's display name | | networkCapture | boolean | ❌ No | true | Enable/disable network request capture | | networkBufferSize | number | ❌ No | 10 | Max network requests to store (circular buffer) | | networkExcludePatterns | RegExp[] | ❌ No | [] | URL patterns to exclude from capture |

MyBugsPanel Component

Display and manage bugs submitted by the current user:

import { MyBugsPanel } from '@boobalan_jkkn/bug-reporter-sdk';

function MyBugsPage() {
  return (
    <div className="container">
      <h1>My Submitted Bugs</h1>
      <MyBugsPanel />
    </div>
  );
}

Features:

Statistics bar with bug counts
Filter by status
Expandable bug cards
Attachment grid viewer
Screenshot preview
Status badges

No props required - Uses context from BugReporterProvider.

LeaderboardPanel Component (NEW in v1.3.0)

Display leaderboard rankings for bug reporters:

import { LeaderboardPanel } from '@boobalan_jkkn/bug-reporter-sdk';

function LeaderboardPage() {
  return (
    <div className="container">
      <LeaderboardPanel
        applicationId="your-app-id"
        limit={10}
        defaultPeriod="all-time"
      />
    </div>
  );
}

Props:

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | applicationId | string | ✅ Yes | - | Application ID to show leaderboard for | | limit | number | ❌ No | 10 | Maximum number of entries to display | | defaultPeriod | 'all-time' \| 'weekly' \| 'monthly' | ❌ No | 'all-time' | Initial time period |

Features:

Period selector (All Time, This Week, This Month)
Prize information display
Points system breakdown
Top 3 with medal icons
User avatars and profiles
Sortable rankings

📖 Usage Examples

Basic Setup (Minimal)

import { BugReporterProvider } from '@boobalan_jkkn/bug-reporter-sdk';

<BugReporterProvider
  apiKey="app_your_api_key"
  apiUrl="https://bugs.yourplatform.com"
>
  <YourApp />
</BugReporterProvider>

With User Context

import { BugReporterProvider } from '@boobalan_jkkn/bug-reporter-sdk';

<BugReporterProvider
  apiKey="app_your_api_key"
  apiUrl="https://bugs.yourplatform.com"
  userContext={{
    email: currentUser.email,
    name: currentUser.name
  }}
>
  <YourApp />
</BugReporterProvider>

Complete Dashboard with All Components

import {
  BugReporterProvider,
  MyBugsPanel,
  LeaderboardPanel
} from '@boobalan_jkkn/bug-reporter-sdk';

function BugDashboard() {
  return (
    <BugReporterProvider
      apiKey={process.env.NEXT_PUBLIC_BUG_REPORTER_API_KEY!}
      apiUrl={process.env.NEXT_PUBLIC_BUG_REPORTER_API_URL!}
      userContext={{
        email: user.email,
        name: user.name
      }}
    >
      <div className="dashboard">
        <section>
          <h2>My Bug Reports</h2>
          <MyBugsPanel />
        </section>

        <section>
          <h2>Leaderboard</h2>
          <LeaderboardPanel
            applicationId="your-app-id"
            limit={20}
            defaultPeriod="monthly"
          />
        </section>
      </div>
    </BugReporterProvider>
  );
}

Disable in Production

<BugReporterProvider
  apiKey={process.env.NEXT_PUBLIC_BUG_REPORTER_API_KEY!}
  apiUrl={process.env.NEXT_PUBLIC_BUG_REPORTER_API_URL!}
  enabled={process.env.NODE_ENV !== 'production'} // Only dev/staging
>
  <YourApp />
</BugReporterProvider>

🎯 How It Works

Step 1: User Encounters a Bug

User clicks the red floating bug button (bottom-right).

Step 2: Screenshot Capture (Automatic)

Page screenshot captured automatically using html2canvas
Takes ~800ms for optimal quality
If capture fails, widget doesn't open (user can retry)

Step 3: User Fills Form

Category (required): Bug, Feature Request, UI/Design, Performance, Security, Other
Title (required): Min 5 characters
Description (required): Min 10 characters
Attachments (optional): Up to 5 files, 10MB each
Screenshot (required): Shows preview and status

Step 4: Console Logs & Network Trace (Automatic)

SDK captures console activity from the moment it loads
Stores last 100 logs with timestamps
Captures last 10 network requests with timing info

Step 5: Submit Bug Report

Complete payload sent to platform with all context data.

🔐 Security

API keys are scoped to specific applications
File uploads validated for type and size
Sensitive headers automatically filtered from network trace
Screenshots are base64 encoded and stored securely
Console logs sanitized before transmission
User context is optional and controllable
All attachments stored in secure Supabase Storage

📊 Performance

Bundle Size: ~25 KB gzipped (increased from v1.2.0 due to new components)
Screenshot Capture: ~800ms average
File Upload: Depends on file size and network
Console Logging: Minimal overhead (< 1ms per log)
Memory Usage: Stores last 100 logs (~50-100 KB)
Network Capture: Circular buffer, minimal memory impact

🌐 Browser Support

Chrome 90+
Edge 90+
Firefox 88+
Safari 14+
Mobile browsers (iOS Safari 14+, Chrome Mobile)

📄 Changelog

v1.3.0 (2026-01-02)

✨ NEW: File attachment support (up to 5 files, 10MB each)
✨ NEW: LeaderboardPanel component with period toggles
✨ NEW: Prize display and points system visualization
✨ ENHANCED: MyBugsPanel with statistics, filters, and attachment viewer
✨ ENHANCED: Expandable bug cards with full details
🎨 IMPROVED: Modern UI with status badges and category badges
🎨 IMPROVED: Smart date formatting ("5m ago", "2h ago")
📎 IMPROVED: Attachment grid viewer with image previews
🏆 IMPROVED: Medal system for top 3 leaderboard positions
🐛 FIXED: Status consistency (changed 'new' to 'open')

v1.2.0 (2026-01-02)

✨ NEW: Network request capture for fetch() and XMLHttpRequest
✨ NEW: Configurable network buffer size (default: 10 requests)
✨ NEW: Custom exclude patterns for network capture via networkExcludePatterns
🔒 SECURITY: Automatic filtering of sensitive headers (Authorization, Cookie, API keys)
🔒 SECURITY: Auto-exclusion of SDK's own API calls to prevent recursion
📊 ENHANCED: Network request count added to metadata
🧹 IMPROVED: Automatic buffer clearing after successful bug submission

v1.1.0 (2025-01-14)

✨ NEW: Mandatory screenshot capture - widget only opens after successful capture
✨ NEW: Automatic console log capture - captures last 100 logs with timestamps
✨ NEW: Enhanced validation - submit blocked without screenshot
🎨 IMPROVED: Better UX with visual feedback for required fields
🐛 FIXED: Screenshot failures now handled gracefully

v1.0.7 (2025-01-10)

🐛 Bug fixes and performance improvements

v1.0.0 (2025-01-04)

🎉 Initial release

🔄 Updating from Previous Versions

From v1.2.0 to v1.3.0

npm install @boobalan_jkkn/[email protected]

✅ No breaking changes! Fully backward compatible.

New Features:

File attachments automatically available in bug widget
Enhanced MyBugsPanel with new features
LeaderboardPanel component ready to use

Migration Steps:

Update package version
(Optional) Add LeaderboardPanel to your dashboard
Enjoy enhanced bug viewing experience

From v1.0.x or v1.1.0

npm install @boobalan_jkkn/bug-reporter-sdk@latest

All features work automatically - no configuration changes needed!

🐛 Troubleshooting

Issue: File Upload Fails

Symptoms:

Error message when selecting files
Files not appearing in bug report

Solutions:

Check File Size: Max 10MB per file
Check File Type: Only images, PDFs, text files, CSV, JSON allowed
Check File Count: Max 5 files per report
Browser Compatibility: Use modern browsers

Issue: Leaderboard Not Showing

Symptoms:

"Leaderboard is disabled" message
No leaderboard data

Solutions:

Check Configuration: Verify leaderboard is enabled in organization settings
Check Application ID: Ensure correct applicationId prop
Check API Key: Verify API key has access to application
Check Network: Open browser DevTools to see API errors

Issue: Screenshot Not Capturing

Symptoms:

Widget doesn't open after clicking button
Error: "Failed to capture screenshot. Please try again."

Solutions:

Check CORS: Ensure all external images/resources have CORS enabled
Browser Compatibility: Use modern browsers (Chrome, Edge, Firefox, Safari)
Canvas Tainted: Check for cross-origin images without crossOrigin="anonymous"
Try Again: Close any overlays/modals and retry

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit changes: git commit -m 'Add amazing feature'
Push to branch: git push origin feature/amazing-feature
Open a pull request

📞 Support

GitHub Issues: Report a bug
Email: [email protected]
Documentation: https://your-platform-url.com/docs

📜 License

🔗 Links

npm Package: https://www.npmjs.com/package/@boobalan_jkkn/bug-reporter-sdk
GitHub Repository: https://github.com/boobalan-jkkn/centralized-bug-reporter
Bug Reporter Platform: https://your-platform.vercel.app

Made with ❤️ by JKKN Team

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@boobalan_jkkn/bug-reporter-sdk

🚀 Features

📦 Installation

🔧 Quick Start

1. Get Your API Key

2. Wrap Your App with BugReporterProvider

3. Set Environment Variables

4. Test It!

🆕 What's New in v1.3.0

📎 File Attachments

🔍 Enhanced Bug Viewing (MyBugsPanel)

🏆 Leaderboard System (NEW)

📚 API Reference

BugReporterProvider Props

MyBugsPanel Component

LeaderboardPanel Component (NEW in v1.3.0)

📖 Usage Examples

Basic Setup (Minimal)

With User Context

Complete Dashboard with All Components

Disable in Production

🎯 How It Works

Step 1: User Encounters a Bug

Step 2: Screenshot Capture (Automatic)

Step 3: User Fills Form

Step 4: Console Logs & Network Trace (Automatic)

Step 5: Submit Bug Report

🔐 Security

📊 Performance

🌐 Browser Support

📄 Changelog

v1.3.0 (2026-01-02)

v1.2.0 (2026-01-02)

v1.1.0 (2025-01-14)

v1.0.7 (2025-01-10)

v1.0.0 (2025-01-04)

🔄 Updating from Previous Versions

From v1.2.0 to v1.3.0

From v1.0.x or v1.1.0

🐛 Troubleshooting

Issue: File Upload Fails

Issue: Leaderboard Not Showing

Issue: Screenshot Not Capturing

🤝 Contributing

📞 Support

📜 License

🔗 Links