From cf3412b2355dd37b2df2abe721c8f94f733a6e86 Mon Sep 17 00:00:00 2001
From: LC mac <leochan@hkjin.com>
Date: Sat, 7 Feb 2026 13:46:02 +0800
Subject: [PATCH] fix(qr): resolve scanner race condition and crashes

This commit addresses several issues related to the QR code scanner:

- Fixes a build failure by defining stable handlers (`handleRestoreClose`, `handleRestoreError`) for the QRScanner component in `App.tsx` using `useCallback`.
- Resolves a race condition that caused an `AbortError` when the scanner was initialized, particularly in React Strict Mode. This was fixed by ensuring all props passed to the scanner are stable.
- Implements more robust error handling within the `QRScanner` component to prevent crashes when `null` or `undefined` errors are caught.
- Updates documentation (`README.md`, `GEMINI.md`) to version 1.4.5.
---
 GEMINI.md                    | 13 ++++++------
 README.md                    |  7 ++++++-
 src/App.tsx                  | 39 +++++++++++++++++++++---------------
 src/components/QRScanner.tsx | 34 ++++++++++++++++++++++---------
 4 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/GEMINI.md b/GEMINI.md
index 97ce844..357c5bb 100644
--- a/GEMINI.md
+++ b/GEMINI.md
@@ -2,7 +2,7 @@
 
 ## Project Overview
 
-**SeedPGP v1.4.4**: Client-side BIP39 mnemonic encryption webapp  
+**SeedPGP v1.4.5**: Client-side BIP39 mnemonic encryption webapp  
 **Stack**: Bun + Vite + React + TypeScript + OpenPGP.js + Tailwind CSS  
 **Deploy**: Cloudflare Pages (private repo: `seedpgp-web`)  
 **Live URL**: <https://seedpgp-web.pages.dev/>
@@ -300,13 +300,12 @@ await window.runSessionCryptoTest()
 
 ---
 
-## Current Version: v1.4.4
+## Current Version: v1.4.5
 
-**Recent Changes (v1.4.4):**
-- Enhanced security documentation with explicit threat model
-- Improved README with simple examples and best practices
-- Better air-gapped usage guidance for maximum security
-- Version bump with security audit improvements
+**Recent Changes (v1.4.5):**
+- Fixed QR Scanner bugs related to camera initialization and race conditions.
+- Improved error handling in the scanner to prevent crashes and provide better feedback.
+- Stabilized component props to prevent unnecessary re-renders and fix `AbortError`.
 
 **Known Limitations (Critical):**
 1. **Browser extensions** can read DOM, memory, keystrokes - use dedicated browser
diff --git a/README.md b/README.md
index 79da551..b970b94 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# SeedPGP v1.4.4
+# SeedPGP v1.4.5
 
 **Secure BIP39 mnemonic backup using PGP encryption and QR codes**
 
@@ -378,6 +378,11 @@ seedpgp-web/
 
 ## 🔄 Version History
 
+### v1.4.5 (2026-02-07)
+- ✅ **Fixed QR Scanner bugs** related to camera initialization and race conditions.
+- ✅ **Improved error handling** in the scanner to prevent crashes and provide better feedback.
+- ✅ **Stabilized component props** to prevent unnecessary re-renders and fix `AbortError`.
+
 ### v1.4.4 (2026-02-03)
 - ✅ **Enhanced security documentation** with explicit threat model
 - ✅ **Improved README** with simple examples and best practices
diff --git a/src/App.tsx b/src/App.tsx
index 83477d6..c963fd5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -403,14 +403,21 @@ function App() {
     setShowQRScanner(false);
   }, []);
 
-  const handleRestoreError = useCallback((error: string) => {
-    setError(error);
+  const handleRestoreError = useCallback((err: string) => {
+    setError(err);
+    setShowQRScanner(false);
   }, []);
 
 
 
 
 
+
+
+
+
+
+
   return (
     <div className="min-h-screen bg-slate-800 text-slate-100">
       <Header
@@ -517,7 +524,7 @@ function App() {
 
                   {privateKeyInput && (
                     <div className="space-y-2">
-                      <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Private Key Passphrase</label>
+                      <label className="text-xs font-bold text-slate-700 uppercase tracking-wider">Private Key Passphrase</label>
                       <div className="relative">
                         <Lock className="absolute left-3 top-3 text-slate-400" size={16} />
                         <input
@@ -555,18 +562,18 @@ function App() {
 
                   {/* Encryption Mode Toggle */}
                   <div className="space-y-2">
-                    <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Encryption Mode</label>
+                    <label className="text-xs font-bold text-slate-700 uppercase tracking-wider">Encryption Mode</label>
                     <select
                       value={encryptionMode}
                       onChange={(e) => setEncryptionMode(e.target.value as 'pgp' | 'krux' | 'seedqr')}
                       disabled={isReadOnly}
-                      className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all"
+                      className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all"
                     >
                       <option value="pgp">PGP (Asymmetric)</option>
                       <option value="krux">Krux KEF (Passphrase)</option>
                       <option value="seedqr">SeedQR (Unencrypted)</option>
                     </select>
-                    <p className="text-[10px] text-slate-500 mt-1">
+                    <p className="text-[10px] text-slate-800 mt-1">
                       {encryptionMode === 'pgp'
                         ? 'Uses PGP keys or password'
                         : 'Uses passphrase only (Krux compatible)'}
@@ -576,17 +583,17 @@ function App() {
                   {/* SeedQR Format Toggle */}
                   {encryptionMode === 'seedqr' && (
                     <div className="space-y-2 pt-2">
-                      <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">SeedQR Format</label>
+                      <label className="text-xs font-bold text-slate-700 uppercase tracking-wider">SeedQR Format</label>
                       <select
                         value={seedQrFormat}
                         onChange={(e) => setSeedQrFormat(e.target.value as 'standard' | 'compact')}
                         disabled={isReadOnly}
-                        className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all"
+                        className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all"
                       >
                         <option value="standard">Standard (Numeric)</option>
                         <option value="compact">Compact (Binary)</option>
                       </select>
-                      <p className="text-[10px] text-slate-500 mt-1">
+                      <p className="text-[10px] text-slate-800 mt-1">
                         {seedQrFormat === 'standard'
                           ? 'Numeric format, human-readable.'
                           : 'Compact binary format, smaller QR code.'}
@@ -598,7 +605,7 @@ function App() {
                   {encryptionMode === 'krux' && activeTab === 'backup' && (
                     <>
                       <div className="space-y-2 pt-2">
-                        <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Krux Label</label>
+                        <label className="text-xs font-bold text-slate-700 uppercase tracking-wider">Krux Label</label>
                         <div className="relative">
                           <input
                             type="text"
@@ -610,11 +617,11 @@ function App() {
                             readOnly={isReadOnly}
                           />
                         </div>
-                        <p className="text-[10px] text-slate-500 mt-1">Label for identification (max 252 bytes)</p>
+                        <p className="text-[10px] text-slate-800 mt-1">Label for identification (max 252 bytes)</p>
                       </div>
 
                       <div className="space-y-2">
-                        <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">PBKDF2 Iterations</label>
+                        <label className="text-xs font-bold text-slate-700 uppercase tracking-wider">PBKDF2 Iterations</label>
                         <div className="relative">
                           <input
                             type="number"
@@ -628,13 +635,13 @@ function App() {
                             readOnly={isReadOnly}
                           />
                         </div>
-                        <p className="text-[10px] text-slate-500 mt-1">Higher = more secure but slower (default: 200,000)</p>
+                        <p className="text-[10px] text-slate-800 mt-1">Higher = more secure but slower (default: 200,000)</p>
                       </div>
                     </>
                   )}
 
                   <div className="space-y-2">
-                    <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Message Password</label>
+                    <label className="text-xs font-bold text-slate-700 uppercase tracking-wider">Message Password</label>
                     <div className="relative">
                       <Lock className="absolute left-3 top-3 text-slate-400" size={16} />
                       <input
@@ -647,7 +654,7 @@ function App() {
                         readOnly={isReadOnly}
                       />
                     </div>
-                    <p className="text-[10px] text-slate-500 mt-1">
+                    <p className="text-[10px] text-slate-800 mt-1">
                       {encryptionMode === 'krux'
                         ? 'Required passphrase for Krux encryption'
                         : 'Symmetric encryption password (SKESK)'}
@@ -713,7 +720,7 @@ function App() {
               </div>
               <div className="space-y-2">
                 <div className="flex items-center justify-between gap-3">
-                  <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">
+                  <label className="text-xs font-bold text-slate-700 uppercase tracking-wider">
                     Raw payload (copy for backup)
                   </label>
 
diff --git a/src/components/QRScanner.tsx b/src/components/QRScanner.tsx
index a565e94..2537818 100644
--- a/src/components/QRScanner.tsx
+++ b/src/components/QRScanner.tsx
@@ -70,22 +70,14 @@ export default function QRScanner({ onScanSuccess, onClose, onError }: QRScanner
                             // jsQR gives us raw bytes!
                             const rawBytes = code.binaryData;
 
-                            console.log('🔍 Raw QR bytes:', rawBytes);
-                            console.log('  - Length:', rawBytes.length);
-                            console.log('  - Hex:', Array.from(rawBytes).map((b: number) => b.toString(16).padStart(2, '0')).join(''));
-
                             // Detect binary (16 or 32 bytes with non-printable chars)
                             const isBinary = (rawBytes.length === 16 || rawBytes.length === 32) &&
                                 /[\x00-\x08\x0B\x0C\x0E-\x1F\x7F-\xFF]/.test(String.fromCharCode(...Array.from(rawBytes)));
 
-                            console.log('📊 Is binary?', isBinary);
-
                             if (isBinary) {
-                                console.log('✅ Passing Uint8Array');
                                 onScanSuccess(new Uint8Array(rawBytes));
                             } else {
                                 // Text QR - use the text property
-                                console.log('✅ Passing string:', code.data.slice(0, 50));
                                 onScanSuccess(code.data);
                             }
 
@@ -94,9 +86,33 @@ export default function QRScanner({ onScanSuccess, onClose, onError }: QRScanner
                     }, 300);
                 }
             } catch (err: any) {
+                // IMPORTANT: Check for null/undefined err object first.
+                if (!err) {
+                    console.error('Caught a null or undefined error inside QRScanner.');
+                    return; // Exit if error is falsy
+                }
+
+                if (isCancelled || err.name === 'AbortError') {
+                    console.log('Camera operation was cancelled or aborted, which is expected on unmount.');
+                    return; // Ignore abort errors, they are expected on cleanup
+                }
+
                 console.error('Camera error:', err);
                 setHasPermission(false);
-                const errorMsg = 'Camera access was denied.';
+                
+                let errorMsg = 'An unknown camera error occurred.';
+                if (err.name === 'NotAllowedError') {
+                    errorMsg = 'Camera access was denied. Please grant permission in your browser settings.';
+                } else if (err.name === 'NotFoundError') {
+                    errorMsg = 'No camera found on this device.';
+                } else if (err.name === 'NotReadableError') {
+                    errorMsg = 'Cannot access the camera. It may be in use by another application or browser tab.';
+                } else if (err.name === 'OverconstrainedError') {
+                    errorMsg = 'The camera does not meet the required constraints.';
+                } else if (err instanceof Error) {
+                    errorMsg = `Camera error: ${err.message}`;
+                }
+
                 setInternalError(errorMsg);
                 onError?.(errorMsg);
             }