Bug Reporter Widget

A lightweight, embeddable bug reporting widget for React apps. It renders a floating button that opens a modal for reporting bugs with a rich-text description, inline image paste, and severity selection.

Default API base URL:

• https://bug-tracker-ja7j.onrender.com

Features

• Floating button + modal UI
• Rich-text editor with image paste/upload (stored as base64 HTML)
• Required fields: title, description, severity
• Works with any REST API endpoint
• TypeScript strict mode types

Installation

npm install @janpelepeeps/bug-reporter-widget
# or
pnpm add @janpelepeeps/bug-reporter-widget
# or
yarn add @janpelepeeps/bug-reporter-widget

Tailwind Requirement

This package uses Tailwind utility classes (shadcn-style). Your host app must have Tailwind configured.

Make sure your Tailwind content includes the package so classes are not purged:

// tailwind.config.ts
export default {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@janpelepeeps/bug-reporter-widget/dist/**/*.{js,ts,tsx}',
  ],
  theme: { extend: {} },
  plugins: [],
}

Basic Usage

import { BugReporter } from '@janpelepeeps/bug-reporter-widget'

export default function App() {
  return (
    <>
      <MainApp />
      <BugReporter />
    </>
  )
}

By default, the widget posts to POST /api/bugs/ on https://bug-tracker-ja7j.onrender.com.

Custom Endpoint

<BugReporter apiBaseUrl="https://your-api.com" endpoint="/api/v1/bugs/" />

Custom Submit Handler

<BugReporter
  onSubmit={async (payload) => {
    await fetch('https://your-api.com/api/bugs/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    })
  }}
/>

Props

BugReporter

• apiBaseUrl?: string Base URL for your API.
• endpoint?: string Endpoint path (defaults to /api/bugs/).
• onSubmit?: (payload) => Promise<void> Override submission.
• className?: string Optional wrapper class.

Payload Shape

interface BugReportPayload {
  title: string
  description: string // HTML string (rich text with embedded images)
  severity: 'low' | 'medium' | 'high' | 'critical'
}

Build (for local development)

pnpm install
pnpm build

Publish

npm login
npm publish --access public

Notes

• Images pasted into the editor are embedded as base64 in the HTML string.
• For security, sanitize HTML on the server if you plan to render it.