@vanikya/ota-react-native 0.2.0 → 0.2.3

package/src/components/OTADebugPanel.tsx

@@ -0,0 +1,447 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  StyleSheet,
+  NativeModules,
+  Platform,
+} from 'react-native';
+
+const { OTAUpdate } = NativeModules;
+
+interface LogEntry {
+  time: string;
+  message: string;
+  type: 'info' | 'success' | 'error' | 'warn';
+}
+
+interface OTADebugPanelProps {
+  testBundleUrl?: string;
+  serverUrl?: string;
+  appSlug?: string;
+}
+
+/**
+ * Debug panel for testing OTA update functionality.
+ * Use this component during development to verify:
+ * - Native module is linked correctly
+ * - Downloads work properly
+ * - Hash calculation works
+ * - SharedPreferences/UserDefaults are saved
+ * - Bundle loading on restart
+ */
+export function OTADebugPanel({ testBundleUrl, serverUrl, appSlug }: OTADebugPanelProps) {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const addLog = (message: string, type: LogEntry['type'] = 'info') => {
+    const time = new Date().toLocaleTimeString();
+    setLogs(prev => [...prev, { time, message, type }]);
+  };
+
+  const clearLogs = () => setLogs([]);
+
+  // Check native module on mount
+  useEffect(() => {
+    if (OTAUpdate) {
+      addLog('Native module found', 'success');
+      const docDir = OTAUpdate.getDocumentDirectory?.();
+      if (docDir) {
+        addLog(`Document directory: ${docDir}`, 'info');
+      }
+    } else {
+      addLog('Native module NOT found - OTA will not work!', 'error');
+    }
+  }, []);
+
+  const testNativeModule = async () => {
+    addLog('Testing native module...');
+
+    if (!OTAUpdate) {
+      addLog('Native module not available', 'error');
+      return;
+    }
+
+    try {
+      // Test getDocumentDirectory
+      const docDir = OTAUpdate.getDocumentDirectory();
+      addLog(`getDocumentDirectory: ${docDir}`, 'success');
+
+      // Test file operations
+      const testPath = `${docDir}ota-test.txt`;
+      await OTAUpdate.writeFile(testPath, 'Hello OTA!');
+      addLog(`writeFile: ${testPath}`, 'success');
+
+      const content = await OTAUpdate.readFile(testPath);
+      addLog(`readFile: "${content}"`, 'success');
+
+      const exists = await OTAUpdate.exists(testPath);
+      addLog(`exists: ${exists}`, 'success');
+
+      await OTAUpdate.deleteFile(testPath);
+      addLog('deleteFile: success', 'success');
+
+      const existsAfter = await OTAUpdate.exists(testPath);
+      addLog(`exists after delete: ${existsAfter}`, 'success');
+
+    } catch (error: any) {
+      addLog(`Error: ${error.message}`, 'error');
+    }
+  };
+
+  const testDownload = async () => {
+    if (!testBundleUrl) {
+      addLog('No testBundleUrl provided', 'warn');
+      return;
+    }
+
+    if (!OTAUpdate?.downloadFile) {
+      addLog('downloadFile not available', 'error');
+      return;
+    }
+
+    try {
+      const docDir = OTAUpdate.getDocumentDirectory();
+      const destPath = `${docDir}ota-update/test-bundle.js`;
+
+      addLog(`Downloading from: ${testBundleUrl}`);
+      addLog(`Destination: ${destPath}`);
+
+      const startTime = Date.now();
+      const result = await OTAUpdate.downloadFile(testBundleUrl, destPath);
+      const duration = Date.now() - startTime;
+
+      addLog(`Download complete in ${duration}ms`, 'success');
+      addLog(`File size: ${result.fileSize} bytes`, 'success');
+
+      // Verify file exists
+      const exists = await OTAUpdate.exists(destPath);
+      addLog(`File exists: ${exists}`, exists ? 'success' : 'error');
+
+    } catch (error: any) {
+      addLog(`Download failed: ${error.message}`, 'error');
+    }
+  };
+
+  const testHashCalculation = async () => {
+    if (!OTAUpdate?.calculateSHA256FromFile) {
+      addLog('calculateSHA256FromFile not available', 'error');
+      return;
+    }
+
+    try {
+      const docDir = OTAUpdate.getDocumentDirectory();
+      const testPath = `${docDir}ota-update/test-bundle.js`;
+
+      const exists = await OTAUpdate.exists(testPath);
+      if (!exists) {
+        addLog('Test bundle not found. Run "Test Download" first.', 'warn');
+        return;
+      }
+
+      addLog('Calculating hash...');
+      const startTime = Date.now();
+      const hash = await OTAUpdate.calculateSHA256FromFile(testPath);
+      const duration = Date.now() - startTime;
+
+      addLog(`Hash: ${hash}`, 'success');
+      addLog(`Calculated in ${duration}ms`, 'success');
+
+    } catch (error: any) {
+      addLog(`Hash calculation failed: ${error.message}`, 'error');
+    }
+  };
+
+  const testApplyBundle = async () => {
+    if (!OTAUpdate?.applyBundle) {
+      addLog('applyBundle not available', 'error');
+      return;
+    }
+
+    try {
+      const docDir = OTAUpdate.getDocumentDirectory();
+      const testPath = `${docDir}ota-update/test-bundle.js`;
+
+      const exists = await OTAUpdate.exists(testPath);
+      if (!exists) {
+        addLog('Test bundle not found. Run "Test Download" first.', 'warn');
+        return;
+      }
+
+      addLog(`Registering bundle: ${testPath}`);
+      await OTAUpdate.applyBundle(testPath, false); // Don't restart
+      addLog('Bundle registered (no restart)', 'success');
+
+      // Verify it was saved
+      const savedPath = await OTAUpdate.getPendingBundlePath();
+      addLog(`Saved path: ${savedPath}`, savedPath === testPath ? 'success' : 'error');
+
+    } catch (error: any) {
+      addLog(`Apply failed: ${error.message}`, 'error');
+    }
+  };
+
+  const testGetPendingBundle = async () => {
+    if (!OTAUpdate?.getPendingBundlePath) {
+      addLog('getPendingBundlePath not available', 'error');
+      return;
+    }
+
+    try {
+      const path = await OTAUpdate.getPendingBundlePath();
+      if (path) {
+        addLog(`Pending bundle: ${path}`, 'success');
+        const exists = await OTAUpdate.exists(path);
+        addLog(`File exists: ${exists}`, exists ? 'success' : 'error');
+      } else {
+        addLog('No pending bundle', 'info');
+      }
+    } catch (error: any) {
+      addLog(`Error: ${error.message}`, 'error');
+    }
+  };
+
+  const testClearPendingBundle = async () => {
+    if (!OTAUpdate?.clearPendingBundle) {
+      addLog('clearPendingBundle not available', 'error');
+      return;
+    }
+
+    try {
+      await OTAUpdate.clearPendingBundle();
+      addLog('Pending bundle cleared', 'success');
+    } catch (error: any) {
+      addLog(`Error: ${error.message}`, 'error');
+    }
+  };
+
+  const testApplyAndRestart = async () => {
+    if (!OTAUpdate?.applyBundle) {
+      addLog('applyBundle not available', 'error');
+      return;
+    }
+
+    try {
+      const docDir = OTAUpdate.getDocumentDirectory();
+      const testPath = `${docDir}ota-update/test-bundle.js`;
+
+      const exists = await OTAUpdate.exists(testPath);
+      if (!exists) {
+        addLog('Test bundle not found. Run "Test Download" first.', 'warn');
+        return;
+      }
+
+      addLog('Applying bundle and restarting...');
+      addLog('App will restart in ~200ms');
+      await OTAUpdate.applyBundle(testPath, true); // Restart
+
+    } catch (error: any) {
+      addLog(`Error: ${error.message}`, 'error');
+    }
+  };
+
+  const getLogColor = (type: LogEntry['type']) => {
+    switch (type) {
+      case 'success': return '#4CAF50';
+      case 'error': return '#F44336';
+      case 'warn': return '#FF9800';
+      default: return '#2196F3';
+    }
+  };
+
+  if (!isExpanded) {
+    return (
+      <TouchableOpacity
+        style={styles.collapsedButton}
+        onPress={() => setIsExpanded(true)}
+      >
+        <Text style={styles.collapsedButtonText}>OTA Debug</Text>
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>OTA Debug Panel</Text>
+        <View style={styles.headerButtons}>
+          <TouchableOpacity onPress={clearLogs} style={styles.headerButton}>
+            <Text style={styles.headerButtonText}>Clear</Text>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => setIsExpanded(false)} style={styles.headerButton}>
+            <Text style={styles.headerButtonText}>Hide</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      <View style={styles.info}>
+        <Text style={styles.infoText}>Platform: {Platform.OS}</Text>
+        <Text style={styles.infoText}>
+          Native Module: {OTAUpdate ? 'Available' : 'NOT FOUND'}
+        </Text>
+      </View>
+
+      <ScrollView style={styles.buttonContainer} horizontal showsHorizontalScrollIndicator={false}>
+        <TouchableOpacity style={styles.button} onPress={testNativeModule}>
+          <Text style={styles.buttonText}>Test Module</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.button} onPress={testDownload}>
+          <Text style={styles.buttonText}>Test Download</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.button} onPress={testHashCalculation}>
+          <Text style={styles.buttonText}>Test Hash</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.button} onPress={testApplyBundle}>
+          <Text style={styles.buttonText}>Register Bundle</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.button} onPress={testGetPendingBundle}>
+          <Text style={styles.buttonText}>Get Pending</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.button} onPress={testClearPendingBundle}>
+          <Text style={styles.buttonText}>Clear Pending</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={[styles.button, styles.dangerButton]} onPress={testApplyAndRestart}>
+          <Text style={styles.buttonText}>Apply + Restart</Text>
+        </TouchableOpacity>
+      </ScrollView>
+
+      <ScrollView style={styles.logContainer}>
+        {logs.length === 0 ? (
+          <Text style={styles.emptyLog}>Tap a button to start testing...</Text>
+        ) : (
+          logs.map((log, index) => (
+            <View key={index} style={styles.logEntry}>
+              <Text style={[styles.logTime]}>{log.time}</Text>
+              <Text style={[styles.logMessage, { color: getLogColor(log.type) }]}>
+                {log.message}
+              </Text>
+            </View>
+          ))
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#1a1a2e',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    maxHeight: '60%',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  collapsedButton: {
+    position: 'absolute',
+    bottom: 20,
+    right: 20,
+    backgroundColor: '#6C63FF',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  collapsedButtonText: {
+    color: '#fff',
+    fontWeight: 'bold',
+    fontSize: 12,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#2a2a4e',
+  },
+  title: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  headerButtons: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  headerButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    backgroundColor: '#2a2a4e',
+    borderRadius: 4,
+  },
+  headerButtonText: {
+    color: '#aaa',
+    fontSize: 12,
+  },
+  info: {
+    padding: 8,
+    backgroundColor: '#2a2a4e',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  infoText: {
+    color: '#888',
+    fontSize: 11,
+  },
+  buttonContainer: {
+    padding: 8,
+    flexGrow: 0,
+  },
+  button: {
+    backgroundColor: '#6C63FF',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 6,
+    marginRight: 8,
+  },
+  dangerButton: {
+    backgroundColor: '#F44336',
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  logContainer: {
+    flex: 1,
+    padding: 8,
+  },
+  emptyLog: {
+    color: '#666',
+    textAlign: 'center',
+    marginTop: 20,
+  },
+  logEntry: {
+    flexDirection: 'row',
+    paddingVertical: 4,
+    borderBottomWidth: 1,
+    borderBottomColor: '#2a2a4e',
+  },
+  logTime: {
+    color: '#666',
+    fontSize: 10,
+    width: 70,
+    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+  },
+  logMessage: {
+    flex: 1,
+    fontSize: 11,
+    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+  },
+});
+
+export default OTADebugPanel;

package/src/hooks/useOTAUpdate.ts

@@ -62,6 +62,25 @@ async function getDeviceId(): Promise<string> {
   return id;
 }
 
+// Timeout wrapper for async operations
+function withTimeout<T>(promise: Promise<T>, timeoutMs: number, operation: string): Promise<T> {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      reject(new Error(`${operation} timed out after ${timeoutMs}ms`));
+    }, timeoutMs);
+
+    promise
+      .then((result) => {
+        clearTimeout(timer);
+        resolve(result);
+      })
+      .catch((error) => {
+        clearTimeout(timer);
+        reject(error);
+      });
+  });
+}
+
 export function useOTAUpdate(config: OTAUpdateConfig): UseOTAUpdateResult {
   const {
     serverUrl,
@@ -178,7 +197,21 @@ export function useOTAUpdate(config: OTAUpdateConfig): UseOTAUpdateResult {
       });
 
       // Download bundle directly to file (bypasses JS memory - critical for large bundles)
-      const downloadResult = await storage.current.downloadBundleToFile(release.bundleUrl, release.id);
+      // Use a 5 minute timeout for large bundles on slow networks
+      if (__DEV__) {
+        console.log(`[OTAUpdate] Starting download from: ${release.bundleUrl}`);
+        console.log(`[OTAUpdate] Expected size: ${release.bundleSize} bytes`);
+      }
+
+      const downloadResult = await withTimeout(
+        storage.current.downloadBundleToFile(release.bundleUrl, release.id),
+        5 * 60 * 1000, // 5 minute timeout
+        'Bundle download'
+      );
+
+      if (__DEV__) {
+        console.log(`[OTAUpdate] Download complete: ${downloadResult.fileSize} bytes`);
+      }
 
       setDownloadProgress({
         downloadedBytes: downloadResult.fileSize,
@@ -189,10 +222,24 @@ export function useOTAUpdate(config: OTAUpdateConfig): UseOTAUpdateResult {
       // Verify bundle hash
       setStatus('verifying');
 
+      if (__DEV__) {
+        console.log('[OTAUpdate] Calculating bundle hash...');
+      }
+
       // Calculate hash from file (streaming to avoid memory issues)
-      const actualHash = await storage.current.calculateBundleHash(release.id);
+      // Use a 2 minute timeout for hash calculation
+      const actualHash = await withTimeout(
+        storage.current.calculateBundleHash(release.id),
+        2 * 60 * 1000, // 2 minute timeout
+        'Hash calculation'
+      );
       const expectedHashWithoutPrefix = release.bundleHash.replace(/^sha256:/, '');
 
+      if (__DEV__) {
+        console.log(`[OTAUpdate] Expected hash: ${expectedHashWithoutPrefix}`);
+        console.log(`[OTAUpdate] Actual hash: ${actualHash}`);
+      }
+
       if (actualHash !== expectedHashWithoutPrefix) {
         // Delete corrupted bundle
         await storage.current.deleteBundle(release.id);

package/src/index.ts

@@ -2,6 +2,9 @@
 export { OTAProvider, useOTA, withOTA, UpdateBanner } from './OTAProvider';
 export type { OTAProviderProps, UpdateBannerProps } from './OTAProvider';
 
+// Debug component (for development/testing)
+export { OTADebugPanel } from './components/OTADebugPanel';
+
 // Hook export
 export { useOTAUpdate } from './hooks/useOTAUpdate';
 export type {
@@ -33,4 +36,4 @@ export {
 export type { VerificationResult } from './utils/verification';
 
 // Version info
-export const VERSION = '0.1.8';
+export const VERSION = '0.2.3';

package/src/utils/storage.ts

@@ -130,15 +130,30 @@ class ExpoStorageAdapter implements StorageAdapter {
   async downloadToFile(url: string, destPath: string): Promise<{ fileSize: number }> {
     // Use Expo's downloadAsync which downloads directly to file
     // This bypasses JS memory entirely - critical for large bundles
+    if (__DEV__) {
+      console.log('[OTAUpdate] Expo: Starting download from:', url);
+      console.log('[OTAUpdate] Expo: Destination:', destPath);
+    }
+
     const result = await ExpoFileSystem.downloadAsync(url, destPath);
 
+    if (__DEV__) {
+      console.log('[OTAUpdate] Expo: Download status:', result.status);
+    }
+
     if (result.status !== 200) {
       throw new Error(`Download failed with status ${result.status}`);
     }
 
     // Get file size
     const info = await ExpoFileSystem.getInfoAsync(destPath);
-    return { fileSize: info.size || 0 };
+    const fileSize = (info as any).size || 0;
+
+    if (__DEV__) {
+      console.log('[OTAUpdate] Expo: Downloaded file size:', fileSize, 'bytes');
+    }
+
+    return { fileSize };
   }
 
   async calculateHashFromFile(path: string): Promise<string> {
@@ -151,25 +166,54 @@ class ExpoStorageAdapter implements StorageAdapter {
       // expo-crypto not available
     }
 
+    if (__DEV__) {
+      console.log('[OTAUpdate] Expo: Calculating hash for:', path);
+    }
+
+    // Get file info first to log size
+    const fileInfo = await ExpoFileSystem.getInfoAsync(path);
+    if (__DEV__ && fileInfo.exists) {
+      console.log('[OTAUpdate] File size:', (fileInfo as any).size, 'bytes');
+    }
+
     if (ExpoCrypto?.digest) {
-      // Read file as base64 and convert to Uint8Array
+      // Read file as base64 and convert to Uint8Array for hashing
       const base64 = await ExpoFileSystem.readAsStringAsync(path, {
         encoding: ExpoFileSystem.EncodingType.Base64,
       });
+
+      if (__DEV__) {
+        console.log('[OTAUpdate] File read as base64, length:', base64.length);
+      }
+
+      // Decode base64 to binary - this is what the server hashes
       const binary = atob(base64);
       const bytes = new Uint8Array(binary.length);
       for (let i = 0; i < binary.length; i++) {
         bytes[i] = binary.charCodeAt(i);
       }
+
+      if (__DEV__) {
+        console.log('[OTAUpdate] Decoded to binary, length:', bytes.length);
+      }
+
+      // Hash the binary data
       const hashBuffer = await ExpoCrypto.digest(
         ExpoCrypto.CryptoDigestAlgorithm.SHA256,
         bytes
       );
+
       // Convert ArrayBuffer to hex
       const hashBytes = new Uint8Array(hashBuffer);
-      return Array.from(hashBytes)
+      const hexHash = Array.from(hashBytes)
         .map(b => b.toString(16).padStart(2, '0'))
         .join('');
+
+      if (__DEV__) {
+        console.log('[OTAUpdate] Hash calculated:', hexHash);
+      }
+
+      return hexHash;
     }
 
     // Fallback to SubtleCrypto if available
@@ -264,12 +308,27 @@ class NativeStorageAdapter implements StorageAdapter {
 
     // Use native module's downloadFile method if available (preferred)
     if (OTAUpdateNative.downloadFile) {
+      if (__DEV__) {
+        console.log('[OTAUpdate] Native: Starting download from:', url);
+        console.log('[OTAUpdate] Native: Destination:', destPath);
+      }
+
       const result = await OTAUpdateNative.downloadFile(url, destPath);
-      return { fileSize: result.fileSize || 0 };
+      const fileSize = result.fileSize || 0;
+
+      if (__DEV__) {
+        console.log('[OTAUpdate] Native: Downloaded file size:', fileSize, 'bytes');
+      }
+
+      return { fileSize };
     }
 
     // Fallback: download via fetch and write in chunks
     // This is less efficient but works without native download support
+    if (__DEV__) {
+      console.log('[OTAUpdate] Native: Using fetch fallback for download');
+    }
+
     const response = await fetch(url);
     if (!response.ok) {
       throw new Error(`Download failed with status ${response.status}`);
@@ -279,6 +338,10 @@ class NativeStorageAdapter implements StorageAdapter {
     const base64 = arrayBufferToBase64(data);
     await OTAUpdateNative.writeFileBase64(destPath, base64);
 
+    if (__DEV__) {
+      console.log('[OTAUpdate] Native: Fallback download complete, size:', data.byteLength);
+    }
+
     return { fileSize: data.byteLength };
   }
 
@@ -289,12 +352,26 @@ class NativeStorageAdapter implements StorageAdapter {
 
     // Use native module's calculateSHA256FromFile if available (preferred - streams file)
     if (OTAUpdateNative.calculateSHA256FromFile) {
-      return OTAUpdateNative.calculateSHA256FromFile(path);
+      if (__DEV__) {
+        console.log('[OTAUpdate] Native: Calculating hash for:', path);
+      }
+
+      const hash = await OTAUpdateNative.calculateSHA256FromFile(path);
+
+      if (__DEV__) {
+        console.log('[OTAUpdate] Native: Hash calculated:', hash);
+      }
+
+      return hash;
     }
 
     // Fallback: read file as base64 and use the base64 hash method
     // This loads the file into memory, but is better than nothing
     if (OTAUpdateNative.calculateSHA256 && OTAUpdateNative.readFileBase64) {
+      if (__DEV__) {
+        console.log('[OTAUpdate] Native: Using fallback hash calculation (loads file into memory)');
+      }
+
       const base64 = await OTAUpdateNative.readFileBase64(path);
       return OTAUpdateNative.calculateSHA256(base64);
     }