fix(dashboard): throttle expensive /api/history queries, abort stale requests, keep chart data on failure

Author: jmewing

api/static/index.html

@@ -422,6 +422,10 @@ <h3>Maintenance</h3>
 let battGaugesBuilt = false;
 const charts = {};
 const API = '';
+let historyAbort = null;
+let lastHistoryFetch = 0;
+const HISTORY_INTERVAL_MS = 30000;
+const FETCH_TIMEOUT_MS = 10000;
 
 // ── Formatters ──
 function fmt(n, d=1) { if (n == null) return '—'; return Number(n).toFixed(d); }
@@ -978,32 +982,51 @@ <h3>Maintenance</h3>
   }
 }
 
+async function fetchJson(url) {
+  const res = await fetch(url, { signal: AbortSignal.timeout(FETCH_TIMEOUT_MS) });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
 // ── Data fetching ──
 async function refresh() {
   try {
-    // Use WebSocket summary if connected, otherwise fall back to HTTP
+    // Live summary every interval (WebSocket preferred, HTTP fallback)
     if (!window._wsConnected) {
-      const statusRes = await fetch(API + '/api/summary');
-      applySummary(await statusRes.json());
+      const status = await fetchJson(API + '/api/summary');
+      applySummary(status);
     }
+  } catch (e) {
+    console.error('Summary refresh failed:', e);
+  }
 
-    // Fetch history in parallel (slower) for charts
-    const fetches = [
-      fetch(API + `/api/history?minutes=${overviewChartRange}&fields=pv1_power,pv2_power,charge_power,discharge_power,grid_import_power,grid_export_power,soc,battery_voltage,battery_current,eps_power,temp_inverter,temp_battery,temp_radiator_1`)
-    ];
-    if (currentTab === 'charts') {
-      fetches.push(fetch(API + `/api/history?minutes=${chartRange}&fields=pv1_power,pv2_power,charge_power,discharge_power,grid_import_power,grid_export_power,soc,battery_voltage,battery_current,eps_power,temp_inverter,temp_battery,temp_radiator_1`));
-    }
+  // History queries are expensive on a Pi; only run every 30 s unless forced.
+  const now = Date.now();
+  if (now - lastHistoryFetch < HISTORY_INTERVAL_MS) return;
+  if (historyAbort) historyAbort.abort();
+  historyAbort = new AbortController();
+  lastHistoryFetch = now;
 
-    const results = await Promise.all(fetches);
-    const overviewHistory = await results[0].json();
+  try {
+    const overviewHistory = await fetchJson(
+      API + `/api/history?minutes=${overviewChartRange}&fields=pv1_power,pv2_power,charge_power,discharge_power,grid_import_power,grid_export_power,soc,battery_voltage,battery_current,eps_power,temp_inverter,temp_battery,temp_radiator_1`
+    );
     renderOverviewChart(overviewHistory);
+  } catch (e) {
+    console.error('Overview history failed:', e);
+    // Keep existing chart data on failure so the graph doesn't blank out.
+  }
 
-    if (currentTab === 'charts' && results[1]) {
-      const chartsHistory = await results[1].json();
+  if (currentTab === 'charts') {
+    try {
+      const chartsHistory = await fetchJson(
+        API + `/api/history?minutes=${chartRange}&fields=pv1_power,pv2_power,charge_power,discharge_power,grid_import_power,grid_export_power,soc,battery_voltage,battery_current,eps_power,temp_inverter,temp_battery,temp_radiator_1`
+      );
       renderCharts(chartsHistory);
+    } catch (e) {
+      console.error('Charts history failed:', e);
     }
-  } catch(e) { console.error('Refresh failed:', e); }
+  }
 }
 
 // ── Settings fetch (for gauge max values) ──
@@ -1028,6 +1051,7 @@ <h3>Maintenance</h3>
     currentTab = tab.dataset.tab;
     document.getElementById('tab-' + currentTab).classList.add('active');
     if (currentTab === 'totals') loadEnergyHistory('daily', 14);
+    lastHistoryFetch = 0;
     refresh();
   });
 });
@@ -1038,6 +1062,7 @@ <h3>Maintenance</h3>
     document.querySelectorAll('#chartTimeRange .time-btn').forEach(b => b.classList.remove('active'));
     btn.classList.add('active');
     chartRange = parseInt(btn.dataset.min);
+    lastHistoryFetch = 0;
     refresh();
   });
 });
@@ -1048,6 +1073,7 @@ <h3>Maintenance</h3>
     document.querySelectorAll('#overviewTimeRange .time-btn').forEach(b => b.classList.remove('active'));
     btn.classList.add('active');
     overviewChartRange = parseInt(btn.dataset.min);
+    lastHistoryFetch = 0;
     refresh();
   });
 });