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

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

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();
+});