Refactor Application Insight integration in frontend (#41)

Co-authored-by: Olesia Solonko <[email protected]>

Author: solonkoolesya

docker-compose.yml

@@ -22,6 +22,7 @@ services:
       - "8080:80"
     environment:
       - API_BASE_URL=${API_BASE_URL:-http://backend: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
 

frontend/Dockerfile

@@ -2,6 +2,7 @@ FROM node:24-alpine AS build
 WORKDIR /app
 COPY package.json package-lock.json ./
 COPY build.js ./
+RUN npm install
 RUN npm ci
 COPY src ./src
 
@@ -13,4 +14,9 @@ RUN npm run build
 FROM nginx:1.29-alpine
 WORKDIR /usr/share/nginx/html
 COPY --from=build /app/dist/ ./
+COPY docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh
+
+ENTRYPOINT ["/docker-entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]
 EXPOSE 80

frontend/build.js

@@ -18,13 +18,6 @@ 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);
 
@@ -34,9 +27,3 @@ 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/docker-entrypoint.sh

@@ -0,0 +1,13 @@
+#!/bin/sh
+set -e
+
+# Replace placeholder with runtime environment variable
+if [ -n "$APPLICATIONINSIGHTS_CONNECTION_STRING" ]; then
+  echo "Injecting Application Insights connection string..."
+  sed -i "s|__APPINSIGHTS_CONN__|$APPLICATIONINSIGHTS_CONNECTION_STRING|g" /usr/share/nginx/html/index.html
+else
+  echo "No APPLICATIONINSIGHTS_CONNECTION_STRING provided!"
+fi
+
+# Start nginx
+exec "$@"

frontend/package.json

@@ -13,5 +13,8 @@
   "type": "commonjs",
   "devDependencies": {
     "prettier": "^2.8.8"
+  },
+  "dependencies": {
+    "@microsoft/applicationinsights-web": "^3.0.0"
   }
 }

frontend/src/index.html

@@ -5,6 +5,12 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
+    <!-- Application Insights -->
+  <script>
+      window.APPLICATIONINSIGHTS_CONNECTION_STRING = "__APPINSIGHTS_CONN__";
+  </script>
+  <script src="https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js"></script>
+  <script src="js/appInsights.js"></script>
   <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
   <!-- Base map configuration -->
@@ -17,8 +23,6 @@
   <!-- <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

@@ -1,112 +1,16 @@
-(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') ||
-            (function() {
-                // Prefer cryptographically secure random values
-                let randStr = '';
-                if (window.crypto && window.crypto.getRandomValues) {
-                    // Generate 16 random bytes, then encode as hex
-                    const buf = new Uint8Array(16);
-                    window.crypto.getRandomValues(buf);
-                    randStr = Array.from(buf, b => b.toString(16).padStart(2, '0')).join('');
-                } else {
-                    // Fallback if crypto not supported (rare): use Math.random, but warn
-                    randStr = Math.random().toString(36).substring(2, 15);
-                }
-                return 'user_' + randStr;
-            })();
-        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);
-})();
+const appInsights = new Microsoft.ApplicationInsights.ApplicationInsights({
+  config: {
+    connectionString: window.APPLICATIONINSIGHTS_CONNECTION_STRING,
+    enableAutoRouteTracking: true
+  }
+});
+appInsights.loadAppInsights();
+appInsights.trackPageView();
+
+window.appInsights = appInsights;
+
+// Example custom event
+appInsights.trackEvent({
+  name: "Tsunami Map",
+  properties: userStats
+});