bugbottle

In-app bug reports that arrive with the evidence attached: console errors, page context and an optional screenshot.

GitHub → mahope/bugbottle · MIT · zero dependencies

Try it live

This form is powered by the real library, loaded from the CDN on this very page. What you send is what your users would send you.

Reports received (this demo)

Loading…

What just got sent behind the scenes

A single JSON POST containing everything a developer needs to reproduce the problem — no follow-up questions:

{
  "type": "bug",
  "message": "The save button did nothing",
  "screenshotDataUrl": "data:image/png;base64,…",
  "console": [
    { "level": "error",
      "text": "TypeError: Cannot read
        properties of undefined…" },
    …up to 100 entries…
  ],
  "context": {
    "page": "/settings/billing",
    "viewport": "1440x900",
    "language": "en-GB"
  }
}

Console buffer — the last errors and warns, captured before the user even opened the form.
Screenshot — rendered from the DOM, capped at 2 MB, PNG-verified server-side.
Context — page URL, viewport, language.
Headless — you render the form; bugbottle owns state, capture and submit.
Server validators included — bugbottle/server rejects fake screenshots and oversize payloads before they reach your storage.

Add it to your app

No npm account needed — install straight from GitHub, or import from jsDelivr:

# from GitHub
npm install github:mahope/bugbottle#v0.2.4

# or from the CDN, no install at all
import { initConsoleBuffer } from
  "https://cdn.jsdelivr.net/gh/mahope/bugbottle@v0.2.4/dist/index.js";

import { useBugReport } from "bugbottle/react";

const report = useBugReport({ endpoint: "/api/feedback" });
// render your own form bound to report.message / report.submit()…

Full documentation on GitHub →