npm - becomap - Versions diffs - 1.5.70 → 1.5.72 - Mend

becomap 1.5.70 → 1.5.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/public/index.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
@@ -22,43 +22,182 @@
 <body>
   <div id="mapContainer"></div>
-  <!-- External libs -->
   <script src="https://unpkg.com/maplibre-gl@4.4.1/dist/maplibre-gl.js"></script>
   <script src="https://unpkg.com/@turf/turf@7.1.0/turf.min.js"></script>
-  <!-- Core Map SDK Integration -->
-  <script>
-    // ============================================================================
+  <script>// ============================================================================
     // GLOBAL VARIABLES
     // ============================================================================
     window._mapView = null;
     window._site = null;
     window._eventListeners = new Map();
+    window._bridgeHealth = {
+      isConnected: false,
+      lastHeartbeat: null,
+      connectionAttempts: 0,
+      maxRetries: 3
+    };
+    window._operationQueue = [];
+    window._isProcessingQueue = false;
+    window._appState = 'initializing'; // 'initializing', 'ready', 'error', 'destroyed'
     // ============================================================================
     // UTILITY FUNCTIONS
     // ============================================================================
     /**
-     * Sends messages to native platform (iOS/Android)
+     * Checks if native bridge is available
+     * @returns {boolean} - True if native bridge is available
+     */
+    function isNativeBridgeAvailable() {
+      return !!(window.webkit?.messageHandlers?.jsHandler || window.jsHandler?.postMessage);
+    }
+    /**
+     * Updates bridge health status
+     * @param {boolean} isConnected - Connection status
+     */
+    function updateBridgeHealth(isConnected) {
+      window._bridgeHealth.isConnected = isConnected;
+      window._bridgeHealth.lastHeartbeat = Date.now();
+      if (isConnected) {
+        window._bridgeHealth.connectionAttempts = 0;
+        processOperationQueue();
+      }
+    }
+    /**
+     * Sends messages to native platform with retry mechanism
      * @param {string} type - Message type
      * @param {any} payload - Message payload
+     * @param {boolean} skipQueue - Skip queue and send immediately
+     */
+    function notifyNative(type, payload = null, skipQueue = false) {
+      const message = { type, payload, timestamp: Date.now() };
+      if (!isNativeBridgeAvailable()) {
+        console.warn("Native handler not available:", message);
+        if (!skipQueue && window._bridgeHealth.connectionAttempts < window._bridgeHealth.maxRetries) {
+          queueOperation(() => notifyNative(type, payload, true));
+          return;
+        }
+        // Fallback: store in localStorage for debugging
+        try {
+          const failedMessages = JSON.parse(localStorage.getItem('becomap_failed_messages') || '[]');
+          failedMessages.push(message);
+          localStorage.setItem('becomap_failed_messages', JSON.stringify(failedMessages.slice(-50))); // Keep last 50
+        } catch (e) {
+          console.warn('Failed to store message in localStorage:', e);
+        }
+        return;
+      }
+      try {
+        const messageStr = JSON.stringify(message);
+        if (window.webkit?.messageHandlers?.jsHandler) {
+          // iOS
+          window.webkit.messageHandlers.jsHandler.postMessage(messageStr);
+        } else if (window.jsHandler?.postMessage) {
+          // Android
+          window.jsHandler.postMessage(messageStr);
+        }
+        updateBridgeHealth(true);
+      } catch (error) {
+        console.error('Failed to send message to native:', error, message);
+        updateBridgeHealth(false);
+        if (!skipQueue) {
+          queueOperation(() => notifyNative(type, payload, true));
+        }
+      }
+    }
+    /**
+     * Queues an operation for later execution
+     * @param {Function} operation - Operation to queue
+     */
+    function queueOperation(operation) {
+      window._operationQueue.push({
+        operation,
+        timestamp: Date.now(),
+        retries: 0
+      });
+      // Process queue after a short delay
+      setTimeout(processOperationQueue, 100);
+    }
+    /**
+     * Processes queued operations
      */
-    function notifyNative(type, payload = null) {
-      const message = JSON.stringify({ type, payload });
-      if (window.webkit?.messageHandlers?.jsHandler) {
-        // iOS
-        window.webkit.messageHandlers.jsHandler.postMessage(message);
-      } else if (window.jsHandler?.postMessage) {
-        // Android
-        window.jsHandler.postMessage(message);
-      } else {
-        console.log("Native handler not available:", message);
+    function processOperationQueue() {
+      if (window._isProcessingQueue || !isNativeBridgeAvailable()) {
+        return;
+      }
+      window._isProcessingQueue = true;
+      try {
+        const now = Date.now();
+        const maxAge = 30000; // 30 seconds
+        // Remove expired operations
+        window._operationQueue = window._operationQueue.filter(item =>
+          now - item.timestamp < maxAge
+        );
+        // Process remaining operations
+        while (window._operationQueue.length > 0 && isNativeBridgeAvailable()) {
+          const item = window._operationQueue.shift();
+          try {
+            item.operation();
+          } catch (error) {
+            console.error('Error processing queued operation:', error);
+            // Retry failed operations up to 3 times
+            if (item.retries < 3) {
+              item.retries++;
+              window._operationQueue.unshift(item);
+              break;
+            }
+          }
+        }
+      } finally {
+        window._isProcessingQueue = false;
       }
     }
+    /**
+     * Throttle function to prevent event flooding
+     * @param {Function} func - Function to throttle
+     * @param {number} delay - Delay in milliseconds
+     * @returns {Function} - Throttled function
+     */
+    function throttle(func, delay) {
+      let timeoutId;
+      let lastExecTime = 0;
+      return function (...args) {
+        const currentTime = Date.now();
+        if (currentTime - lastExecTime > delay) {
+          func.apply(this, args);
+          lastExecTime = currentTime;
+        } else {
+          clearTimeout(timeoutId);
+          timeoutId = setTimeout(() => {
+            func.apply(this, args);
+            lastExecTime = Date.now();
+          }, delay - (currentTime - lastExecTime));
+        }
+      };
+    }
     /**
      * Safely converts objects to JSON with error handling
      * @param {any} obj - Object to convert
@@ -74,20 +213,97 @@
     }
     /**
-     * Executes function with error handling and native notification
+     * Executes function with enhanced error handling, timeout, and retry mechanism
      * @param {Function} fn - Function to execute
      * @param {string} errorType - Error type for native notification
+     * @param {any} errorDetails - Additional error details to include in the payload
      * @param {any} fallbackValue - Fallback value if function fails
+     * @param {number} timeout - Timeout in milliseconds (default: 5000)
+     * @param {number} maxRetries - Maximum retry attempts (default: 0)
      */
-    function executeWithErrorHandling(fn, errorType, fallbackValue = null) {
-      try {
-        const result = fn();
-        return result !== undefined ? result : fallbackValue;
-      } catch (error) {
-        console.error(`${errorType} error:`, error);
-        notifyNative(errorType, { message: error.message });
-        return fallbackValue;
-      }
+    function executeWithErrorHandling(fn, errorType, errorDetails = null, fallbackValue = null, timeout = 5000, maxRetries = 0) {
+      return new Promise((resolve) => {
+        let retryCount = 0;
+        function attemptExecution() {
+          try {
+            // Validate pre-conditions
+            if (window._appState === 'destroyed') {
+              throw new Error('Application has been destroyed');
+            }
+            if (!window._mapView && errorDetails?.operation !== 'init') {
+              throw new Error('MapView not initialized');
+            }
+            // Set up timeout
+            const timeoutId = setTimeout(() => {
+              throw new Error(`Operation timed out after ${timeout}ms`);
+            }, timeout);
+            const result = fn();
+            clearTimeout(timeoutId);
+            // Handle promises
+            if (result && typeof result.then === 'function') {
+              result
+                .then(res => resolve(res !== undefined ? res : fallbackValue))
+                .catch(handleError);
+            } else {
+              resolve(result !== undefined ? result : fallbackValue);
+            }
+          } catch (error) {
+            handleError(error);
+          }
+        }
+        function handleError(error) {
+          console.error(`${errorType} error (attempt ${retryCount + 1}):`, error);
+          const errorPayload = {
+            message: error.message,
+            stack: error.stack,
+            timestamp: Date.now(),
+            attempt: retryCount + 1,
+            maxRetries: maxRetries + 1,
+            appState: window._appState,
+            bridgeHealth: { ...window._bridgeHealth },
+            ...errorDetails
+          };
+          // Retry logic for transient errors
+          if (retryCount < maxRetries && isRetriableError(error)) {
+            retryCount++;
+            const delay = Math.min(1000 * Math.pow(2, retryCount - 1), 5000); // Exponential backoff
+            setTimeout(attemptExecution, delay);
+            return;
+          }
+          notifyNative(errorType, errorPayload);
+          resolve(fallbackValue);
+        }
+        attemptExecution();
+      });
+    }
+    /**
+     * Determines if an error is retriable
+     * @param {Error} error - The error to check
+     * @returns {boolean} - True if error is retriable
+     */
+    function isRetriableError(error) {
+      const retriableMessages = [
+        'network error',
+        'timeout',
+        'connection failed',
+        'temporary failure'
+      ];
+      return retriableMessages.some(msg =>
+        error.message.toLowerCase().includes(msg)
+      );
     }
     // ============================================================================
@@ -109,44 +325,100 @@
       // Map load event
       const loadListenerId = mapView.eventsHandler.on('load', () => {
-        notifyNative("mapLoad", { timestamp: Date.now() });
+        try {
+          window._appState = 'ready';
+          notifyNative("onRenderComplete", {
+            site: safeToJSON(window._site),
+            timestamp: Date.now(),
+            appState: window._appState
+          });
+        } catch (error) {
+          console.error('Error in load event handler:', error);
+          notifyNative("onError", {
+            message: error.message,
+            event: 'load',
+            timestamp: Date.now()
+          });
+        }
       });
-      // View change event
-      const viewChangeListenerId = mapView.eventsHandler.on('viewChange', (args) => {
-        notifyNative("viewChange", {
-          viewOptions: safeToJSON(args.viewOptions),
-          timestamp: Date.now()
-        });
-      });
+      // View change event (throttled to prevent flooding)
+      const throttledViewChange = throttle((args) => {
+        try {
+          notifyNative("onViewChange", {
+            viewOptions: safeToJSON(args.viewOptions),
+            timestamp: Date.now()
+          });
+        } catch (error) {
+          console.error('Error in viewChange event handler:', error);
+        }
+      }, 100); // Throttle to max 10 events per second
+      const viewChangeListenerId = mapView.eventsHandler.on('viewChange', throttledViewChange);
       // Location selection event
       const selectListenerId = mapView.eventsHandler.on('select', (args) => {
-        notifyNative("locationSelect", {
-          locations: args.locations?.map(loc => safeToJSON(loc)) || [],
-          timestamp: Date.now()
-        });
+        try {
+          notifyNative("onLocationSelect", {
+            locations: args.locations?.map(loc => safeToJSON(loc)) || [],
+            timestamp: Date.now()
+          });
+        } catch (error) {
+          console.error('Error in select event handler:', error);
+          notifyNative("onError", {
+            message: error.message,
+            event: 'select',
+            timestamp: Date.now()
+          });
+        }
       });
       // Floor switch event
       const switchToFloorListenerId = mapView.eventsHandler.on('switchToFloor', (args) => {
-        notifyNative("floorSwitch", {
-          floor: safeToJSON(args.floor),
-          timestamp: Date.now()
-        });
+        try {
+          notifyNative("onFloorSwitch", {
+            floor: safeToJSON(args.floor),
+            timestamp: Date.now()
+          });
+        } catch (error) {
+          console.error('Error in switchToFloor event handler:', error);
+          notifyNative("onError", {
+            message: error.message,
+            event: 'switchToFloor',
+            timestamp: Date.now()
+          });
+        }
       });
       // Route step load event
       const stepLoadListenerId = mapView.eventsHandler.on('stepLoad', (args) => {
-        notifyNative("stepLoad", {
-          step: safeToJSON(args.step),
-          timestamp: Date.now()
-        });
+        try {
+          notifyNative("onStepLoad", {
+            step: safeToJSON(args.step),
+            timestamp: Date.now()
+          });
+        } catch (error) {
+          console.error('Error in stepLoad event handler:', error);
+          notifyNative("onError", {
+            message: error.message,
+            event: 'stepLoad',
+            timestamp: Date.now()
+          });
+        }
       });
       // Walkthrough end event
       const walkthroughEndListenerId = mapView.eventsHandler.on('walkthroughEnd', () => {
-        notifyNative("walkthroughEnd", { timestamp: Date.now() });
+        try {
+          notifyNative("onWalkthroughEnd", { timestamp: Date.now() });
+        } catch (error) {
+          console.error('Error in walkthroughEnd event handler:', error);
+          notifyNative("onError", {
+            message: error.message,
+            event: 'walkthroughEnd',
+            timestamp: Date.now()
+          });
+        }
       });
       // Store listener IDs for cleanup
@@ -182,36 +454,135 @@
     // ============================================================================
     /**
-     * Initializes the map with site options
+     * Initializes the map with site options and enhanced error handling
      * @param {Object} siteOptions - Site configuration options
      */
-    async function init(siteOptions) {
+    function init(siteOptions) {
+      // Validate input parameters
+      if (!siteOptions || typeof siteOptions !== 'object') {
+        const error = new Error('Invalid siteOptions provided');
+        notifyNative("onError", {
+          message: error.message,
+          timestamp: Date.now(),
+          operation: "init",
+          siteOptions: siteOptions
+        });
+        return;
+      }
+      // Check if already initialized
+      if (window._appState === 'ready' && window._mapView) {
+        console.warn('Map already initialized');
+        notifyNative("onRenderComplete", {
+          site: safeToJSON(window._site),
+          timestamp: Date.now(),
+          appState: window._appState
+        });
+        return;
+      }
+      window._appState = 'initializing';
       try {
         const container = document.getElementById('mapContainer');
         if (!container) {
           throw new Error('Map container not found');
         }
-        if (!window.becomap?.getSite || !window.becomap?.getMapView) {
-          throw new Error('Becomap UMD not loaded');
-        }
-        const mapOptions = { zoom: 18.5 };
-        window._site = await window.becomap.getSite(siteOptions);
-        window._mapView = await window.becomap.getMapView(container, window._site, mapOptions);
-        // Setup event listeners
-        setupMapViewEventListeners(window._mapView);
+        // Check if Becomap UMD is loaded with timeout
+        const checkBecomapLoaded = () => {
+          return new Promise((resolve, reject) => {
+            const maxAttempts = 50; // 5 seconds with 100ms intervals
+            let attempts = 0;
+            const checkInterval = setInterval(() => {
+              attempts++;
+              if (window.becomap?.getSite && window.becomap?.getMapView) {
+                clearInterval(checkInterval);
+                resolve();
+              } else if (attempts >= maxAttempts) {
+                clearInterval(checkInterval);
+                reject(new Error('Becomap UMD failed to load within timeout'));
+              }
+            }, 100);
+          });
+        };
+        // Initialize with proper error handling and timeouts
+        checkBecomapLoaded()
+          .then(() => {
+            const mapOptions = { zoom: 18.5 };
+            // Add timeout to getSite
+            const getSiteWithTimeout = Promise.race([
+              window.becomap.getSite(siteOptions),
+              new Promise((_, reject) =>
+                setTimeout(() => reject(new Error('getSite timeout')), 10000)
+              )
+            ]);
+            return getSiteWithTimeout;
+          })
+          .then(site => {
+            if (!site) {
+              throw new Error('Failed to load site data');
+            }
+            window._site = site;
+            // Add timeout to getMapView
+            const getMapViewWithTimeout = Promise.race([
+              window.becomap.getMapView(container, site, { zoom: 18.5 }),
+              new Promise((_, reject) =>
+                setTimeout(() => reject(new Error('getMapView timeout')), 15000)
+              )
+            ]);
+            return getMapViewWithTimeout;
+          })
+          .then(mapView => {
+            if (!mapView) {
+              throw new Error('Failed to create map view');
+            }
+            window._mapView = mapView;
+            // Setup event listeners
+            setupMapViewEventListeners(mapView);
+            // Initialize bridge health monitoring
+            updateBridgeHealth(isNativeBridgeAvailable());
+            console.log('Map initialization completed successfully');
+          })
+          .catch(err => {
+            window._appState = 'error';
+            console.error('Init error:', err);
+            notifyNative("onError", {
+              message: err.message,
+              stack: err.stack,
+              timestamp: Date.now(),
+              operation: "init",
+              siteOptions,
+              appState: window._appState,
+              containerExists: !!document.getElementById('mapContainer'),
+              becomapLoaded: !!(window.becomap?.getSite && window.becomap?.getMapView)
+            });
+          });
-        notifyNative("onRenderComplete", {
-          site: safeToJSON(window._site),
-          timestamp: Date.now()
-        });
       } catch (err) {
-        console.error('Init error:', err);
-        notifyNative("initError", {
+        window._appState = 'error';
+        console.error('Init synchronous error:', err);
+        notifyNative("onError", {
           message: err.message,
-          timestamp: Date.now()
+          stack: err.stack,
+          timestamp: Date.now(),
+          operation: "init",
+          siteOptions,
+          appState: window._appState
         });
       }
     }
@@ -222,68 +593,104 @@
     // Floor and Location Methods
     globalThis.getCurrentFloor = () => {
-      const floor = executeWithErrorHandling(
+      executeWithErrorHandling(
         () => window._mapView?.currentFloor,
-        "getCurrentFloorError"
-      );
-      notifyNative("getCurrentFloor", safeToJSON(floor));
+        "onError",
+        { operation: "getCurrentFloor" }
+      ).then(floor => {
+        notifyNative("onGetCurrentFloor", safeToJSON(floor));
+      }).catch(error => {
+        console.error('Error in getCurrentFloor:', error);
+        notifyNative("onGetCurrentFloor", null);
+      });
     };
     globalThis.selectFloorWithId = (floor) => {
       executeWithErrorHandling(
         () => window._mapView?.selectFloorWithId(floor),
-        "selectFloorError"
+        "onError",
+        { operation: "selectFloorWithId", floor }
       );
     };
     globalThis.selectLocationWithId = (location) => {
       executeWithErrorHandling(
         () => window._mapView?.selectLocationWithId(location),
-        "selectLocationError"
+        "onError",
+        { operation: "selectLocationWithId", location }
       );
     };
     // Data Retrieval Methods
     globalThis.getCategories = () => {
-      const categories = executeWithErrorHandling(
+      executeWithErrorHandling(
         () => window._mapView?.getCategories(),
-        "getCategoriesError",
+        "onError",
+        { operation: "getCategories" },
         []
-      );
-      notifyNative("getCategories", categories?.map(cat => safeToJSON(cat)) || []);
+      ).then(categories => {
+        // Ensure categories is an array before mapping
+        const categoriesArray = Array.isArray(categories) ? categories : [];
+        notifyNative("onGetCategories", categoriesArray.map(cat => safeToJSON(cat)));
+      }).catch(error => {
+        console.error('Error in getCategories:', error);
+        notifyNative("onGetCategories", []);
+      });
     };
     globalThis.getLocations = () => {
-      const locations = executeWithErrorHandling(
+      executeWithErrorHandling(
         () => window._mapView?.getLocations(),
-        "getLocationsError",
+        "onError",
+        { operation: "getLocations" },
         []
-      );
-      notifyNative("getLocations", locations?.map(loc => safeToJSON(loc)) || []);
+      ).then(locations => {
+        // Ensure locations is an array before mapping
+        const locationsArray = Array.isArray(locations) ? locations : [];
+        notifyNative("onGetLocations", locationsArray.map(loc => safeToJSON(loc)));
+      }).catch(error => {
+        console.error('Error in getLocations:', error);
+        notifyNative("onGetLocations", []);
+      });
     };
-    globalThis.getAllAmenities = () => {
-      const amenities = executeWithErrorHandling(
+    globalThis.getAmenities = () => {
+      executeWithErrorHandling(
         () => window._mapView?.getAllAminityLocations(),
-        "getAllAmenitiesError",
+        "onError",
+        { operation: "getAmenities" },
         []
-      );
-      notifyNative("getAllAmenities", amenities?.map(amenity => safeToJSON(amenity)) || []);
+      ).then(amenities => {
+        // Ensure amenities is an array before mapping
+        const amenitiesArray = Array.isArray(amenities) ? amenities : [];
+        notifyNative("onGetAmenities", amenitiesArray.map(amenity => safeToJSON(amenity)));
+      }).catch(error => {
+        console.error('Error in getAmenities:', error);
+        notifyNative("onGetAmenities", []);
+      });
     };
-    globalThis.getAmenities = () => {
-      const amenities = executeWithErrorHandling(
+    globalThis.getAmenityTypes = () => {
+      executeWithErrorHandling(
         () => window._mapView?.getAmenities(),
-        "getAmenitiesError",
+        "onError",
+        { operation: "getAmenityTypes" },
         []
-      );
-      notifyNative("getAmenities", amenities?.map(amenity => safeToJSON(amenity)) || []);
+      ).then(amenities => {
+        // Ensure amenities is an array before mapping
+        const amenitiesArray = Array.isArray(amenities) ? amenities : [];
+        notifyNative("onGetAmenityTypes", amenitiesArray.map(amenity => safeToJSON(amenity)));
+      }).catch(error => {
+        console.error('Error in getAmenityTypes:', error);
+        notifyNative("onGetAmenityTypes", []);
+      });
     };
     globalThis.selectAmenities = (type) => {
       executeWithErrorHandling(
         () => window._mapView?.selectAmenities(type),
-        "selectAmenitiesError"
+        "onError",
+        { operation: "selectAmenities", type }
       );
     };
@@ -291,41 +698,43 @@
     globalThis.getSessionId = async () => {
       try {
         const sessionId = await window._mapView?.getSessionId();
-        notifyNative("getSessionId", sessionId);
+        notifyNative("onGetSessionId", sessionId);
       } catch (err) {
-        notifyNative("getSessionIdError", {
+        notifyNative("onError", {
           message: err.message,
-          timestamp: Date.now()
+          timestamp: Date.now(),
+          operation: "getSessionId"
         });
       }
     };
-    globalThis.getQuestions = () => {
-      const questions = executeWithErrorHandling(
-        () => window._mapView?.getQuestions(),
-        "getQuestionsError",
-        []
-      );
-      notifyNative("getQuestions", questions?.map(q => safeToJSON(q)) || []);
-    };
     globalThis.getHappenings = (type) => {
-      const happenings = executeWithErrorHandling(
+      executeWithErrorHandling(
         () => window._mapView?.getHappenings(type),
-        "getHappeningsError",
+        "onError",
+        { operation: "getHappenings", type },
         []
-      );
-      notifyNative("getHappenings", happenings?.map(h => safeToJSON(h)) || []);
+      ).then(happenings => {
+        // Ensure happenings is an array before mapping
+        const happeningsArray = Array.isArray(happenings) ? happenings : [];
+        notifyNative("onGetHappenings", happeningsArray.map(h => safeToJSON(h)));
+      }).catch(error => {
+        console.error('Error in getHappenings:', error);
+        notifyNative("onGetHappenings", []);
+      });
     };
     globalThis.getEventSuggestions = async (sessionId, answers) => {
       try {
         const suggestions = await window._mapView?.getEventSuggestions(sessionId, answers);
-        notifyNative("getEventSuggestions", suggestions?.map(s => safeToJSON(s)) || []);
+        notifyNative("onGetEventSuggestions", suggestions?.map(s => safeToJSON(s)) || []);
       } catch (err) {
-        notifyNative("getEventSuggestionsError", {
+        notifyNative("onError", {
           message: err.message,
-          timestamp: Date.now()
+          timestamp: Date.now(),
+          operation: "getEventSuggestions",
+          sessionId,
+          answers
         });
       }
     };
@@ -334,70 +743,79 @@
     globalThis.focusTo = (location, zoom, bearing, pitch) => {
       executeWithErrorHandling(
         () => window._mapView?.focusTo(location, zoom, bearing, pitch),
-        "focusToError"
+        "onError",
+        { operation: "focusTo", location, zoom, bearing, pitch }
       );
     };
     globalThis.clearSelection = () => {
       executeWithErrorHandling(
         () => window._mapView?.clearSelection(),
-        "clearSelectionError"
+        "onError",
+        { operation: "clearSelection" }
       );
     };
     globalThis.updateZoom = (zoom) => {
       executeWithErrorHandling(
         () => window._mapView?.updateZoom(zoom),
-        "updateZoomError"
+        "onError",
+        { operation: "updateZoom", zoom }
       );
     };
     globalThis.updatePitch = (pitch) => {
       executeWithErrorHandling(
         () => window._mapView?.updatePitch(pitch),
-        "updatePitchError"
+        "onError",
+        { operation: "updatePitch", pitch }
       );
     };
     globalThis.updateBearing = (bearing) => {
       executeWithErrorHandling(
         () => window._mapView?.updateBearing(bearing),
-        "updateBearingError"
+        "onError",
+        { operation: "updateBearing", bearing }
       );
     };
     globalThis.enableMultiSelection = (val) => {
       executeWithErrorHandling(
         () => window._mapView?.enableMultiSelection(val),
-        "enableMultiSelectionError"
+        "onError",
+        { operation: "enableMultiSelection", value: val }
       );
     };
     globalThis.setBounds = (sw, ne) => {
       executeWithErrorHandling(
         () => window._mapView?.setBounds(sw, ne),
-        "setBoundsError"
+        "onError",
+        { operation: "setBounds", southwest: sw, northeast: ne }
       );
     };
     globalThis.setViewport = (options) => {
       executeWithErrorHandling(
         () => window._mapView?.setViewport(options),
-        "setViewportError"
+        "onError",
+        { operation: "setViewport", options }
       );
     };
     globalThis.resetDefaultViewport = (options) => {
       executeWithErrorHandling(
         () => window._mapView?.resetDefaultViewport(options),
-        "resetDefaultViewportError"
+        "onError",
+        { operation: "resetDefaultViewport", options }
       );
     };
     // Search Methods
     globalThis.searchForLocations = (q, callbackId) => {
       if (!window._mapView?.searchForLocations) {
-        notifyNative("searchForLocations", {
+        notifyNative("onSearchForLocations", {
           callbackId,
           results: [],
           error: "Search method not available"
@@ -406,7 +824,7 @@
       }
       window._mapView.searchForLocations(q, (matches) => {
-        notifyNative("searchForLocations", {
+        notifyNative("onSearchForLocations", {
           callbackId,
           results: matches?.map(m => safeToJSON(m)) || []
         });
@@ -415,7 +833,7 @@
     globalThis.searchForCategories = (q, callbackId) => {
       if (!window._mapView?.searchForCategories) {
-        notifyNative("searchForCategories", {
+        notifyNative("onSearchForCategories", {
           callbackId,
           results: [],
           error: "Search method not available"
@@ -424,7 +842,7 @@
       }
       window._mapView.searchForCategories(q, (matches) => {
-        notifyNative("searchForCategories", {
+        notifyNative("onSearchForCategories", {
           callbackId,
           results: matches?.map(m => safeToJSON(m)) || []
         });
@@ -438,33 +856,53 @@
     globalThis.getRoute = (startID, goalID, waypoints = [], routeOptions) => {
       try {
         const routes = window.becomap.getRouteById(startID, goalID, waypoints, routeOptions);
-        notifyNative("getRoute", routes?.map(route => safeToJSON(route)) || []);
+        notifyNative("onGetRoute", routes?.map(route => safeToJSON(route)) || []);
       } catch (error) {
-        notifyNative("getRouteError", {
+        notifyNative("onError", {
           message: error.message,
-          timestamp: Date.now()
+          timestamp: Date.now(),
+          operation: "getRoute",
+          startID,
+          goalID,
+          waypoints,
+          routeOptions
         });
       }
     };
-    globalThis.showRoute = () => {
+    globalThis.showRoute = (segmentOrderIndex) => {
       executeWithErrorHandling(
-        () => window._mapView?.routeController?.showSavedRoute(),
-        "showRouteError"
+        () => {
+          const routeController = window._mapView?.routeController;
+          if (!routeController) return;
+          if (segmentOrderIndex !== undefined) {
+            routeController.showSegmentByOrderIndex(segmentOrderIndex);
+          } else {
+            const segments = routeController.segments;
+            if (segments && segments.length > 0) {
+              routeController.showRoute(segments);
+            }
+          }
+        },
+        "onError",
+        { operation: "showRoute", segmentOrderIndex }
       );
     };
     globalThis.showStep = (step) => {
       executeWithErrorHandling(
         () => window._mapView?.routeController?.showStepByOrderIndex(step),
-        "showStepError"
+        "onError",
+        { operation: "showStep", step }
       );
     };
     globalThis.clearAllRoutes = () => {
       executeWithErrorHandling(
         () => window._mapView?.routeController?.clearAllRoutes(),
-        "clearAllRoutesError"
+        "onError",
+        { operation: "clearAllRoutes" }
       );
     };
@@ -473,28 +911,180 @@
     // ============================================================================
     /**
-     * Cleanup function to be called when the webview is destroyed
+     * Enhanced cleanup function with proper resource management
      */
     globalThis.cleanup = () => {
-      clearMapViewEventListeners();
-      window._mapView = null;
-      window._site = null;
+      try {
+        console.log('Starting cleanup process...');
+        window._appState = 'destroyed';
+        // Clear event listeners
+        clearMapViewEventListeners();
+        // Clear operation queue
+        window._operationQueue = [];
+        window._isProcessingQueue = false;
+        // Reset bridge health
+        window._bridgeHealth = {
+          isConnected: false,
+          lastHeartbeat: null,
+          connectionAttempts: 0,
+          maxRetries: 3
+        };
+        // Cleanup map view
+        if (window._mapView && typeof window._mapView.destroy === 'function') {
+          window._mapView.destroy();
+        }
+        window._mapView = null;
+        // Clear site data
+        window._site = null;
+        // Clear any stored failed messages
+        try {
+          localStorage.removeItem('becomap_failed_messages');
+        } catch (e) {
+          console.warn('Failed to clear localStorage:', e);
+        }
+        console.log('Cleanup completed successfully');
+        // Final notification to native
+        notifyNative("onCleanupComplete", {
+          timestamp: Date.now(),
+          appState: window._appState
+        }, true); // Skip queue for final message
+      } catch (error) {
+        console.error('Error during cleanup:', error);
+        notifyNative("onError", {
+          message: error.message,
+          operation: "cleanup",
+          timestamp: Date.now()
+        }, true);
+      }
+    };
+    /**
+     * Application state management
+     */
+    globalThis.getAppState = () => {
+      const state = {
+        appState: window._appState,
+        bridgeHealth: { ...window._bridgeHealth },
+        queueLength: window._operationQueue.length,
+        hasMapView: !!window._mapView,
+        hasSite: !!window._site,
+        timestamp: Date.now()
+      };
+      notifyNative("onGetAppState", state);
+      return state;
+    };
+    /**
+     * Health check function for native to verify bridge connectivity
+     */
+    globalThis.healthCheck = () => {
+      const healthData = {
+        timestamp: Date.now(),
+        appState: window._appState,
+        bridgeConnected: isNativeBridgeAvailable(),
+        mapViewReady: !!window._mapView,
+        siteLoaded: !!window._site,
+        queueLength: window._operationQueue.length,
+        lastHeartbeat: window._bridgeHealth.lastHeartbeat
+      };
+      updateBridgeHealth(true); // Update heartbeat
+      notifyNative("onHealthCheck", healthData);
+      return healthData;
     };
+    /**
+     * Error recovery function
+     */
+    globalThis.recoverFromError = () => {
+      try {
+        console.log('Attempting error recovery...');
+        // Reset app state if in error
+        if (window._appState === 'error') {
+          window._appState = 'initializing';
+        }
+        // Clear failed operations
+        window._operationQueue = [];
+        window._isProcessingQueue = false;
+        // Reset bridge health
+        updateBridgeHealth(isNativeBridgeAvailable());
+        // Process any pending operations
+        processOperationQueue();
+        notifyNative("onErrorRecovery", {
+          timestamp: Date.now(),
+          appState: window._appState,
+          bridgeHealth: { ...window._bridgeHealth }
+        });
+        console.log('Error recovery completed');
+      } catch (error) {
+        console.error('Error during recovery:', error);
+        notifyNative("onError", {
+          message: error.message,
+          operation: "recoverFromError",
+          timestamp: Date.now()
+        });
+      }
+    };
+    /**
+     * Debug information function
+     */
+    globalThis.getDebugInfo = () => {
+      const debugInfo = {
+        timestamp: Date.now(),
+        appState: window._appState,
+        bridgeHealth: { ...window._bridgeHealth },
+        queueLength: window._operationQueue.length,
+        hasMapView: !!window._mapView,
+        hasSite: !!window._site,
+        eventListeners: window._eventListeners.size,
+        userAgent: navigator.userAgent,
+        url: window.location.href,
+        becomapLoaded: !!(window.becomap?.getSite && window.becomap?.getMapView),
+        containerExists: !!document.getElementById('mapContainer')
+      };
+      // Get failed messages from localStorage
+      try {
+        const failedMessages = JSON.parse(localStorage.getItem('becomap_failed_messages') || '[]');
+        debugInfo.failedMessagesCount = failedMessages.length;
+        debugInfo.lastFailedMessage = failedMessages[failedMessages.length - 1];
+      } catch (e) {
+        debugInfo.failedMessagesError = e.message;
+      }
+      notifyNative("onGetDebugInfo", debugInfo);
+      return debugInfo;
+    };
+    // Initialize bridge health monitoring
+    updateBridgeHealth(isNativeBridgeAvailable());
+    // Set up periodic health checks
+    setInterval(() => {
+      if (window._appState !== 'destroyed') {
+        updateBridgeHealth(isNativeBridgeAvailable());
+      }
+    }, 5000); // Check every 5 seconds
     // Export init function
-    globalThis.init = init;
-  </script>
-  <!-- <script>
-    const siteOptions = {
-      clientId: "c079dfa3a77dad13351cfacd95841c2c2780fe08",
-      clientSecret: "f62a59675b2a47ddb75f1f994d88e653",
-      siteIdentifier: "67dcf5dd2f21c64e3225254f"
-    };
-    window.addEventListener("DOMContentLoaded", () => {
-      init(siteOptions);
-    });
-  </script> -->
-</body>
-</html>
+    globalThis.init = init;</script>
+</body>