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

@@ -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) {