Додан моніторінг застосунку

Додани веб компоненти карточок територій та повідомлень

web/lib/components/cloud.js

@@ -9,11 +9,13 @@ const Cloud = {
         Cloud.status = 'sync';
         const uuid = localStorage.getItem("uuid");
 
+        if(!navigator.onLine) alert("[APP] Інтернет з'єднання відсутнє!")
+
         if (Cloud.socket && Cloud.socket.readyState <= 1) return;
 
         const ws = new WebSocket(CONFIG.wss, uuid);
         Cloud.socket = ws;
- 
+
         ws.onopen = () => {
             console.log("[WebSocket] З'єднання встановлено");
             Cloud.status = 'ok';
@@ -25,10 +27,10 @@ const Cloud = {
                 }
             }));
 
-            if(Cloud.reconnecting == true) {
-                Router.navigate(location.pathname);
+            if (Cloud.reconnecting == true) {
+                Cloud.reconnect();
             }
-            
+
             Cloud.reconnecting = true;
             Cloud.reconnectAttempts = 0;
             clearTimeout(Cloud.reconnectTimeout);
@@ -37,7 +39,7 @@ const Cloud = {
         ws.onmessage = (e) => {
             const data = JSON.parse(e.data);
             if (data.event === 'user_connected' && data.user.id !== USER.id) {
-                console.log(`Новий користувач: ${data.user.name}`);
+                console.log(`[WebSocket] Новий користувач: ${data.user.name}`);
             }
             if (data.event === 'message') {
                 switch (data.type) {
@@ -54,7 +56,7 @@ const Cloud = {
                     case "stand_update":
                         Stand_card.cloud.update(data);
                         break;
-                
+
                     default:
                         break;
                 }
@@ -65,7 +67,7 @@ const Cloud = {
             console.warn("[WebSocket] З'єднання розірвано");
             Cloud.status = 'err';
 
-            if (!Cloud.reconnecting) return; // защита от дублирования
+            if (!Cloud.reconnecting) return; // захист від дублювання
 
             if (Cloud.reconnectAttempts < 5) {
                 Cloud.reconnectAttempts++;
@@ -73,7 +75,7 @@ const Cloud = {
 
                 Cloud.reconnectTimeout = setTimeout(() => {
                     Cloud.start();
-                }, 1000);
+                }, 500);
             } else {
                 Cloud.reconnecting = false;
 
@@ -90,6 +92,19 @@ const Cloud = {
         ws.onerror = (err) => {
             console.error("[WebSocket] Помилка", err);
             Cloud.status = 'err';
+            ws.close();
         };
     },
+
+    async reconnect(){
+        switch (page) {
+            case "Territory_card":
+                Territory_card.reload();
+                break;
+        
+            default:
+                Router.navigate(location.pathname);
+                break;
+        }
+    }
 }

web/lib/components/metrics.js

@@ -0,0 +1,56 @@
+let mws;
+const RECONNECT_INTERVAL = 3000;
+let isConnectedMetrics = false;
+
+function setupFrontendMetrics() {
+    console.log("[Metrics] Спроба підключення до метрик...");
+    mws = new WebSocket(CONFIG.metrics);
+
+    mws.onopen = () => {
+        console.log("[Metrics] З'єднання встановлено");
+        isConnectedMetrics = true;
+
+        // Відправляємо один раз навігацію та ресурси
+        sendMetrics();
+    };
+
+    mws.onclose = () => {
+        console.warn("[Metrics] З'єднання розірвано");
+        console.log(`[Metrics] Спроба перепідключення`);
+        isConnectedMetrics = false;
+        // Спроба перепідключення через заданий інтервал
+        setTimeout(setupFrontendMetrics, RECONNECT_INTERVAL);
+    };
+
+    mws.onerror = (err) => {
+        console.error("[Metrics] Помилка", err);
+        mws.close(); // Примусово закриваємо для запуску логіки перепідключення
+    };
+}
+
+async function sendMetrics() {
+    if (isConnectedMetrics) {
+        const perf = performance;
+        
+        const payload = {
+            type: "frontend_metrics",
+            memory: perf.memory || null,
+            resources: perf.getEntriesByType("resource").slice(0, 500),
+            id: USER.id
+        };
+        mws.send(JSON.stringify(payload));
+    }
+}
+
+window.addEventListener('popstate', () => {
+    console.log("[Metrics] Запуск sendMetrics після popstate");
+    sendMetrics();
+});
+
+window.addEventListener('click', (e) => {
+    const target = e.target.closest('[data-route]');
+    if (!target || !target.href) return;
+
+    console.log("[Metrics] Запуск sendMetrics після click");
+    sendMetrics();
+});

web/lib/components/webPush.js

@@ -2,7 +2,7 @@
 const webPush = {
     async init() {
         if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
-            console.error('Push повідомлення не підтримуються');
+            console.error('[WebPush] Push повідомлення не підтримуються');
             return;
         }
 
@@ -37,7 +37,7 @@ const webPush = {
                 // Запитуємо дозвіл
                 const permission = await Notification.requestPermission();
                 if (permission !== 'granted') {
-                    console.warn('Push повідомлення заборонено користувачем');
+                    console.warn('[WebPush] Push повідомлення заборонено користувачем');
                     return;
                 }
 
@@ -63,15 +63,15 @@ const webPush = {
                     body: JSON.stringify({ subscription, device: deviceInfo })
                 });
 
-                console.log('Push підписка готова:', subscription);
+                console.log('[WebPush] Push підписка готова:', subscription);
 
-                console.log('Створено нову підписку');
+                console.log('[WebPush] Створено нову підписку');
             } else {
-                console.log('Підписка вже існує');
+                console.log('[WebPush] Підписка вже існує');
             }
 
         } catch (err) {
-            console.error('Помилка ініціалізації push:', err);
+            console.error('[WebPush] Помилка ініціалізації push:', err);
         }
     },
 
@@ -85,7 +85,7 @@ const webPush = {
             const success = await subscription.unsubscribe();
 
             if (success) {
-                console.log("Локальна підписка скасована");
+                console.log("[WebPush] Локальна підписка скасована");
 
                 // повідомляємо сервер
                 await fetch(`${CONFIG.api}push//unsubscribe`, {
@@ -98,7 +98,7 @@ const webPush = {
                 });
             }
         } else {
-            console.log("Підписки немає");
+            console.log("[WebPush] Підписки немає");
         }
     }
 }