{"id":31018672,"url":"https://github.com/lennetech/bug.lt","last_synced_at":"2026-01-20T16:28:46.531Z","repository":{"id":313310653,"uuid":"1050904585","full_name":"lenneTech/bug.lt","owner":"lenneTech","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-05T08:28:37.000Z","size":961,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-05T08:30:49.529Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lenneTech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-05T06:06:17.000Z","updated_at":"2025-09-05T08:28:39.000Z","dependencies_parsed_at":"2025-09-05T08:30:59.941Z","dependency_job_id":"3034a93f-679d-411e-b11b-5bb09305b859","html_url":"https://github.com/lenneTech/bug.lt","commit_stats":null,"previous_names":["lennetech/bug.lt"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/lenneTech/bug.lt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenneTech%2Fbug.lt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenneTech%2Fbug.lt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenneTech%2Fbug.lt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenneTech%2Fbug.lt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lenneTech","download_url":"https://codeload.github.com/lenneTech/bug.lt/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenneTech%2Fbug.lt/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274936159,"owners_count":25376891,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-13T02:00:10.085Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-13T08:21:19.039Z","updated_at":"2026-01-20T16:28:46.525Z","avatar_url":"https://github.com/lenneTech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"src/runtime/assets/logo.png\" alt=\"Bug LT Logo\" height=\"300\"\u003e\n\u003c/p\u003e\n\n# @lenne.tech/bug.lt\n\nEin Nuxt 4 Modul für Bug-Reporting mit Linear Integration, Screenshots und automatischer Label-Verwaltung.\n\n## Features\n\n- 🐛 **Bug Report Button** - Konfigurierbarer Button in der Ecke des Bildschirms\n- 📸 **Client-Side Screenshots** - Schnelle DOM-Screenshots mit `modern-screenshot` (kein Chrome/Puppeteer nötig)\n- 🚶 **User Journey Tracking** - Automatische Erfassung von Benutzerinteraktionen (Klicks, Navigation, Formulare)\n- 🌐 **Network Requests** - Erfassung aller Netzwerkanfragen mit Status und Fehlerdetails\n- 🏷️ **Automatische Label-Verwaltung** - Erstellt und verwaltet Labels basierend auf Bug-Type automatisch\n- 🎯 **Linear Integration** - Direkte Erstellung von Issues in Linear mit Team/Project-Resolution\n- 📱 **Browser-Informationen** - Automatische Erfassung von Browser-, OS- und Performance-Daten\n- 📝 **Console Logs** - Erfassung und Anhang von Console-Ausgaben (CSS-Styles werden bereinigt)\n- ⚠️ **Error Boundary** - Automatische Fehlererfassung bei JavaScript-Exceptions\n- 🌓 **Theme Support** - Dark/Light Theme mit modernen OKLCH Farben\n- 🔒 **Server-Side Sicherheit** - API-Keys werden nur server-seitig verwendet\n- 🇩🇪 **Deutsche Lokalisierung** - Vollständig deutsche Benutzeroberfläche\n\n## Installation\n\n```bash\nnpm install @lenne.tech/bug.lt\n```\n\n## Setup\n\n### 1. Nuxt Konfiguration\n\nFüge das Modul zu deiner `nuxt.config.ts` hinzu:\n\n```typescript\nexport default defineNuxtConfig({\n  modules: [\n    '@lenne.tech/bug.lt'\n    // @nuxt/ui wird automatisch hinzugefügt\n  ],\n  bug: {\n    // Module Control\n    enabled: true, // false deaktiviert das komplette Modul\n    ui: true, // false deaktiviert @nuxt/ui Installation\n\n    // Linear Integration\n    linearApiKey: process.env.LINEAR_API_KEY,\n    linearTeamName: 'Entwicklung', // Team-Name oder Key\n    linearProjectName: 'Website', // Projekt-Name (optional)\n\n    // UI Konfiguration\n    autoShow: true,\n    position: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'\n    buttonColor: '#ef4444',\n\n    // Features\n    enableScreenshot: true,\n    enableBrowserInfo: true,\n    enableConsoleLogs: true,\n    enableNetworkRequests: true,\n    enableUserJourney: true,\n    enableErrorBoundary: true,\n    autoOpenOnError: false, // Modal automatisch öffnen bei JS-Fehlern\n\n    // Styling\n    theme: 'auto', // 'light' | 'dark' | 'auto'\n    maxConsoleLogs: 50,\n    maxNetworkRequests: 50,\n\n    // User Journey Konfiguration (optional)\n    userJourney: {\n      maxEvents: 50,\n      captureClicks: true,\n      captureNavigation: true,\n      captureFormInteractions: true,\n      captureKeyboard: true,\n      captureErrors: true,\n    }\n  }\n})\n```\n\n### 2. Umgebungsvariablen\n\nErstelle eine `.env` Datei:\n\n```bash\n# Linear API Konfiguration (erforderlich)\n# Hole dir deinen API Key aus Linear Settings -\u003e API\nLINEAR_API_KEY=lin_api_...\n\n# Linear Team Name oder Key (erforderlich)\nLINEAR_TEAM_NAME=Entwicklung\n\n# Linear Projekt Name (optional)\nLINEAR_PROJECT_NAME=Website\n```\n\n## Verwendung\n\n### Automatisch (empfohlen)\n\nDas Modul fügt automatisch einen Bug-Report-Button zu deiner Anwendung hinzu (wenn `autoShow: true`).\n\n### Programmatisch\n\n```vue\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cBugReportButton/\u003e\n    \u003c!-- oder --\u003e\n    \u003cbutton @click=\"openBugReport\"\u003e\n      Bug melden\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  const {openModal} = useBugReport()\n\n  const openBugReport = () =\u003e {\n    openModal()\n  }\n\u003c/script\u003e\n```\n\n## Features im Detail\n\n### Automatische Label-Verwaltung\n\nDas Modul erstellt automatisch Labels in Linear basierend auf dem Bug-Report-Type:\n\n- **Bug** → `bug` Label (rot)\n- **Feature** → `feature` Label (blau)\n- **Enhancement** → `enhancement` Label (grün)\n- **Other** → `other` Label (lila)\n\nFalls Labels nicht existieren, werden sie automatisch erstellt.\n\n### Screenshot-Funktionalität\n\n- **Client-seitige Erfassung** mit `modern-screenshot` (kein Server/Chrome nötig)\n- **Viewport-Screenshot** - Erfasst den aktuell sichtbaren Bereich inkl. Scroll-Position\n- **Automatische Anhang-Erstellung** in Linear Issues\n- **Theme-Erkennung** - Passt Hintergrundfarbe an Light/Dark Mode an\n\n### User Journey Tracking\n\n- **Klick-Tracking** - Erfasst alle Klicks mit Element-Informationen\n- **Navigation** - Protokolliert Seitenwechsel und URL-Änderungen\n- **Formular-Interaktionen** - Erfasst Fokus, Blur und Submit-Events\n- **Keyboard-Events** - Protokolliert wichtige Tastatureingaben\n- **Fehler-Tracking** - Erfasst JavaScript-Exceptions automatisch\n- **Timeline-Darstellung** - Übersichtliche Darstellung der letzten Aktionen\n\n### Network Requests\n\n- **Fetch \u0026 XHR** - Erfasst alle Netzwerkanfragen\n- **Status-Tracking** - Zeigt erfolgreiche und fehlgeschlagene Requests\n- **Error-Details** - Speichert Fehlerinformationen bei fehlgeschlagenen Requests\n- **Request-Body** - Erfasst gesendete Daten (ohne sensitive Inhalte)\n\n### Linear Integration\n\n- **Team-Resolution** - Verwendet Team-Namen statt UUIDs\n- **Projekt-Resolution** - Optionale Projekt-Zuordnung per Name\n- **Attachment-Upload** - Screenshots werden direkt als Anhänge verknüpft\n- **Strukturierte Issues** - Organisierte Darstellung aller Informationen\n\n### Browser-Informationen\n\nAutomatische Erfassung von:\n\n- Browser-Details (Name, Version, User-Agent)\n- Betriebssystem-Informationen\n- Viewport und Screen-Größe\n- Performance-Metriken\n- Sprach- und Timezone-Einstellungen\n\n## API\n\n### Composable: `useBugReport()`\n\n```typescript\nconst {\n  openModal,           // () =\u003e Promise\u003cvoid\u003e\n  submitBugReport,     // (data: BugReportData) =\u003e Promise\u003cvoid\u003e\n  isSubmitting,        // Ref\u003cboolean\u003e\n  error,              // Ref\u003cstring | null\u003e\n  previewScreenshot,  // Ref\u003cstring | null\u003e\n  capturingScreenshot // Ref\u003cboolean\u003e\n} = useBugReport()\n```\n\n### Komponenten\n\n- `\u003cBugReportButton /\u003e` - Konfigurierbarer Bug-Report-Button\n- `\u003cBugReportModal /\u003e` - Modal-Dialog für Bug-Reports\n\n## Konfigurationsoptionen\n\n| Option                  | Typ       | Standard         | Beschreibung                          |\n|-------------------------|-----------|------------------|---------------------------------------|\n| `enabled`               | `boolean` | `true`           | Komplettes Modul aktivieren           |\n| `ui`                    | `boolean` | `true`           | @nuxt/ui Installation aktivieren      |\n| `linearApiKey`          | `string`  | -                | Linear API Key (erforderlich)         |\n| `linearTeamName`        | `string`  | -                | Linear Team Name oder Key             |\n| `linearProjectName`     | `string`  | -                | Linear Projekt Name (optional)        |\n| `autoShow`              | `boolean` | `true`           | Automatische Anzeige des Buttons      |\n| `position`              | `string`  | `'bottom-right'` | Button-Position                       |\n| `buttonColor`           | `string`  | `'#ef4444'`      | Button-Farbe                          |\n| `enableScreenshot`      | `boolean` | `true`           | Screenshot-Funktionalität             |\n| `enableBrowserInfo`     | `boolean` | `true`           | Browser-Info-Erfassung                |\n| `enableConsoleLogs`     | `boolean` | `true`           | Console-Log-Erfassung                 |\n| `enableNetworkRequests` | `boolean` | `true`           | Netzwerk-Request-Erfassung            |\n| `enableUserJourney`     | `boolean` | `true`           | User Journey Tracking                 |\n| `enableErrorBoundary`   | `boolean` | `true`           | Error Boundary Komponente             |\n| `autoOpenOnError`       | `boolean` | `false`          | Modal bei JS-Fehlern öffnen           |\n| `theme`                 | `string`  | `'auto'`         | Theme ('light', 'dark', 'auto')       |\n| `maxConsoleLogs`        | `number`  | `50`             | Maximale Anzahl Console-Logs          |\n| `maxNetworkRequests`    | `number`  | `50`             | Maximale Anzahl Network-Requests      |\n| `userJourney`           | `object`  | siehe unten      | User Journey Konfiguration            |\n\n### User Journey Optionen\n\n| Option                    | Typ       | Standard | Beschreibung                    |\n|---------------------------|-----------|----------|---------------------------------|\n| `enabled`                 | `boolean` | `true`   | User Journey aktivieren         |\n| `maxEvents`               | `number`  | `50`     | Maximale Anzahl Events          |\n| `captureClicks`           | `boolean` | `true`   | Klick-Events erfassen           |\n| `captureNavigation`       | `boolean` | `true`   | Navigation erfassen             |\n| `captureFormInteractions` | `boolean` | `true`   | Formular-Events erfassen        |\n| `captureKeyboard`         | `boolean` | `true`   | Keyboard-Events erfassen        |\n| `captureErrors`           | `boolean` | `true`   | Fehler erfassen                 |\n| `captureModalEvents`      | `boolean` | `true`   | Modal-Events erfassen           |\n| `throttleRate`            | `number`  | `100`    | Throttle-Rate in ms             |\n\n## Voraussetzungen\n\n- **Nuxt 4.0+**\n- **Linear API Key** mit write-Berechtigung\n\n## Entwicklung\n\n```bash\n# Dependencies installieren\nnpm install\n\n# Type Stubs generieren\nnpm run dev:prepare\n\n# Entwicklung mit Playground\nnpm run dev\n\n# Build\nnpm run build\n\n# Tests\nnpm run test\n\n# Linting\nnpm run lint\n```\n\n## Lizenz\n\nMIT License - siehe [LICENSE](./LICENSE) Datei für Details.\n\n---\n\nEntwickelt von [lenne.Tech](https://lenne.tech) für effizientes Bug-Reporting in Nuxt-Anwendungen.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flennetech%2Fbug.lt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flennetech%2Fbug.lt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flennetech%2Fbug.lt/lists"}