@glomopay/react-native-sdk 2.0.1 → 3.0.1

package/src/injections/webview-flow.injection.ts

@@ -1,114 +1,149 @@
 /** Injection JavaScript for the Secondary WebView */
 export const injectedScript: string = `
     (function() {
-      // Overriding console methods
+      // Log prefix for all messages originating from the flow WebView
+      const LOG_PREFIX = 'FLOW_WEBVIEW: ';
+
+      /**
+       * Formats an array of arguments into a single prefixed string for posting back to React Native.
+       * Objects are JSON-stringified; primitives are coerced to strings.
+       */
+      function formatMessage(args) {
+        return args.map(function(arg) {
+          if (typeof arg === 'object') {
+            try {
+              return LOG_PREFIX + JSON.stringify(arg, null, 2);
+            } catch (error) {
+              return LOG_PREFIX + '[unserializable object]';
+            }
+          }
+          return LOG_PREFIX + String(arg);
+        }).join(' ');
+      }
+
+      // Saving original console methods before overriding (must be declared before safePostMessage references them)
       const originalLog = console.log;
       const originalWarn = console.warn;
       const originalError = console.error;
       const originalInfo = console.info;
-      
+
+      /**
+       * Safely posts a message to ReactNativeWebView with a guard check.
+       * Prevents crashes if the WebView bridge is not yet ready or has been torn down.
+       */
+      function safePostMessage(payload) {
+        try {
+          if (window.ReactNativeWebView && typeof window.ReactNativeWebView.postMessage === 'function') {
+            window.ReactNativeWebView.postMessage(JSON.stringify(payload));
+          }
+        } catch (error) {
+          originalError && originalError.call(console, LOG_PREFIX + 'Failed to post message to ReactNativeWebView', error);
+        }
+      }
+
+      // Overriding console methods to forward logs back to React Native
       console.log = function(...args) {
         originalLog.apply(console, args);
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'log',
-          message: args.map(a => typeof a === 'object' ? "FLOW_WEBVIEW: " + JSON.stringify(a, null, 2) : "FLOW_WEBVIEW: " + String(a)).join(' ')
-        }));
+          message: formatMessage(args)
+        });
       };
-      
+
       console.warn = function(...args) {
         originalWarn.apply(console, args);
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'warn',
-          message: args.map(a => typeof a === 'object' ? "FLOW_WEBVIEW: " + JSON.stringify(a, null, 2) : "FLOW_WEBVIEW: " + String(a)).join(' ')
-        }));
+          message: formatMessage(args)
+        });
       };
-      
+
       console.error = function(...args) {
         originalError.apply(console, args);
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'error',
-          message: args.map(a => typeof a === 'object' ? "FLOW_WEBVIEW: " + JSON.stringify(a, null, 2) : "FLOW_WEBVIEW: " + String(a)).join(' ')
-        }));
+          message: formatMessage(args)
+        });
       };
-      
+
       console.info = function(...args) {
         originalInfo.apply(console, args);
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'info',
-          message: args.map(a => typeof a === 'object' ? "FLOW_WEBVIEW: " + JSON.stringify(a, null, 2) : "FLOW_WEBVIEW: " + String(a)).join(' ')
-        }));
+          message: formatMessage(args)
+        });
       };
-      
-      // Intercepting fetch requests
+
+      // Intercepting fetch requests to log network activity
       const originalFetch = window.fetch;
       window.fetch = function(...args) {
         const url = typeof args[0] === 'string' ? args[0] : args[0]?.url || 'Unknown URL';
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'network',
-          message: "FLOW_WEBVIEW: " + 'FETCH REQUEST: ' + url
-        }));
-        
+          message: LOG_PREFIX + 'FETCH REQUEST: ' + url
+        });
+
         return originalFetch.apply(this, args)
           .then(response => {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
-                type: 'console',
-                level: 'network',
-                message: "FLOW_WEBVIEW: " + 'FETCH RESPONSE: ' + url + ' - Status: ' + response.status
-              }));
+            safePostMessage({
+              type: 'console',
+              level: 'network',
+              message: LOG_PREFIX + 'FETCH RESPONSE: ' + url + ' - Status: ' + response.status
+            });
             return response;
           })
           .catch(error => {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
+            safePostMessage({
               type: 'console',
               level: 'error',
-              message: "FLOW_WEBVIEW: " + 'FETCH ERROR: ' + url + ' - ' + error.message
-            }));
+              message: LOG_PREFIX + 'FETCH ERROR: ' + url + ' - ' + error.message
+            });
             throw error;
           });
       };
-      
-      // Intercepting XMLHttpRequest
+
+      // Intercepting XMLHttpRequest to log network activity
       const originalOpen = XMLHttpRequest.prototype.open;
       const originalSend = XMLHttpRequest.prototype.send;
-      
+
       XMLHttpRequest.prototype.open = function(method, url) {
         this._url = url;
         this._method = method;
         return originalOpen.apply(this, arguments);
       };
-      
+
       XMLHttpRequest.prototype.send = function() {
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'network',
-          message: "FLOW_WEBVIEW: " + 'XHR REQUEST: ' + this._method + ' ' + this._url
-        }));
-        
+          message: LOG_PREFIX + 'XHR REQUEST: ' + this._method + ' ' + this._url
+        });
+
         this.addEventListener('load', function() {
-          window.ReactNativeWebView.postMessage(JSON.stringify({
-              type: 'console',
-              level: 'network',
-              message: "FLOW_WEBVIEW: " + 'XHR RESPONSE: ' + this._url + ' - Status: ' + this.status
-            }));
+          safePostMessage({
+            type: 'console',
+            level: 'network',
+            message: LOG_PREFIX + 'XHR RESPONSE: ' + this._url + ' - Status: ' + this.status
+          });
         });
-        
+
         this.addEventListener('error', function() {
-          window.ReactNativeWebView.postMessage(JSON.stringify({
+          safePostMessage({
             type: 'console',
             level: 'error',
-            message: "FLOW_WEBVIEW: " + 'XHR ERROR: ' + this._url
-          }));
+            message: LOG_PREFIX + 'XHR ERROR: ' + this._url
+          });
         });
-        
+
         return originalSend.apply(this, arguments);
       };
-      
-      // Intercepting programmatic form.submit() — force target="_blank" to "_self"
+
+      // Intercepting programmatic form.submit() - force target="_blank" to "_self"
       // This prevents forms from trying to open new windows (which fail silently in WebView)
       const originalSubmit = HTMLFormElement.prototype.submit;
       HTMLFormElement.prototype.submit = function() {
@@ -121,54 +156,56 @@ export const injectedScript: string = `
       // Intercepting window.open
       const originalWindowOpen = window.open;
       window.open = function(url, target, features) {
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'window.open',
           url: url,
           target: target,
           features: features
-        }));
-        
-        // Returning a dummy window object to prevent JS errors
+        });
+
+        // Returning a mock window object to prevent JS errors
         return {
           closed: false,
           close: function() {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
+            safePostMessage({
               type: 'window.close'
-            }));
+            });
           },
           focus: function() {},
           blur: function() {}
         };
       };
-      
+
       // Listening for unhandled errors
       window.addEventListener('error', function(event) {
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'error',
-          message: "FLOW_WEBVIEW: " + 'Unhandled Error: ' + event.message + ' at ' + event.filename + ':' + event.lineno
-        }));
+          message: LOG_PREFIX + 'Unhandled Error: ' + event.message + ' at ' + event.filename + ':' + event.lineno
+        });
       });
-      
+
       // Listening for unhandled promise rejections
       window.addEventListener('unhandledrejection', function(event) {
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'error',
-          message: "FLOW_WEBVIEW: " + 'Unhandled Promise Rejection: ' + (event.reason?.toString() || 'Unknown')
-        }));
+          message: LOG_PREFIX + 'Unhandled Promise Rejection: ' + (event.reason?.toString() || 'Unknown')
+        });
       });
 
       // Listening for messages from the WebView
       window.addEventListener('message', function(event) {
-        console.log("FLOW_WEBVIEW: " + 'Message received: ' + event.data);
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        console.log(LOG_PREFIX + 'Message received: ' + event.data);
+        safePostMessage({
           type: 'message',
           message: event.data
-        }));
+        });
       });
 
       // Logging that injection is complete
-      console.log("FLOW_WEBVIEW: " + 'GlomoPay WebView JavaScript injection complete');
+      console.log(LOG_PREFIX + 'GlomoPay WebView JavaScript injection complete');
+
+      true; // Required for injected JavaScript
     })();
 `;

package/src/injections/webview-main.injection.ts

@@ -1,182 +1,217 @@
 /** Injection JavaScript for the Primary WebView */
 export const injectedScript: string = `
     (function() {
-      // Overriding console methods
+      // Log prefix for all messages originating from the main WebView
+      const LOG_PREFIX = 'MAIN_WEBVIEW: ';
+
+      /**
+       * Formats an array of arguments into a single prefixed string for posting back to React Native.
+       * Objects are JSON-stringified; primitives are coerced to strings.
+       */
+      function formatMessage(args) {
+        return args.map(function(arg) {
+          if (typeof arg === 'object') {
+            try {
+              return LOG_PREFIX + JSON.stringify(arg, null, 2);
+            } catch (error) {
+              return LOG_PREFIX + '[unserializable object]';
+            }
+          }
+          return LOG_PREFIX + String(arg);
+        }).join(' ');
+      }
+
+      // Saving original console methods before overriding (must be declared before safePostMessage references them)
       const originalLog = console.log;
       const originalWarn = console.warn;
       const originalError = console.error;
       const originalInfo = console.info;
-      
+
+      /**
+       * Safely posts a message to ReactNativeWebView with a guard check.
+       * Prevents crashes if the WebView bridge is not yet ready or has been torn down.
+       */
+      function safePostMessage(payload) {
+        try {
+          if (window.ReactNativeWebView && typeof window.ReactNativeWebView.postMessage === 'function') {
+            window.ReactNativeWebView.postMessage(JSON.stringify(payload));
+          }
+        } catch (error) {
+          originalError && originalError.call(console, LOG_PREFIX + 'Failed to post message to ReactNativeWebView', error);
+        }
+      }
+
+      // Overriding console methods to forward logs back to React Native
       console.log = function(...args) {
         originalLog.apply(console, args);
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'log',
-          message: args.map(a => typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a)).join(' ')
-        }));
+          message: formatMessage(args)
+        });
       };
-      
+
       console.warn = function(...args) {
         originalWarn.apply(console, args);
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'warn',
-          message: args.map(a => typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a)).join(' ')
-        }));
+          message: formatMessage(args)
+        });
       };
-      
+
       console.error = function(...args) {
         originalError.apply(console, args);
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'error',
-          message: args.map(a => typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a)).join(' ')
-        }));
+          message: formatMessage(args)
+        });
       };
-      
+
       console.info = function(...args) {
         originalInfo.apply(console, args);
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'info',
-          message: args.map(a => typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a)).join(' ')
-        }));
+          message: formatMessage(args)
+        });
       };
-      
-      // Intercepting fetch requests
+
+      // Intercepting fetch requests to log network activity
       const originalFetch = window.fetch;
       window.fetch = function(...args) {
         const url = typeof args[0] === 'string' ? args[0] : args[0]?.url || 'Unknown URL';
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'network',
-          message: 'FETCH REQUEST: ' + url
-        }));
-        
+          message: LOG_PREFIX + 'FETCH REQUEST: ' + url
+        });
+
         return originalFetch.apply(this, args)
           .then(response => {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
-                type: 'console',
-                level: 'network',
-                message: 'FETCH RESPONSE: ' + url + ' - Status: ' + response.status
-              }));
+            safePostMessage({
+              type: 'console',
+              level: 'network',
+              message: LOG_PREFIX + 'FETCH RESPONSE: ' + url + ' - Status: ' + response.status
+            });
             return response;
           })
           .catch(error => {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
+            safePostMessage({
               type: 'console',
               level: 'error',
-              message: 'FETCH ERROR: ' + url + ' - ' + error.message
-            }));
+              message: LOG_PREFIX + 'FETCH ERROR: ' + url + ' - ' + error.message
+            });
             throw error;
           });
       };
-      
-      // Intercepting XMLHttpRequest
+
+      // Intercepting XMLHttpRequest to log network activity
       const originalOpen = XMLHttpRequest.prototype.open;
       const originalSend = XMLHttpRequest.prototype.send;
-      
+
       XMLHttpRequest.prototype.open = function(method, url) {
         this._url = url;
         this._method = method;
         return originalOpen.apply(this, arguments);
       };
-      
+
       XMLHttpRequest.prototype.send = function() {
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'network',
-          message: 'XHR REQUEST: ' + this._method + ' ' + this._url
-        }));
-        
+          message: LOG_PREFIX + 'XHR REQUEST: ' + this._method + ' ' + this._url
+        });
+
         this.addEventListener('load', function() {
           try {
-              window.ReactNativeWebView.postMessage(JSON.stringify({
-                type: 'console',
-                level: 'network',
-                message: 'XHR RESPONSE LOAD: ' + this._url + ' - Status: ' + this.status
-              }));
+            safePostMessage({
+              type: 'console',
+              level: 'network',
+              message: LOG_PREFIX + 'XHR RESPONSE LOAD: ' + this._url + ' - Status: ' + this.status
+            });
           } catch (e) {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
+            safePostMessage({
               type: 'console',
               level: 'network',
-              message: 'XHR RESPONSE ERROR: ' + this._url + ' - Status: ' + this.status
-            }));
+              message: LOG_PREFIX + 'XHR RESPONSE ERROR: ' + this._url + ' - Status: ' + this.status
+            });
           }
         });
-        
+
         this.addEventListener('error', function() {
-          window.ReactNativeWebView.postMessage(JSON.stringify({
+          safePostMessage({
             type: 'console',
             level: 'error',
-            message: 'XHR ERROR: ' + this._url
-          }));
+            message: LOG_PREFIX + 'XHR ERROR: ' + this._url
+          });
         });
-        
+
         return originalSend.apply(this, arguments);
       };
-      
+
       // Intercepting window.open
       const originalWindowOpen = window.open;
       window.open = function(url, target, features) {
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'window.open',
           url: url,
           target: target,
           features: features
-        }));
-        
-        // Returning a dummy window object to prevent JS errors
+        });
+
+        // Returning a mock window object to prevent JS errors
         return {
           closed: false,
           close: function() {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
+            safePostMessage({
               type: 'window.close'
-            }));
+            });
           },
           focus: function() {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
+            safePostMessage({
               type: 'window.focus'
-            }));
+            });
           },
           blur: function() {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
+            safePostMessage({
               type: 'window.blur'
-            }));
+            });
           }
         };
       };
-      
+
       // Listening for unhandled errors
       window.addEventListener('error', function(event) {
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'error',
-          message: 'Unhandled Error: ' + event.message + ' at ' + event.filename + ':' + event.lineno
-        }));
+          message: LOG_PREFIX + 'Unhandled Error: ' + event.message + ' at ' + event.filename + ':' + event.lineno
+        });
       });
-      
+
       // Listening for unhandled promise rejections
       window.addEventListener('unhandledrejection', function(event) {
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        safePostMessage({
           type: 'console',
           level: 'error',
-          message: 'Unhandled Promise Rejection: ' + (event.reason?.toString() || 'Unknown')
-        }));
+          message: LOG_PREFIX + 'Unhandled Promise Rejection: ' + (event.reason?.toString() || 'Unknown')
+        });
       });
 
       // Listening for messages from the WebView
       window.addEventListener('message', function(event) {
-        console.log("MAIN_WEBVIEW: " + 'Message received: ' + event.data);  
-        window.ReactNativeWebView.postMessage(JSON.stringify({
+        console.log(LOG_PREFIX + 'Message received: ' + event.data);
+        safePostMessage({
           type: 'message',
           message: event.data
-        }));
+        });
       });
-      
+
       // Logging that injection is complete
-      console.log('GlomoPay WebView JavaScript injection complete');
-      
+      console.log(LOG_PREFIX + 'GlomoPay WebView JavaScript injection complete');
+
       true; // Required for injected JavaScript
     })();
 `;