feat: Implement user journey tracking and bug reporting enhancements

- Add UserJourneyTimeline component for visualizing user interactions.
- Enhance useBugReport composable to include user journey data.
- Integrate network request monitoring with detailed logging.
- Introduce error boundary handling with automatic bug report modal opening.
- Expand types to support user interactions and network requests.
- Implement user interaction tracking with various event types (clicks, navigation, form submissions, etc.).
- Add utility functions for managing network requests and user interactions.
- Update bug report submission to include user journey and network request data.

Author: Pascal Klesse

package-lock.json

@@ -57,30 +57,30 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxt/kit": "4.1.3",
-    "@nuxt/ui": "4.0.1",
-    "puppeteer": "24.23.0",
-    "zod": "4.1.12"
+    "@nuxt/kit": "4.2.1",
+    "@nuxt/ui": "4.2.1",
+    "puppeteer": "24.31.0",
+    "zod": "4.1.13"
   },
   "devDependencies": {
-    "@nuxt/devtools": "2.6.5",
-    "@nuxt/eslint-config": "1.9.0",
+    "@nuxt/devtools": "3.1.0",
+    "@nuxt/eslint-config": "1.10.0",
     "@nuxt/module-builder": "1.0.2",
-    "@nuxt/schema": "4.1.3",
-    "@nuxt/test-utils": "3.19.2",
+    "@nuxt/schema": "4.2.1",
+    "@nuxt/test-utils": "3.20.1",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/github": "11.0.6",
-    "@semantic-release/npm": "12.0.2",
+    "@semantic-release/github": "12.0.2",
+    "@semantic-release/npm": "13.1.2",
     "@types/node": "latest",
     "changelogen": "0.6.2",
     "conventional-changelog-conventionalcommits": "9.1.0",
-    "eslint": "9.37.0",
-    "happy-dom": "18.0.1",
-    "nuxt": "4.1.3",
-    "semantic-release": "24.2.9",
-    "typescript": "~5.9.3",
+    "eslint": "9.39.1",
+    "happy-dom": "20.0.10",
+    "nuxt": "4.2.1",
+    "semantic-release": "^25.0.2",
+    "typescript": "5.9.3",
     "vitest": "3.2.4",
-    "vue-tsc": "3.1.1"
+    "vue-tsc": "3.1.5"
   }
-}
+}

package.json

@@ -38,13 +38,37 @@ export interface ModuleOptions {
   enableScreenshot?: boolean
   enableBrowserInfo?: boolean
   enableConsoleLogs?: boolean
+  enableNetworkRequests?: boolean
+  enableErrorBoundary?: boolean
+  enableUserJourney?: boolean
+  autoOpenOnError?: boolean
 
   // Styling
   theme?: 'light' | 'dark' | 'auto'
 
   // Console Logs
   maxConsoleLogs?: number
 
+  // Network Requests
+  maxNetworkRequests?: number
+
+  // User Journey Tracking
+  userJourney?: {
+    enabled?: boolean
+    maxEvents?: number
+    captureClicks?: boolean
+    captureNavigation?: boolean
+    captureFormInteractions?: boolean
+    captureHover?: boolean
+    captureScroll?: boolean
+    captureInputChanges?: boolean
+    captureInputValues?: boolean
+    captureKeyboard?: boolean
+    captureErrors?: boolean
+    captureModalEvents?: boolean
+    throttleRate?: number
+  }
+
   // HTTP Basic Authentication
   httpAuth?: {
     username: string
@@ -70,8 +94,28 @@ export default defineNuxtModule<ModuleOptions>({
     enableScreenshot: true,
     enableBrowserInfo: true,
     enableConsoleLogs: true,
+    enableNetworkRequests: true,
+    enableErrorBoundary: true,
+    enableUserJourney: true,
+    autoOpenOnError: false,
     theme: 'auto',
     maxConsoleLogs: 50,
+    maxNetworkRequests: 50,
+    userJourney: {
+      enabled: true,
+      maxEvents: 50,
+      captureClicks: true,
+      captureNavigation: true,
+      captureFormInteractions: true,
+      captureHover: true,
+      captureScroll: true,
+      captureInputChanges: true,
+      captureInputValues: false,
+      captureKeyboard: true,
+      captureErrors: true,
+      captureModalEvents: true,
+      throttleRate: 100,
+    },
   },
   async setup(options, nuxt) {
     // Early exit if module is disabled
@@ -106,8 +150,14 @@ export default defineNuxtModule<ModuleOptions>({
       enableScreenshot: options.enableScreenshot,
       enableBrowserInfo: options.enableBrowserInfo,
       enableConsoleLogs: options.enableConsoleLogs,
+      enableNetworkRequests: options.enableNetworkRequests,
+      enableErrorBoundary: options.enableErrorBoundary,
+      enableUserJourney: options.enableUserJourney,
+      autoOpenOnError: options.autoOpenOnError,
       theme: options.theme,
       maxConsoleLogs: options.maxConsoleLogs,
+      maxNetworkRequests: options.maxNetworkRequests,
+      userJourney: options.userJourney,
       // Don't expose sensitive data to client: linearApiKey, linearTeamName, linearProjectName, httpAuth
     }
 
@@ -141,6 +191,16 @@ export default defineNuxtModule<ModuleOptions>({
       filePath: resolver.resolve('./runtime/components/BugIcon.vue'),
     })
 
+    addComponent({
+      name: 'ErrorBoundary',
+      filePath: resolver.resolve('./runtime/components/ErrorBoundary.vue'),
+    })
+
+    addComponent({
+      name: 'UserJourneyTimeline',
+      filePath: resolver.resolve('./runtime/components/UserJourneyTimeline.vue'),
+    })
+
     // Add composables
     addImports({
       name: 'useBugReport',

src/module.ts

@@ -6,8 +6,10 @@ import type { AttachmentFile, BugReportConfig, BugReportData, BugReportType } fr
 import { captureScreenshot as captureScreenshotUtil } from '../utils/screenshot'
 import { getBrowserInfo } from '../utils/browserInfo'
 import { getConsoleLogs } from '../utils/consoleLogs'
+import { getNetworkRequests } from '../utils/networkRequests'
 import { useBugReport } from '../composables/useBugReport'
 import AttachmentsList from './AttachmentsList.vue'
+import UserJourneyTimeline from './UserJourneyTimeline.vue'
 
 interface Props {
   isSubmitting?: boolean
@@ -26,7 +28,7 @@ withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>()
 
 const runtimeConfig = useRuntimeConfig()
-const { previewScreenshot, capturingScreenshot } = useBugReport()
+const { previewScreenshot, capturingScreenshot, lastError, getUserJourney } = useBugReport()
 
 const config = computed((): BugReportConfig => runtimeConfig.public.bugLt as BugReportConfig)
 
@@ -46,6 +48,15 @@ const state = reactive({
   stepsToReproduce: '',
 })
 
+// Pre-fill form if error info is available
+watch(lastError, (errorInfo) => {
+  if (errorInfo) {
+    state.title = errorInfo.message.substring(0, 100)
+    state.type = 'bug'
+    state.description = `**Error Message:**\n${errorInfo.message}\n\n**Component:** ${errorInfo.componentName || 'Unknown'}\n\n**Stack Trace:**\n\`\`\`\n${errorInfo.stack || 'No stack trace available'}\n\`\`\``
+  }
+}, { immediate: true })
+
 const typeOptions = [
   { label: 'Bug', value: 'bug' },
   { label: 'Feature', value: 'feature' },
@@ -65,6 +76,10 @@ const attachments = ref<AttachmentFile[]>([])
 const localCapturingScreenshot = ref<boolean>(false)
 const includeBrowserInfo = ref<boolean>(true)
 const includeConsoleLogs = ref<boolean>(true)
+const includeNetworkRequests = ref<boolean>(true)
+const includeUserJourney = ref<boolean>(true)
+
+const userJourneyEvents = computed(() => getUserJourney())
 
 // Watch for pre-captured screenshot changes
 watch(previewScreenshot, (newScreenshot) => {
@@ -153,6 +168,14 @@ const onSubmit = async () => {
     data.consoleLogs = getConsoleLogs(config.value?.maxConsoleLogs)
   }
 
+  if (includeNetworkRequests.value && config.value?.enableNetworkRequests) {
+    data.networkRequests = getNetworkRequests(config.value?.maxNetworkRequests)
+  }
+
+  if (includeUserJourney.value && config.value?.enableUserJourney) {
+    data.userInteractions = getUserJourney()
+  }
+
   emit('submit', data)
 }
 </script>
@@ -311,10 +334,59 @@ const onSubmit = async () => {
               :disabled="isSubmitting"
             />
           </div>
+
+          <!-- Network Requests Toggle -->
+          <div
+            v-if="config?.enableNetworkRequests"
+            class="flex items-center justify-between"
+          >
+            <div>
+              <p class="text-sm font-medium text-gray-700 dark:text-gray-200">
+                Netzwerk-Anfragen auslesen
+              </p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                API-Calls und HTTP-Requests der letzten Minuten
+              </p>
+            </div>
+            <USwitch
+              v-model="includeNetworkRequests"
+              :disabled="isSubmitting"
+            />
+          </div>
+
+          <!-- User Journey Toggle -->
+          <div
+            v-if="config?.enableUserJourney"
+            class="flex items-center justify-between"
+          >
+            <div>
+              <p class="text-sm font-medium text-gray-700 dark:text-gray-200">
+                User Journey auslesen
+              </p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                Benutzer-Interaktionen und Navigation ({{ userJourneyEvents.length }} Events)
+              </p>
+            </div>
+            <USwitch
+              v-model="includeUserJourney"
+              :disabled="isSubmitting"
+            />
+          </div>
         </div>
       </template>
     </UAccordion>
 
+    <!-- User Journey Timeline Preview -->
+    <div
+      v-if="config?.enableUserJourney && includeUserJourney && userJourneyEvents.length > 0"
+      class="space-y-2"
+    >
+      <label class="text-sm font-medium text-gray-700 dark:text-gray-200">
+        User Journey Preview ({{ userJourneyEvents.length }} Events)
+      </label>
+      <UserJourneyTimeline :events="userJourneyEvents" />
+    </div>
+
     <!-- Action Buttons -->
     <div class="flex justify-end gap-3 pt-4">
       <UButton