Get started

Install bugbottle

Headless in-app bug reports that arrive with the evidence attached. Your UI, your endpoint, a few kilobytes.

Error trackers catch what throws. They cannot catch what merely looks wrong, and they never tell you what the person was doing when it did. "The save button does nothing" is not a report anyone can act on.

bugbottle collects the context at the moment someone notices — the page, the viewport, the recent console errors, the element they point at, optionally a picture of what they were looking at — and POSTs it as JSON to a route you already own.

npm install bugbottle
npm install html-to-image   # optional, only if you want screenshots

Without npm, install the tagged release straight from GitHub, or import the built files from the jsDelivr CDN — dist/ is committed for exactly that:

npm install github:mahope/bugbottle#v0.15.0

import { initConsoleBuffer, buildReport, sendReport } from "https://cdn.jsdelivr.net/gh/mahope/[email protected]/dist/index.js";

• Headless, in your framework. You render the form — with the React hook, the Vue composable, the Svelte store, the Solid accessors, or the three plain functions underneath them. The chrome around a feedback widget is exactly the part that differs between applications, so this owns the state, the capture and the submit — not your markup.
• Bring your own backend. There is no dashboard and no hosted service to sign up for. A report is a JSON body on a fetch; the receiving end is a route handler you write, with the validation helpers shipped alongside.
• Nothing in your bundle you did not ask for. Zero dependencies. The core is about 1.5 kB gzipped; with the element picker and the React, Vue, Svelte or Solid adapter, 5.7 kB; the optional ready-made panel, 11.6 kB; the picture annotator 1.4 kB on top of it, and only for the applications that ask for it; breadcrumbs 1.3 kB; the network log 1.2 kB; the timings and storage snapshot 1.2 kB; the offline queue 1.5 kB; shake-to-report 0.6 kB; the everything script tag, 24.6 kB, and the slim one 21.0 kB. html-to-image is only pulled in by the module that imports it, the annotator only by the panel you handed it to, and the scrubber only by the code that calls it.
• Sends itself onward. Email through Resend, a Slack, Discord or plain webhook, an issue in GitHub, GitLab, Jira or Linear, or an event in Sentry — eleven server-side sinks over one Markdown rendering, keys never in the browser.
• Your language, your brand. Eight bundled locales, every string overridable, and a panel themed with a handful of CSS variables.
• Server helpers included. Every field a browser sends is checked before it reaches your database, because that is where the sharp edges are.

What it is not #

Not a dashboard, not session replay, not a hosted service. If you want annotated issues filed in Jira by a vendor, look at Marker.io or Jam. If you want to record everything a user does, look at rrweb. bugbottle is the smallest thing that turns "it's broken" into a reproducible payload, and stays out of the way otherwise. The optional panel in bugbottle/ui is a convenience over the same core, not the product.

Edit this page on GitHub