From 78116329d43969fa2787f79c756052e8e233968f Mon Sep 17 00:00:00 2001
From: Matt Raymer <matthew.raymer@anomalistdesign.com>
Date: Fri, 25 Apr 2025 04:32:35 -0400
Subject: [PATCH] feat(qr-scanner): Add detailed logging for QR code scanning
 process

- Add browser capability detection logging (userAgent, mediaDevices, getUserMedia)
- Add detailed error logging with stack traces and error names
- Add new event handlers for detect and error events
- Add logging for key scanning events (init, detect, decode, close)
- Improve error handling with structured error objects

This change will help diagnose QR code registration issues by providing
more detailed information about the scanning process and any errors that occur.
---
 src/components/QRScanner/QRScannerDialog.vue | 47 +++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/QRScanner/QRScannerDialog.vue b/src/components/QRScanner/QRScannerDialog.vue
index 981f4ca6..ed9818ab 100644
--- a/src/components/QRScanner/QRScannerDialog.vue
+++ b/src/components/QRScanner/QRScannerDialog.vue
@@ -41,6 +41,8 @@
             :camera="options?.camera === 'front' ? 'user' : 'environment'"
             @decode="onDecode"
             @init="onInit"
+            @detect="onDetect"
+            @error="onError"
           />
           <div
             class="absolute inset-0 border-2 border-blue-500 opacity-50 pointer-events-none"
@@ -112,6 +114,9 @@ export default class QRScannerDialog extends Vue {
       platform: Capacitor.getPlatform(),
       useQRReader: this.useQRReader,
       isNativePlatform: this.isNativePlatform,
+      userAgent: navigator.userAgent,
+      mediaDevices: !!navigator.mediaDevices,
+      getUserMedia: !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia),
     });
 
     // If on native platform, close immediately and don't initialize web scanner
@@ -128,9 +133,11 @@ export default class QRScannerDialog extends Vue {
       return;
     }
 
+    logger.log("Initializing QR scanner...");
     try {
       await promise;
       this.error = null;
+      logger.log("QR scanner initialized successfully");
     } catch (error) {
       const wrappedError =
         error instanceof Error ? error : new Error(String(error));
@@ -138,11 +145,30 @@ export default class QRScannerDialog extends Vue {
       if (this.onError) {
         this.onError(wrappedError);
       }
-      logger.error("Error initializing QR scanner:", wrappedError);
+      logger.error("Error initializing QR scanner:", {
+        error: wrappedError.message,
+        stack: wrappedError.stack,
+        name: wrappedError.name,
+      });
     }
   }
 
+  onDetect(promise: Promise<any>): void {
+    logger.log("QR code detected, processing...");
+    promise
+      .then((result) => {
+        logger.log("QR code processed successfully:", result);
+      })
+      .catch((error) => {
+        logger.error("Error processing QR code:", {
+          error: error instanceof Error ? error.message : String(error),
+          stack: error instanceof Error ? error.stack : undefined,
+        });
+      });
+  }
+
   onDecode(result: string): void {
+    logger.log("QR code decoded:", result);
     try {
       this.onScan(result);
       this.close();
@@ -153,11 +179,28 @@ export default class QRScannerDialog extends Vue {
       if (this.onError) {
         this.onError(wrappedError);
       }
-      logger.error("Error handling QR scan result:", wrappedError);
+      logger.error("Error handling QR scan result:", {
+        error: wrappedError.message,
+        stack: wrappedError.stack,
+        name: wrappedError.name,
+      });
+    }
+  }
+
+  onError(error: Error): void {
+    logger.error("QR scanner error:", {
+      error: error.message,
+      stack: error.stack,
+      name: error.name,
+    });
+    this.error = error.message;
+    if (this.onError) {
+      this.onError(error);
     }
   }
 
   async close(): Promise<void> {
+    logger.log("Closing QR scanner dialog");
     this.visible = false;
     await this.$nextTick();
     if (this.$el && this.$el.parentNode) {