Refactor Application Insight integration

Author: Olesia Solonko

docker-compose.yml

@@ -41,7 +41,6 @@ services:
       - CONTAINER_HOST=0.0.0.0
       - CONTAINER_PORT=5000
       - PYGEOAPI_SERVER_URL=http://localhost:5000
-      #- APPLICATIONINSIGHTS_CONNECTION_STRING=InstrumentationKey=b4d987bc-1712-4026-aafb-f590fd854ab3;IngestionEndpoint=https://norwayeast-0.in.applicationinsights.azure.com/;LiveEndpoint=https://norwayeast.livediagnostics.monitor.azure.com/;ApplicationId=9fc4692c-7609-4abb-b547-49203ac14d4a
     profiles:
       - local
 
@@ -52,6 +51,7 @@ services:
       - "8080:80"
     environment:
       - API_BASE_URL=http://backend-local:5000
+      - APPLICATIONINSIGHTS_CONNECTION_STRING=InstrumentationKey=b4d987bc-1712-4026-aafb-f590fd854ab3;IngestionEndpoint=https://norwayeast-0.in.applicationinsights.azure.com/;LiveEndpoint=https://norwayeast.livediagnostics.monitor.azure.com/;ApplicationId=9fc4692c-7609-4abb-b547-49203ac14d4a
     depends_on:
       - backend-local
     profiles:

frontend/build.js

@@ -18,6 +18,13 @@ if (apiBaseUrl) {
   html = html.replace("</head>", `${scriptTag}\n</head>`);
 }
 
+// Add Application Insights connection string if available
+const appInsightsConnectionString = process.env.APPLICATIONINSIGHTS_CONNECTION_STRING || "";
+if (appInsightsConnectionString) {
+  const appInsightsScript = `<script>window.APPLICATIONINSIGHTS_CONNECTION_STRING = "${appInsightsConnectionString}";</script>`;
+  html = html.replace("</head>", `${appInsightsScript}\n</head>`);
+}
+
 const distHtmlPath = path.join(__dirname, "dist", "index.html");
 fs.writeFileSync(distHtmlPath, html);
 
@@ -27,3 +34,9 @@ const distJsDir = path.join(__dirname, "dist", "js");
 fs.readdirSync(srcJsDir).forEach((file) => {
   fs.copyFileSync(path.join(srcJsDir, file), path.join(distJsDir, file));
 });
+
+if (appInsightsConnectionString) {
+  console.log("Application Insights: Enabled");
+} else {
+  console.log("Application Insights: Disabled (no connection string provided)");
+}

frontend/src/index.html

@@ -17,6 +17,8 @@
   <!-- <script src="js/points-layer.js"></script> -->
   <!-- Add this to your index.html file, wherever your other script tags are located -->
   <!-- <script src="js/norway-hazard-tiles.js"></script> -->
+  <!-- Application Insights -->
+  <script src="js/appInsights.js"></script>
   <style>
     /* Reset and full screen layout */
     * {

frontend/src/js/appInsights.js

@@ -0,0 +1,99 @@
+(function() {
+    const connectionString = window.APPLICATIONINSIGHTS_CONNECTION_STRING;
+
+    if (!connectionString) {
+        return;
+    }
+
+    const script = document.createElement('script');
+    script.src = 'https://js.monitor.azure.com/scripts/b/ai.2.min.js';
+    script.async = true;
+
+    script.onload = function() {
+        const appInsights = new Microsoft.ApplicationInsights.ApplicationInsights({
+            config: {
+                connectionString: connectionString,
+                enableAutoRouteTracking: false,
+                disableExceptionTracking: true,
+                disableTelemetry: false,
+                samplingPercentage: 100
+            }
+        });
+
+        appInsights.loadAppInsights();
+
+        // Generate anonymous user ID for session tracking
+        const userId = sessionStorage.getItem('ai_user') || 
+                      'user_' + Math.random().toString(36).substring(2, 15);
+        sessionStorage.setItem('ai_user', userId);
+        appInsights.setAuthenticatedUserContext(userId);
+
+        // Collect comprehensive user statistics
+        const userStats = {
+            referrer: document.referrer || 'direct',
+            userAgent: navigator.userAgent,
+            language: navigator.language,
+            languages: navigator.languages ? navigator.languages.join(',') : '',
+            screenResolution: `${screen.width}x${screen.height}`,
+            colorDepth: screen.colorDepth,
+            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            platform: navigator.platform,
+            cookieEnabled: navigator.cookieEnabled,
+            onLine: navigator.onLine,
+            deviceMemory: navigator.deviceMemory || 'unknown',
+            connection: navigator.connection ? {
+                effectiveType: navigator.connection.effectiveType,
+                downlink: navigator.connection.downlink,
+                rtt: navigator.connection.rtt
+            } : 'unknown'
+        };
+
+        // Track page view with enhanced user statistics
+        appInsights.trackPageView({
+            name: 'Tsunami Map',
+            properties: userStats
+        });
+
+        // Track user location (with permission)
+        if (navigator.geolocation && 'geolocation' in navigator) {
+            navigator.geolocation.getCurrentPosition(
+                function(position) {
+                    // Track approximate location (country/region level for privacy)
+                    appInsights.trackEvent('UserLocation', {
+                        latitude: Math.round(position.coords.latitude * 10) / 10, // Rounded for privacy
+                        longitude: Math.round(position.coords.longitude * 10) / 10, // Rounded for privacy
+                        accuracy: position.coords.accuracy > 1000 ? 'low' : 'high'
+                    });
+                },
+                function(error) {
+                    // Track location access denied/failed
+                    appInsights.trackEvent('LocationAccessDenied', {
+                        error: error.message || 'unknown'
+                    });
+                },
+                { enableHighAccuracy: false, timeout: 5000, maximumAge: 300000 }
+            );
+        }
+
+        // Track map interactions
+        window.trackMapInteraction = function(action, properties) {
+            appInsights.trackEvent('MapInteraction', {
+                action: action,
+                ...properties,
+                timestamp: new Date().toISOString()
+            });
+        };
+
+        // Track session duration
+        let sessionStart = Date.now();
+        window.addEventListener('beforeunload', function() {
+            const sessionDuration = Math.round((Date.now() - sessionStart) / 1000);
+            appInsights.trackEvent('SessionEnd', {
+                durationSeconds: sessionDuration,
+                userId: userId
+            });
+        });
+    };
+
+    document.head.appendChild(script);
+})();