Fejlrapporter inde fra din app — med beviserne vedhæftet.

Installation og brug

npm install bugbottle
npm install html-to-image   # valgfrit, kun hvis du vil have screenshots

Uden npm: npm install github:mahope/bugbottle#v0.4.0, eller importér de byggede filer fra jsDelivr — dist/ er committet netop til det.

1. Optag console errors, byg så en formular (React)

import { initConsoleBuffer } from "bugbottle";
import { useBugReport } from "bugbottle/react";
import { htmlToImage } from "bugbottle/html-to-image"; // valgfrit

initConsoleBuffer(); // én gang, så tidligt som muligt

function ReportForm() {
  const report = useBugReport({
    endpoint: "/api/feedback",
    screenshot: htmlToImage, // udelad for at slå screenshots fra
  });
  return (
    <form data-bugbottle onSubmit={(e) => { e.preventDefault(); void report.submit(); }}>
      {report.types.map((t) => (
        <button key={t} type="button" onClick={() => report.setType(t)}>{t}</button>
      ))}
      <textarea value={report.message} onChange={(e) => report.setMessage(e.target.value)} />
      <button type="submit" disabled={report.status === "sending"}>Send</button>
    </form>
  );
}

2. Alle andre steder: tre funktioner

import { captureScreenshot, pickElement, buildReport, sendReport } from "bugbottle";
import { htmlToImage } from "bugbottle/html-to-image";

const screenshot = await captureScreenshot(htmlToImage); // PNG data URL
const element = await pickElement();                     // null hvis brugeren trykkede Escape
const report = buildReport({ type: "bug", message, screenshotDataUrl: screenshot, elements: element ? [element] : [] });
const { id } = await sendReport("/api/feedback", report);

Vil du helst ikke bygge en formular? bugbottle/ui monterer en flydende knap og en lille dialog i en shadow root, og dist/bugbottle.js gør det samme fra ét <script>-tag med attributterne data-endpoint, data-locale og data-brand.

3. Modtag den på serveren

import {
  decodeScreenshotDataUrl, InvalidScreenshotError, isReportType,
  normaliseConsole, normaliseContext, normaliseElements, normaliseMessage,
} from "bugbottle/server";

export async function POST(req: Request) {
  const payload = await req.json();
  const message = normaliseMessage(payload.message);
  if (!message) return Response.json({ error: "Skriv en besked først" }, { status: 400 });
  const type = isReportType(payload.type) ? payload.type : "other";
  const context = normaliseContext(payload.context);
  const console = normaliseConsole(payload.console);
  const elements = normaliseElements(payload.elements);
  let screenshot: Uint8Array | null = null;
  try {
    if (payload.screenshotDataUrl) screenshot = decodeScreenshotDataUrl(payload.screenshotDataUrl);
  } catch (err) {
    if (!(err instanceof InvalidScreenshotError)) throw err; // et dårligt billede må ikke fejle rapporten
  }
  const { id } = await save({ type, message, context, console, elements, screenshot });
  return Response.json({ id }, { status: 201 });
}

Virker uændret i en Next.js route handler, Hono, Cloudflare Workers, Bun, Deno eller alt andet bygget på web-Request. Hjælperne beholder de seneste 50 console-linjer og verificerer den rigtige PNG-signatur, før et screenshot når dit lager. Fuld API i README (engelsk).

Bundle-størrelser

• Kerne (buildReport, sendReport, console buffer)~0,8 kB gzip
• Kerne + element picker + React hook3,9 kB gzip
• Færdigt panel (bugbottle/ui)6,9 kB gzip
• Ét script tag (dist/bugbottle.js)11,6 kB gzip