A comprehensive Nuxt 4 module for bug reporting with Linear integration, screenshot capture, and detailed system information collection
npm install @lenne.tech/bug.lt

Ein Nuxt 4 Modul für Bug-Reporting mit Linear Integration, Screenshots und automatischer Label-Verwaltung.
- 🐛 Bug Report Button - Konfigurierbarer Button in der Ecke des Bildschirms
- 📸 Client-Side Screenshots - Schnelle DOM-Screenshots mit modern-screenshot (kein Chrome/Puppeteer nötig)
- 🚶 User Journey Tracking - Automatische Erfassung von Benutzerinteraktionen (Klicks, Navigation, Formulare)
- 🌐 Network Requests - Erfassung aller Netzwerkanfragen mit Status und Fehlerdetails
- 🏷️ Automatische Label-Verwaltung - Erstellt und verwaltet Labels basierend auf Bug-Type automatisch
- 🎯 Linear Integration - Direkte Erstellung von Issues in Linear mit Team/Project-Resolution
- 📱 Browser-Informationen - Automatische Erfassung von Browser-, OS- und Performance-Daten
- 📝 Console Logs - Erfassung und Anhang von Console-Ausgaben (CSS-Styles werden bereinigt)
- ⚠️ Error Boundary - Automatische Fehlererfassung bei JavaScript-Exceptions
- 🌓 Theme Support - Dark/Light Theme mit modernen OKLCH Farben
- 🔒 Server-Side Sicherheit - API-Keys werden nur server-seitig verwendet
- 🇩🇪 Deutsche Lokalisierung - Vollständig deutsche Benutzeroberfläche
``bash`
npm install @lenne.tech/bug.lt
Füge das Modul zu deiner nuxt.config.ts hinzu:
`typescript
export default defineNuxtConfig({
modules: [
'@lenne.tech/bug.lt'
// @nuxt/ui wird automatisch hinzugefügt
],
bug: {
// Module Control
enabled: true, // false deaktiviert das komplette Modul
ui: true, // false deaktiviert @nuxt/ui Installation
// Linear Integration
linearApiKey: process.env.LINEAR_API_KEY,
linearTeamName: 'Entwicklung', // Team-Name oder Key
linearProjectName: 'Website', // Projekt-Name (optional)
// UI Konfiguration
autoShow: true,
position: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
buttonColor: '#ef4444',
// Features
enableScreenshot: true,
enableBrowserInfo: true,
enableConsoleLogs: true,
enableNetworkRequests: true,
enableUserJourney: true,
enableErrorBoundary: true,
autoOpenOnError: false, // Modal automatisch öffnen bei JS-Fehlern
// Styling
theme: 'auto', // 'light' | 'dark' | 'auto'
maxConsoleLogs: 50,
maxNetworkRequests: 50,
// User Journey Konfiguration (optional)
userJourney: {
maxEvents: 50,
captureClicks: true,
captureNavigation: true,
captureFormInteractions: true,
captureKeyboard: true,
captureErrors: true,
}
}
})
`
Erstelle eine .env Datei:
`bashLinear API Konfiguration (erforderlich)
Hole dir deinen API Key aus Linear Settings -> API
LINEAR_API_KEY=lin_api_...
Verwendung
$3
Das Modul fügt automatisch einen Bug-Report-Button zu deiner Anwendung hinzu (wenn
autoShow: true).$3
`vue
`Features im Detail
$3
Das Modul erstellt automatisch Labels in Linear basierend auf dem Bug-Report-Type:
- Bug →
bug Label (rot)
- Feature → feature Label (blau)
- Enhancement → enhancement Label (grün)
- Other → other Label (lila)Falls Labels nicht existieren, werden sie automatisch erstellt.
$3
- Client-seitige Erfassung mit
modern-screenshot (kein Server/Chrome nötig)
- Viewport-Screenshot - Erfasst den aktuell sichtbaren Bereich inkl. Scroll-Position
- Automatische Anhang-Erstellung in Linear Issues
- Theme-Erkennung - Passt Hintergrundfarbe an Light/Dark Mode an$3
- Klick-Tracking - Erfasst alle Klicks mit Element-Informationen
- Navigation - Protokolliert Seitenwechsel und URL-Änderungen
- Formular-Interaktionen - Erfasst Fokus, Blur und Submit-Events
- Keyboard-Events - Protokolliert wichtige Tastatureingaben
- Fehler-Tracking - Erfasst JavaScript-Exceptions automatisch
- Timeline-Darstellung - Übersichtliche Darstellung der letzten Aktionen
$3
- Fetch & XHR - Erfasst alle Netzwerkanfragen
- Status-Tracking - Zeigt erfolgreiche und fehlgeschlagene Requests
- Error-Details - Speichert Fehlerinformationen bei fehlgeschlagenen Requests
- Request-Body - Erfasst gesendete Daten (ohne sensitive Inhalte)
$3
- Team-Resolution - Verwendet Team-Namen statt UUIDs
- Projekt-Resolution - Optionale Projekt-Zuordnung per Name
- Attachment-Upload - Screenshots werden direkt als Anhänge verknüpft
- Strukturierte Issues - Organisierte Darstellung aller Informationen
$3
Automatische Erfassung von:
- Browser-Details (Name, Version, User-Agent)
- Betriebssystem-Informationen
- Viewport und Screen-Größe
- Performance-Metriken
- Sprach- und Timezone-Einstellungen
API
$3
`typescript
const {
openModal, // () => Promise
submitBugReport, // (data: BugReportData) => Promise
isSubmitting, // Ref
error, // Ref
previewScreenshot, // Ref
capturingScreenshot // Ref
} = useBugReport()
`$3
-
- Konfigurierbarer Bug-Report-Button
- - Modal-Dialog für Bug-ReportsKonfigurationsoptionen
| Option | Typ | Standard | Beschreibung |
|-------------------------|-----------|------------------|---------------------------------------|
|
enabled | boolean | true | Komplettes Modul aktivieren |
| ui | boolean | true | @nuxt/ui Installation aktivieren |
| linearApiKey | string | - | Linear API Key (erforderlich) |
| linearTeamName | string | - | Linear Team Name oder Key |
| linearProjectName | string | - | Linear Projekt Name (optional) |
| autoShow | boolean | true | Automatische Anzeige des Buttons |
| position | string | 'bottom-right' | Button-Position |
| buttonColor | string | '#ef4444' | Button-Farbe |
| enableScreenshot | boolean | true | Screenshot-Funktionalität |
| enableBrowserInfo | boolean | true | Browser-Info-Erfassung |
| enableConsoleLogs | boolean | true | Console-Log-Erfassung |
| enableNetworkRequests | boolean | true | Netzwerk-Request-Erfassung |
| enableUserJourney | boolean | true | User Journey Tracking |
| enableErrorBoundary | boolean | true | Error Boundary Komponente |
| autoOpenOnError | boolean | false | Modal bei JS-Fehlern öffnen |
| theme | string | 'auto' | Theme ('light', 'dark', 'auto') |
| maxConsoleLogs | number | 50 | Maximale Anzahl Console-Logs |
| maxNetworkRequests | number | 50 | Maximale Anzahl Network-Requests |
| userJourney | object | siehe unten | User Journey Konfiguration |$3
| Option | Typ | Standard | Beschreibung |
|---------------------------|-----------|----------|---------------------------------|
|
enabled | boolean | true | User Journey aktivieren |
| maxEvents | number | 50 | Maximale Anzahl Events |
| captureClicks | boolean | true | Klick-Events erfassen |
| captureNavigation | boolean | true | Navigation erfassen |
| captureFormInteractions | boolean | true | Formular-Events erfassen |
| captureKeyboard | boolean | true | Keyboard-Events erfassen |
| captureErrors | boolean | true | Fehler erfassen |
| captureModalEvents | boolean | true | Modal-Events erfassen |
| throttleRate | number | 100 | Throttle-Rate in ms |Voraussetzungen
- Nuxt 4.0+
- Linear API Key mit write-Berechtigung
Entwicklung
`bash
Dependencies installieren
npm installType Stubs generieren
npm run dev:prepareEntwicklung mit Playground
npm run devBuild
npm run buildTests
npm run testLinting
npm run lint
``MIT License - siehe LICENSE Datei für Details.
---
Entwickelt von lenne.Tech für effizientes Bug-Reporting in Nuxt-Anwendungen.