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