GitHub Projekt

Bug Report Widget v2

Strukturierte Fehlerberichte mit annotiertem Screenshot, Ist/Soll-Beschreibung und HTML-Dashboard — direkt aus dem Browser.

🧪 Ausprobieren

Teste das Widget auf der NeonStore Demo-Seite →

Oder nutze die Buttons unten, fülle das Formular aus, scrolle die Seite. Wenn du bereit bist, klicke auf den 🐛 Button unten rechts.

📝 Demo-Formular

Formularwerte werden niemals erfasst — nur die Tatsache, dass ein Change- oder Submit-Event stattfand.

📦 Was wird erfasst?

📸
Annotierter Screenshot
DOM-Geometrie wird auf Canvas gerendert, Klick-Pfad als nummerierte Kreise annotiert
📝
Ist / Soll
Benutzer beschreibt aktuelles und erwartetes Verhalten vor der Report-Erstellung
📄
HTML Dashboard
Standalone HTML-Datei mit eingebetteten Daten, Screenshot und aufklappbaren Sektionen
👆
Interaktionen
Klicks (mit X/Y-Koordinaten), Scrolls, Tastatureingaben, Formular-Events, Navigation
📋
Console Logs
log, warn, error, info, debug — max. 100 Einträge
⚠️
JS Errors
Runtime-Fehler und unbehandelte Promise-Rejections mit Stack Trace
🌐
Network Requests
fetch() und XMLHttpRequest — Methode, URL, Status, Dauer
🔒
Datenschutz
E-Mails, Tokens, Passwörter, API-Keys, Telefonnummern werden automatisch maskiert
🚫
Nicht erfasst
Keine Formularwerte, keine getippten Zeichen, keine Mausbewegungen, keine nativen Screenshots/Videos

Integration

Ein einziges Script-Tag genügt:

<script src="bug-report.js"></script>

Der 🐛 Button und das Modal werden automatisch eingeblendet. Keine weiteren Abhängigkeiten.