RD-T39 Fixing up countly and sentry. Map icon fix for web. OB update.

Author: ucswift

src/app/(app)/_layout.tsx

@@ -32,6 +32,7 @@ import { useCallsStore } from '@/stores/calls/store';
 import useLockscreenStore from '@/stores/lockscreen/store';
 import { useRolesStore } from '@/stores/roles/store';
 import { securityStore } from '@/stores/security/store';
+import { useSignalRStore } from '@/stores/signalr/signalr-store';
 
 export default function TabLayout() {
   const { t } = useTranslation();
@@ -110,22 +111,57 @@ export default function TabLayout() {
       const initTimeout = new Promise((_, reject) => setTimeout(() => reject(new Error('Initialization timeout after 30 seconds')), 30000));
 
       const initPromise = (async () => {
+        // Step 1: Initialize core store (fetches config)
         await useCoreStore.getState().init();
 
         logger.info({
-          message: 'Core store initialized, initializing calls store',
+          message: 'Core store initialized, fetching full config for SignalR',
           context: { platform: Platform.OS },
         });
 
+        // Step 2: Fetch the full config (needed for SignalR EventingUrl)
+        await useCoreStore.getState().fetchConfig();
+
+        logger.info({
+          message: 'Config fetched, initializing calls store',
+          context: { platform: Platform.OS },
+        });
+
+        // Step 3: Initialize calls store
         await useCallsStore.getState().init();
 
         logger.info({
           message: 'Calls store initialized, getting security rights',
           context: { platform: Platform.OS },
         });
 
+        // Step 4: Get security rights (needed for department ID)
         await securityStore.getState().getRights();
 
+        logger.info({
+          message: 'Security rights loaded, connecting SignalR hubs',
+          context: { platform: Platform.OS },
+        });
+
+        // Step 5: Connect SignalR hubs after all core data is loaded
+        const signalRStore = useSignalRStore.getState();
+        try {
+          await Promise.all([
+            signalRStore.connectUpdateHub(),
+            signalRStore.connectGeolocationHub(),
+          ]);
+          logger.info({
+            message: 'SignalR hubs connected successfully',
+            context: { platform: Platform.OS },
+          });
+        } catch (signalRError) {
+          // Log SignalR connection errors but don't fail initialization
+          logger.error({
+            message: 'Failed to connect SignalR hubs during initialization',
+            context: { error: signalRError, platform: Platform.OS },
+          });
+        }
+
         hasInitialized.current = true;
 
         logger.info({

src/app/(app)/home.web.tsx

@@ -1,6 +1,6 @@
 import { useFocusEffect } from '@react-navigation/native';
 import { type Href, router } from 'expo-router';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
 
@@ -21,7 +21,7 @@ import { useDispatchConsoleStore } from '@/stores/dispatch/dispatch-console-stor
 import { useHomeStore } from '@/stores/home/home-store';
 import { useNotesStore } from '@/stores/notes/store';
 import { usePersonnelStore } from '@/stores/personnel/store';
-import { useSignalRStore } from '@/stores/signalr/signalr-store';
+import { type SignalREventType, useSignalRStore } from '@/stores/signalr/signalr-store';
 import { useUnitsStore } from '@/stores/units/store';
 
 export default function DispatchConsoleWeb() {
@@ -38,7 +38,15 @@ export default function DispatchConsoleWeb() {
   const { units, isLoading: unitsLoading, fetchUnits } = useUnitsStore();
   const { personnel, isLoading: personnelLoading, fetchPersonnel } = usePersonnelStore();
   const { notes, isLoading: notesLoading, fetchNotes } = useNotesStore();
-  const { lastUpdateTimestamp } = useSignalRStore();
+
+  // SignalR store - subscribe to specific event timestamps
+  const {
+    lastEventType,
+    lastPersonnelUpdateTimestamp,
+    lastUnitsUpdateTimestamp,
+    lastCallsUpdateTimestamp,
+    isUpdateHubConnected,
+  } = useSignalRStore();
 
   // Dispatch console store
   const {
@@ -71,6 +79,11 @@ export default function DispatchConsoleWeb() {
   const [currentTime, setCurrentTime] = useState(new Date().toLocaleTimeString('en-US', { hour12: false }));
   const [isAddingNote, setIsAddingNote] = useState(false);
 
+  // Track previous timestamps to detect changes
+  const prevPersonnelTimestamp = useRef(0);
+  const prevUnitsTimestamp = useRef(0);
+  const prevCallsTimestamp = useRef(0);
+
   // Update time every second
   useEffect(() => {
     const timer = setInterval(() => {
@@ -123,21 +136,107 @@ export default function DispatchConsoleWeb() {
     }, [trackEvent, isLandscape, isTablet])
   );
 
-  // Listen for SignalR updates and refresh data
+  // Helper function to get event description for activity log
+  const getEventDescription = (eventType: SignalREventType | null): string => {
+    switch (eventType) {
+      case 'personnelStatusUpdated':
+        return t('dispatch.personnel_status_updated');
+      case 'personnelStaffingUpdated':
+        return t('dispatch.personnel_staffing_updated');
+      case 'unitStatusUpdated':
+        return t('dispatch.unit_status_updated');
+      case 'callsUpdated':
+        return t('dispatch.calls_updated');
+      case 'callAdded':
+        return t('dispatch.call_added');
+      case 'callClosed':
+        return t('dispatch.call_closed');
+      default:
+        return t('dispatch.data_refreshed');
+    }
+  };
+
+  // Listen for SignalR personnel updates
   useEffect(() => {
-    if (lastUpdateTimestamp > 0) {
+    if (lastPersonnelUpdateTimestamp > 0 && lastPersonnelUpdateTimestamp !== prevPersonnelTimestamp.current) {
+      prevPersonnelTimestamp.current = lastPersonnelUpdateTimestamp;
+
+      logger.info({
+        message: 'SignalR: Personnel update received, refreshing personnel data',
+        context: { eventType: lastEventType, timestamp: lastPersonnelUpdateTimestamp },
+      });
+
       addActivityLogEntry({
-        type: 'system',
-        action: t('dispatch.system_update'),
-        description: t('dispatch.data_refreshed'),
+        type: 'personnel',
+        action: t('dispatch.signalr_update'),
+        description: getEventDescription(lastEventType),
       });
 
-      fetchCalls();
-      fetchUnits();
       fetchPersonnel();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastUpdateTimestamp]);
+  }, [lastPersonnelUpdateTimestamp]);
+
+  // Listen for SignalR units updates
+  useEffect(() => {
+    if (lastUnitsUpdateTimestamp > 0 && lastUnitsUpdateTimestamp !== prevUnitsTimestamp.current) {
+      prevUnitsTimestamp.current = lastUnitsUpdateTimestamp;
+
+      logger.info({
+        message: 'SignalR: Units update received, refreshing units data',
+        context: { eventType: lastEventType, timestamp: lastUnitsUpdateTimestamp },
+      });
+
+      addActivityLogEntry({
+        type: 'unit',
+        action: t('dispatch.signalr_update'),
+        description: getEventDescription(lastEventType),
+      });
+
+      fetchUnits();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastUnitsUpdateTimestamp]);
+
+  // Listen for SignalR calls updates
+  useEffect(() => {
+    if (lastCallsUpdateTimestamp > 0 && lastCallsUpdateTimestamp !== prevCallsTimestamp.current) {
+      prevCallsTimestamp.current = lastCallsUpdateTimestamp;
+
+      logger.info({
+        message: 'SignalR: Calls update received, refreshing calls data',
+        context: { eventType: lastEventType, timestamp: lastCallsUpdateTimestamp },
+      });
+
+      addActivityLogEntry({
+        type: 'call',
+        action: t('dispatch.signalr_update'),
+        description: getEventDescription(lastEventType),
+      });
+
+      fetchCalls();
+      // Also refresh notes if we have a selected call (call data may have changed)
+      if (selectedCallId) {
+        fetchNotes();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastCallsUpdateTimestamp]);
+
+  // Log when SignalR hub connection status changes
+  useEffect(() => {
+    if (isUpdateHubConnected) {
+      logger.info({
+        message: 'SignalR Update Hub connected - dispatch console ready for real-time updates',
+      });
+      addActivityLogEntry({
+        type: 'system',
+        action: t('dispatch.signalr_connected'),
+        description: t('dispatch.realtime_updates_active'),
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isUpdateHubConnected]);
 
   // Fetch call extra data and notes when filter is active
   useEffect(() => {

src/app/(app)/map.web.tsx

@@ -8,7 +8,7 @@ import { Modal, Pressable, ScrollView, StyleSheet, Switch, Text, TouchableOpacit
 
 import { getMapDataAndMarkers } from '@/api/mapping/mapping';
 import { FocusAwareStatusBar } from '@/components/ui/focus-aware-status-bar';
-import { MAP_ICONS } from '@/constants/map-icons';
+import { getMapIconWebUrl, MAP_ICONS } from '@/constants/map-icons';
 import { useAnalytics } from '@/hooks/use-analytics';
 import { MapLayerType, useMapLayers } from '@/hooks/use-map-layers';
 import { Env } from '@/lib/env';
@@ -196,18 +196,18 @@ export default function MapWeb() {
       const iconKey = (pin.ImagePath?.toLowerCase() || 'call') as MapIconKey;
       const iconData = MAP_ICONS[iconKey] || MAP_ICONS['call'];
 
-      if (iconData) {
-        const img = document.createElement('img');
-        // For web, we need to handle the require() differently
-        // The iconData.uri is a require() result, which in web context is a module
-        const imgSrc = typeof iconData.uri === 'object' && 'default' in iconData.uri ? (iconData.uri as { default: string }).default : typeof iconData.uri === 'string' ? iconData.uri : `/mapping/${iconData.imgName}.png`;
-        img.src = imgSrc;
-        img.style.width = '32px';
-        img.style.height = '32px';
-        img.style.objectFit = 'contain';
-        img.alt = pin.Title;
-        iconContainer.appendChild(img);
-      }
+      const img = document.createElement('img');
+      const imgSrc = getMapIconWebUrl(iconData);
+      img.src = imgSrc;
+      img.style.width = '32px';
+      img.style.height = '32px';
+      img.style.objectFit = 'contain';
+      img.alt = pin.Title;
+      img.onerror = () => {
+        // Fallback to call icon if image fails to load
+        img.src = getMapIconWebUrl(MAP_ICONS['call']);
+      };
+      iconContainer.appendChild(img);
 
       el.appendChild(iconContainer);
 

src/app/_layout.tsx

@@ -43,39 +43,63 @@ const navigationIntegration = Sentry.reactNavigationIntegration({
   enableTimeToInitialDisplay: false,
 });
 
-Sentry.init({
-  dsn: Env.SENTRY_DSN,
-  debug: __DEV__, // Only debug in development, not production
-  tracesSampleRate: __DEV__ ? 1.0 : 0.2, // 100% in dev, 20% in production to reduce performance impact
-  profilesSampleRate: __DEV__ ? 1.0 : 0.2, // 100% in dev, 20% in production to reduce performance impact
-  sendDefaultPii: false,
-  integrations: [
-    // Pass integration
-    navigationIntegration,
-    // Disable HTTP instrumentation on web platform due to hanging issues
+// Only initialize Sentry if a DSN is provided
+if (Env.SENTRY_DSN) {
+  Sentry.init({
+    dsn: Env.SENTRY_DSN,
+    debug: __DEV__, // Only debug in development, not production
+    tracesSampleRate: __DEV__ ? 1.0 : 0.2, // 100% in dev, 20% in production to reduce performance impact
+    profilesSampleRate: __DEV__ ? 1.0 : 0.2, // 100% in dev, 20% in production to reduce performance impact
+    sendDefaultPii: false,
+    // Add release and environment information
+    release: Env.VERSION,
+    environment: Env.APP_ENV || (__DEV__ ? 'development' : 'production'),
+    // Add platform as a tag
+    initialScope: {
+      tags: {
+        platform: Platform.OS,
+      },
+    },
+    integrations: [
+      // Pass integration
+      navigationIntegration,
+      // Disable HTTP instrumentation on web platform due to hanging issues
+      ...(Platform.OS === 'web'
+        ? []
+        : [
+            // Add other integrations here for native platforms if needed
+          ]),
+    ],
+    enableNativeFramesTracking: Platform.OS !== 'web', // Only enable native frames tracking on native platforms
+    // Disable auto-instrumentation on web to prevent fetch/xhr blocking
     ...(Platform.OS === 'web'
-      ? []
-      : [
-          // Add other integrations here for native platforms if needed
-        ]),
-  ],
-  enableNativeFramesTracking: true, //!isRunningInExpoGo(), // Tracks slow and frozen frames in the application
-  // Disable auto-instrumentation on web to prevent fetch/xhr blocking
-  ...(Platform.OS === 'web'
-    ? {
-        enableAutoPerformanceTracing: false,
-        enableAutoSessionTracking: false,
+      ? {
+          enableAutoPerformanceTracing: false,
+          enableAutoSessionTracking: false,
+        }
+      : {}),
+    // Add additional options to prevent timing issues
+    beforeSendTransaction(event: any) {
+      // Filter out problematic navigation transactions that might cause timestamp errors
+      if (event.contexts?.trace?.op === 'navigation' && !event.contexts?.trace?.data?.route) {
+        return null;
       }
-    : {}),
-  // Add additional options to prevent timing issues
-  beforeSendTransaction(event: any) {
-    // Filter out problematic navigation transactions that might cause timestamp errors
-    if (event.contexts?.trace?.op === 'navigation' && !event.contexts?.trace?.data?.route) {
-      return null;
-    }
-    return event;
-  },
-});
+      return event;
+    },
+    beforeSend(event, hint) {
+      // Add additional context for web platform
+      if (Platform.OS === 'web') {
+        event.tags = {
+          ...event.tags,
+          'user_agent': typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown',
+        };
+      }
+      return event;
+    },
+  });
+} else if (__DEV__) {
+  console.log('Sentry DSN not configured - error tracking disabled');
+}
 
 // Initialize LiveKit for the current platform
 //initializeLiveKitForPlatform();

src/app/onboarding.tsx

@@ -23,18 +23,18 @@ type OnboardingItemProps = {
 
 const onboardingData: OnboardingItemProps[] = [
   {
-    title: 'Resgrid Dispatch',
-    description: "Track your unit's location and status in real-time with our advanced mapping and AVL system",
+    title: 'Command Your Operations',
+    description: 'Create, dispatch, and manage emergency calls with a powerful mobile command center at your fingertips',
     icon: <MapPin size={80} color="#FF7B1A" />,
   },
   {
-    title: 'Instant Notifications',
-    description: 'Receive immediate alerts for emergencies and important updates from your department',
+    title: 'Real-Time Situational Awareness',
+    description: 'Track all units, personnel, and resources on an interactive map with live status updates and AVL',
     icon: <Bell size={80} color="#FF7B1A" />,
   },
   {
-    title: 'Interact with Calls',
-    description: 'Seamlessly view call information and interact with your team members for efficient emergency response',
+    title: 'Seamless Coordination',
+    description: 'Communicate instantly with field units, update call statuses, and coordinate response efforts from anywhere',
     icon: <Users size={80} color="#FF7B1A" />,
   },
 ];