@lenne.tech/bug.lt

Ein Nuxt 4 Modul für Bug-Reporting mit Linear Integration, Screenshots und automatischer Label-Verwaltung.

Features

- 🐛 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

Installation

``bash
npm install @lenne.tech/bug.lt
`

Setup

$3

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,
}
}
})
`

$3

Erstelle eine .env Datei:

`bash


Linear API Konfiguration (erforderlich)

Hole dir deinen API Key aus Linear Settings -> API

LINEAR_API_KEY=lin_api_...

Linear Team Name oder Key (erforderlich)

LINEAR_TEAM_NAME=Entwicklung

Linear Projekt Name (optional)

LINEAR_PROJECT_NAME=Website
`

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-Reports

Konfigurationsoptionen

| 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 install

Type Stubs generieren

npm run dev:prepare

Entwicklung mit Playground

npm run dev

Build

npm run build

Tests

npm run test

Linting

npm run lint
``

Lizenz

MIT License - siehe LICENSE Datei für Details.

---

Entwickelt von lenne.Tech für effizientes Bug-Reporting in Nuxt-Anwendungen.