Neighbor Graph
@@ -3243,10 +3323,12 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet try { graphData = await api('/analytics/neighbor-graph' + sep + (sep ? '&' : '?') + 'min_count=1&min_score=0', { ttl: CLIENT_TTL.analyticsRF }); } catch (e) { + if (!isCurrent()) return; el.innerHTML = `Failed to load neighbor graph: ${esc(e.message)}
Loading prefix data…
';
const rq = RegionFilter.regionQueryString() + AreaFilter.areaQueryString();
@@ -3723,10 +3807,12 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
api('/analytics/hash-sizes' + rq, { ttl: CLIENT_TTL.analyticsRF }).catch(() => null),
]);
} catch (e) {
+ if (!isCurrent()) return;
el.innerHTML = `Failed to load: ${esc(e.message)}
`;
return;
}
+ if (!isCurrent()) return;
// Deduplicate by public_key, require at least 6 hex chars to build all 3 tiers
const nodeMap = new Map();
(nodesResp.nodes || nodesResp).forEach(n => {
@@ -4179,10 +4265,10 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
// Auto-run from URL params
if (initPrefix) {
doCheck(initPrefix);
- setTimeout(() => { document.getElementById('ptChecker')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 150);
+ setTimeout(() => { if (isCurrent()) document.getElementById('ptChecker')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 150);
} else if (initGenerate) {
doGenerate();
- setTimeout(() => { document.getElementById('ptGenerator')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 150);
+ setTimeout(() => { if (isCurrent()) document.getElementById('ptGenerator')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 150);
}
}
@@ -4218,6 +4304,7 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
}
async function renderRFHealthTab(el) {
+ const isCurrent = analyticsGuard();
// Restore state from URL
const hashParams = new URLSearchParams((location.hash.split('?')[1] || ''));
if (hashParams.get('range')) _rfHealthState.range = hashParams.get('range');
@@ -4255,8 +4342,11 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
// Range button handlers
el.querySelectorAll('.rf-range-btn[data-range]').forEach(btn => {
btn.addEventListener('click', () => {
+ if (!isCurrent()) return;
const range = btn.dataset.range;
_rfHealthState.range = range;
+ _analyticsRequests.delete(document.getElementById('rfHealthGrid'));
+ _analyticsRequests.delete(document.getElementById('rfHealthDetail'));
el.querySelectorAll('.rf-range-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const customInputs = el.querySelector('.rf-custom-inputs');
@@ -4271,6 +4361,7 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
const applyBtn = document.getElementById('rfCustomApply');
if (applyBtn) {
applyBtn.addEventListener('click', () => {
+ if (!isCurrent()) return;
_rfHealthState.customFrom = document.getElementById('rfFrom').value;
_rfHealthState.customTo = document.getElementById('rfTo').value;
rfHealthUpdateHash();
@@ -4284,12 +4375,17 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
async function loadRFHealthData(el) {
const grid = document.getElementById('rfHealthGrid');
const detail = document.getElementById('rfHealthDetail');
+ const isCurrent = analyticsGuard(grid);
+ // A range change invalidates any detail already in flight, even while
+ // its new summary is still loading or no longer contains that observer.
+ if (detail) _analyticsRequests.delete(detail);
try {
// Compute window string for summary endpoint
const windowMap = { '1h':'1h', '3h':'3h', '6h':'6h', '12h':'12h', '24h':'24h', '3d':'3d', '7d':'7d', '30d':'30d' };
const window = windowMap[_rfHealthState.range] || '24h';
const summaryData = await api('/observers/metrics/summary?window=' + window + (RegionFilter.regionQueryString() || ''));
+ if (!isCurrent()) return;
const observers = summaryData.observers || [];
// Filter to observers with sufficient sparkline data (≥2 non-null noise_floor values)
@@ -4337,6 +4433,7 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
// Click handler for cells
grid.querySelectorAll('.rf-cell').forEach(cell => {
cell.addEventListener('click', () => {
+ if (!isCurrent()) return;
const obsId = cell.dataset.observer;
grid.querySelectorAll('.rf-cell').forEach(c => c.classList.remove('rf-cell-selected'));
cell.classList.add('rf-cell-selected');
@@ -4367,17 +4464,21 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
}
}
} catch (e) {
+ if (!isCurrent()) return;
grid.innerHTML = `Failed to load RF health data: ${esc(e.message)}
`;
}
}
async function loadRFSparkline(observerId) {
+ const container = document.getElementById(`rf-spark-${observerId}`);
+ if (!container) return;
+ const isCurrent = analyticsGuard(container);
const { since, until } = rfHealthTimeRangeToParams(_rfHealthState.range, _rfHealthState.customFrom, _rfHealthState.customTo);
try {
const data = await api(`/observers/${observerId}/metrics?since=${encodeURIComponent(since)}&until=${encodeURIComponent(until)}`);
+ if (!isCurrent()) return;
const metrics = data.metrics || [];
const nfValues = metrics.map(m => m.noise_floor).filter(v => v != null);
- const container = document.getElementById(`rf-spark-${observerId}`);
if (container && nfValues.length > 1) {
container.innerHTML = rfNFSparkline(nfValues, 140, 24);
} else if (container) {
@@ -4412,6 +4513,7 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
}
async function loadRFHealthDetail(observerId, container) {
+ const isCurrent = analyticsGuard(container);
container.classList.remove('rf-panel-empty');
container.innerHTML = 'Loading detail…
';
@@ -4423,6 +4525,7 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
try {
const data = await api(`/observers/${observerId}/metrics?since=${encodeURIComponent(since)}&until=${encodeURIComponent(until)}&resolution=${resolution}`);
+ if (!isCurrent()) return;
const metrics = data.metrics || [];
const reboots = (data.reboots || []).map(r => new Date(r).getTime());
const name = data.observer_name || observerId.substring(0, 8);
@@ -4472,6 +4575,7 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
// Close button
container.querySelector('.rf-detail-close').addEventListener('click', () => {
+ _analyticsRequests.delete(container);
container.classList.add('rf-panel-empty');
container.innerHTML = 'Select an observer to view details';
_rfHealthState.selectedObserver = null;
@@ -4516,6 +4620,7 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
}
}
} catch (e) {
+ if (!isCurrent()) return;
container.innerHTML = `Failed to load detail: ${esc(e.message)}
`;
}
}
@@ -4845,10 +4950,12 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
// #690 — Clock Health fleet view (M3)
async function renderClockHealthTab(el) {
+ const isCurrent = analyticsGuard(el);
el.innerHTML = 'Loading clock health data…
';
try {
const aqs = AreaFilter.areaQueryString();
var data = await (await fetch('/api/nodes/clock-skew' + (aqs ? '?' + aqs.slice(1) : ''))).json();
+ if (!isCurrent()) return;
if (!Array.isArray(data) || !data.length) {
el.innerHTML = 'No clock skew data available. Nodes need recent adverts for clock analysis.
';
return;
@@ -4947,6 +5054,7 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
render();
} catch (err) {
+ if (!isCurrent()) return;
el.innerHTML = 'Failed to load clock health data: ' + esc(String(err)) + '
';
}
}
@@ -4980,6 +5088,7 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
}
async function renderScopesTab(el) {
+ const isCurrent = analyticsGuard();
var winKey = 'scopes_window';
var selectedWindow = (typeof sessionStorage !== 'undefined' && sessionStorage.getItem(winKey)) || '24h';
@@ -5004,28 +5113,34 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
'' +
'';
- // Attach window-button click listeners (once)
- el.querySelectorAll('[data-win]').forEach(function(btn) {
- btn.addEventListener('click', function() {
- selectedWindow = btn.dataset.win;
- if (typeof sessionStorage !== 'undefined') sessionStorage.setItem(winKey, selectedWindow);
- el.querySelectorAll('[data-win]').forEach(function(b) { b.classList.toggle('active', b.dataset.win === selectedWindow); });
- load(selectedWindow);
- });
- });
}
+ // The frame survives theme/filter refreshes; replace its handlers so
+ // window picks and the refresh timer share the current render's state.
+ el.querySelectorAll('[data-win]').forEach(function(btn) {
+ btn.onclick = function() {
+ if (!isCurrent()) return;
+ selectedWindow = btn.dataset.win;
+ if (typeof sessionStorage !== 'undefined') sessionStorage.setItem(winKey, selectedWindow);
+ el.querySelectorAll('[data-win]').forEach(function(b) { b.classList.toggle('active', b.dataset.win === selectedWindow); });
+ load(selectedWindow);
+ };
+ });
+
function pct(n, total) {
if (!total) return '—';
return (n / total * 100).toFixed(1) + '%';
}
async function load(w) {
+ if (!isCurrent()) return;
+ const requestCurrent = analyticsGuard(document.getElementById('scopes-cards'));
var loadingEl = document.getElementById('scopes-loading');
if (loadingEl) loadingEl.style.display = '';
try {
// Fix 4: use api() instead of raw fetch()
var data = await api('/scope-stats?window=' + encodeURIComponent(w), { ttl: 30000 });
+ if (!requestCurrent()) return;
if (loadingEl) loadingEl.style.display = 'none';
if (data.error) {
var cardsEl2 = document.getElementById('scopes-cards');
@@ -5034,6 +5149,7 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
}
updateData(data, w);
} catch (err) {
+ if (!requestCurrent()) return;
if (loadingEl) loadingEl.style.display = 'none';
var cardsEl3 = document.getElementById('scopes-cards');
if (cardsEl3) cardsEl3.innerHTML = 'Failed to load scope stats: ' + esc(String(err)) + '
';
@@ -5141,9 +5257,7 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
// Fix 6: auto-refresh every 60s
_stopScopesRefresh();
_scopesRefreshTimer = setInterval(function() {
- if (_currentTab !== 'scopes') { _stopScopesRefresh(); return; }
- var cur = document.getElementById('analyticsContent');
- if (!cur) { _stopScopesRefresh(); return; }
+ if (!isCurrent()) return;
load(selectedWindow);
}, 60000);
}
@@ -5153,22 +5267,23 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
// Auto-refreshes every 60s while the Roles tab is active (matches the
// behavior of the former standalone roles-page.js).
async function renderRolesTab(el) {
+ const isCurrent = analyticsGuard();
el.innerHTML = 'Loading roles…
';
await _renderRolesTabBody(el);
+ if (!isCurrent()) return;
// (Re)start the 60s auto-refresh.
_stopRolesRefresh();
_rolesRefreshTimer = setInterval(function () {
- // Bail if the user navigated away from the Roles tab.
- if (_currentTab !== 'roles') { _stopRolesRefresh(); return; }
- var cur = document.getElementById('analyticsContent');
- if (!cur) { _stopRolesRefresh(); return; }
- _renderRolesTabBody(cur);
+ if (!isCurrent()) return;
+ _renderRolesTabBody(el);
}, 60000);
}
async function _renderRolesTabBody(el) {
+ const isCurrent = analyticsGuard(el);
try {
var data = await api('/analytics/roles', { ttl: CLIENT_TTL.analyticsRF });
+ if (!isCurrent()) return;
var roles = (data && data.roles) || [];
var total = (data && data.totalNodes) || 0;
if (!roles.length) {
@@ -5220,6 +5335,7 @@ function destroy() { _stopRolesRefresh(); _stopScopesRefresh(); _stopDistanceRet
'' + rows + '' +
'';
} catch (err) {
+ if (!isCurrent()) return;
el.innerHTML = 'Failed to load roles: ' + esc(String(err.message || err)) + '
';
}
}
diff --git a/public/app.js b/public/app.js
index 7a04414f0..a68060653 100644
--- a/public/app.js
+++ b/public/app.js
@@ -203,7 +203,9 @@ async function api(path, { ttl = 0, bust = false } = {}) {
}
})();
_inflight.set(path, promise);
- promise.finally(() => _inflight.delete(path));
+ // Handle both outcomes so cleanup does not create an unobserved rejection.
+ const cleanup = () => _inflight.delete(path);
+ promise.then(cleanup, cleanup);
return promise;
}
diff --git a/scripts/non-unit-tests.json b/scripts/non-unit-tests.json
index 0a1c87d1b..9b4594a84 100644
--- a/scripts/non-unit-tests.json
+++ b/scripts/non-unit-tests.json
@@ -5,6 +5,7 @@
"tests/e2e/test-1110-live-filter.js",
"tests/e2e/test-a11y-axe-1668.js",
"tests/e2e/test-analytics-fluid-charts.js",
+ "tests/e2e/test-analytics-loading-e2e.js",
"tests/e2e/test-audio-lab-1297-e2e.js",
"tests/e2e/test-audio-live-1297-e2e.js",
"tests/e2e/test-bottom-nav-1061-e2e.js",
diff --git a/test-all.sh b/test-all.sh
index d765d4225..83a67df29 100755
--- a/test-all.sh
+++ b/test-all.sh
@@ -18,7 +18,9 @@ node tests/unit/test-a11y-axe-routes-coverage.js
node tests/unit/test-admin-dashboard-ui.js
node tests/unit/test-aging.js
node tests/unit/test-analytics-channels-integration.js
+node tests/unit/test-analytics-loading.js
node tests/unit/test-anl1-tooltip-render.js
+node tests/unit/test-api-inflight-cleanup.js
node tests/unit/test-area-filter.js
node tests/unit/test-canadaverse-branding.js
node tests/unit/test-channel-color-picker.js
diff --git a/tests/e2e/test-analytics-loading-e2e.js b/tests/e2e/test-analytics-loading-e2e.js
new file mode 100644
index 000000000..57689648f
--- /dev/null
+++ b/tests/e2e/test-analytics-loading-e2e.js
@@ -0,0 +1,204 @@
+#!/usr/bin/env node
+/* Local browser regression: delayed analytics, theme refreshes and filter races. */
+'use strict';
+const assert = require('assert');
+const { chromium } = require('playwright');
+const BASE = process.env.BASE_URL || 'http://localhost:13581';
+assert.ok(['localhost', '127.0.0.1', '[::1]'].includes(new URL(BASE).hostname), 'Use a local fixture server, never production');
+
+function deferred() {
+ let resolve;
+ const promise = new Promise(r => { resolve = r; });
+ return { promise, resolve };
+}
+
+const FIXTURES = {
+ 'hash-sizes': { total: 0, distribution: {}, hourly: [], topHops: [], multiByteNodes: [] },
+ topology: { uniqueNodes: 4, avgHops: 1, maxHops: 1, hopDistribution: [] },
+ channels: { activeChannels: 0, decryptable: 0 },
+ 'hash-collisions': {},
+ 'relay-airtime-share': { rows: [] },
+ 'subpaths-bulk': { results: Array.from({ length: 4 }, () => ({ subpaths: [] })) },
+ 'neighbor-graph': {
+ nodes: [
+ { pubkey: 'aa'.repeat(32), role: 'companion', neighbor_count: 1 },
+ { pubkey: 'bb'.repeat(32), role: 'companion', neighbor_count: 1 },
+ { pubkey: 'cc'.repeat(32), role: 'repeater', neighbor_count: 1 },
+ { pubkey: 'dd'.repeat(32), role: 'repeater', neighbor_count: 1 },
+ ],
+ edges: [
+ { source: 'aa'.repeat(32), target: 'bb'.repeat(32), score: 0.9, ambiguous: false },
+ { source: 'cc'.repeat(32), target: 'dd'.repeat(32), score: 0.9, ambiguous: false },
+ ],
+ stats: {},
+ },
+};
+
+(async () => {
+ const browser = await chromium.launch({ headless: true, executablePath: process.env.CHROMIUM_PATH || undefined });
+ try {
+ const page = await browser.newPage({ viewport: { width: 1280, height: 900 } });
+ page.setDefaultTimeout(15000);
+ const errors = [];
+ page.on('pageerror', error => errors.push(error.message));
+ const gates = new Map(['', '1h', '24h', '7d'].map(window => [window, { response: deferred(), arrived: deferred() }]));
+ const lazyGates = new Map(['E2E-OLD', 'E2E-NEW', 'E2E-LATE', 'E2E-ERROR', 'E2E-FAIL', 'E2E-LEFT'].map(region => [region, { response: deferred(), arrived: deferred() }]));
+ await page.route('**/api/analytics/*', async route => {
+ const url = new URL(route.request().url());
+ const endpoint = url.pathname.split('/').pop();
+ let body = FIXTURES[endpoint];
+ if (endpoint === 'rf') {
+ const gate = gates.get(url.searchParams.get('window') || '');
+ gate.arrived.resolve(url.pathname.slice('/api'.length) + url.search);
+ const total = await gate.response.promise;
+ body = {
+ totalTransmissions: total, totalPackets: total, packetsPerHour: [], payloadTypes: [],
+ snr: { avg: 0, min: 0, max: 0 }, rssi: { avg: -100, min: -100, max: -100 },
+ avgPacketSize: 20, minPacketSize: 20, maxPacketSize: 20, timeSpanHours: 1,
+ };
+ }
+ if (body === undefined) return route.continue();
+ await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(body) });
+ });
+ // Use synthetic nodes and bulk health; hold the lazy response independently
+ // of the six core requests so these exercise the actual renderer race.
+ await page.route('**/api/nodes**', async route => {
+ const url = new URL(route.request().url());
+ const region = url.searchParams.get('region');
+ const gate = lazyGates.get(region);
+ if (!gate || !['/api/nodes', '/api/nodes/bulk-health'].includes(url.pathname)) return route.continue();
+ const publicKey = 'ab'.repeat(32);
+ let status = 200;
+ let body = { nodes: [{ public_key: publicKey, name: region + ' synthetic node', role: 'repeater', last_seen: new Date().toISOString() }], has_more: false, counts: { repeater: 1 }, total: 1 };
+ if (url.pathname.endsWith('/bulk-health')) {
+ gate.arrived.resolve(url.pathname.slice('/api'.length) + url.search);
+ status = await gate.response.promise;
+ body = [{ public_key: publicKey, stats: { totalPackets: 22, packetsToday: 2, avgSnr: 3 }, observers: [] }];
+ }
+ await route.fulfill({ status, contentType: 'application/json', body: JSON.stringify(body) });
+ });
+
+ async function release(window, total) {
+ const gate = gates.get(window);
+ const requestPath = await gate.arrived.promise;
+ gate.response.resolve(total);
+ // Wait until the real api() has consumed the response, not just until
+ // the server has sent it; then its Promise.all continuation has run.
+ await page.waitForFunction(path => _apiPerf.log.some(entry => entry.path === path), requestPath);
+ }
+ async function theme() {
+ await page.evaluate(() => window.dispatchEvent(new CustomEvent('theme-refresh')));
+ }
+ async function selectWindow(window) {
+ const request = page.waitForRequest(req => {
+ const url = new URL(req.url());
+ return url.pathname === '/api/analytics/rf' && url.searchParams.get('window') === window;
+ });
+ await page.locator('#analyticsTimeWindow').selectOption(window);
+ await request;
+ }
+ async function selectRegion(region, window) {
+ await page.evaluate(region => RegionFilter.setSelected([region]), region);
+ await selectWindow(window);
+ }
+ async function releaseLazy(region, status = 200) {
+ const gate = lazyGates.get(region);
+ const requestPath = await gate.arrived.promise;
+ gate.response.resolve(status);
+ // Errors do not enter _apiPerf.log. Wait for the real api() cleanup for
+ // both success and rejection, then inspect the renderer's settled view.
+ await page.waitForFunction(path => !_inflight.has(path), requestPath);
+ }
+
+ await page.goto(BASE + '/#/analytics', { waitUntil: 'domcontentloaded' });
+ await page.locator('#analyticsTimeWindow').waitFor();
+ await theme();
+ await page.locator('#analyticsTabs [data-tab="hashsizes"]').click();
+ await theme();
+ assert.match(await page.locator('#analyticsContent').innerText(), /Loading analytics/);
+ assert.deepStrictEqual(errors, []);
+ console.log(' ✓ pending core tabs and theme refresh retain the loading state');
+
+ await page.locator('#analyticsTabs [data-tab="neighbor-graph"]').click();
+ const companion = page.locator('#ngRoleChecks input[data-role="companion"]');
+ await page.waitForFunction(() => document.querySelector('#ngStats .stat-value')?.textContent === '4');
+ await companion.uncheck();
+ const canvas = await page.locator('#ngCanvas').elementHandle();
+ await release('', 111);
+ await theme();
+ assert.strictEqual(await companion.isChecked(), false, 'bulk completion and theme refresh must preserve graph filters');
+ assert.strictEqual(await canvas.evaluate(el => el.isConnected), true, 'the graph DOM must not be rebuilt');
+ console.log(' ✓ a lazy graph retains its filters and canvas after core data and theme refresh');
+
+ await page.locator('#analyticsTabs [data-tab="overview"]').click();
+ assert.strictEqual(await page.locator('#analyticsContent .stat-value').first().innerText(), '111');
+ await selectWindow('1h');
+ await theme();
+ assert.match(await page.locator('#analyticsContent').innerText(), /Loading analytics/);
+ await selectWindow('24h');
+ await release('24h', 222);
+ await page.waitForFunction(() => document.querySelector('#analyticsContent .stat-value')?.textContent === '222');
+ await release('1h', 999);
+ await theme();
+ assert.strictEqual(await page.locator('#analyticsContent .stat-value').first().innerText(), '222');
+ assert.strictEqual(await page.locator('#analyticsTimeWindow').inputValue(), '24h');
+ console.log(' ✓ the newest time window wins when responses complete out of order');
+
+ await selectWindow('7d');
+ await page.evaluate(() => { location.hash = '#/home'; });
+ await page.locator('#analyticsContent').waitFor({ state: 'detached' });
+ await release('7d', 333);
+ assert.strictEqual(await page.locator('#analyticsContent').count(), 0);
+ assert.deepStrictEqual(errors, [], 'analytics must not throw during loading, refresh or page leave');
+ console.log(' ✓ late completion after page leave is harmless');
+
+ await page.evaluate(() => {
+ RegionFilter.setSelected(['E2E-OLD']);
+ location.hash = '#/analytics?tab=nodes';
+ });
+ await lazyGates.get('E2E-OLD').arrived.promise;
+ assert.match(await page.locator('#analyticsContent').innerText(), /Loading node analytics/);
+ await selectRegion('E2E-NEW', '24h');
+ await releaseLazy('E2E-NEW');
+ await page.getByRole('link', { name: 'E2E-NEW synthetic node', exact: true }).first().waitFor();
+ await releaseLazy('E2E-OLD');
+ assert.match(await page.locator('#analyticsContent').innerText(), /E2E-NEW synthetic node/);
+ assert.doesNotMatch(await page.locator('#analyticsContent').innerText(), /E2E-OLD synthetic node/);
+ console.log(' ✓ lazy Nodes keeps the newest filter when the old response arrives last');
+
+ for (const [region, status] of [['E2E-LATE', 200], ['E2E-ERROR', 500]]) {
+ await page.evaluate(region => RegionFilter.setSelected([region]), region);
+ await page.locator('#analyticsTabs [data-tab="nodes"]').click();
+ await lazyGates.get(region).arrived.promise;
+ await page.locator('#analyticsTabs [data-tab="subpaths"]').click();
+ await page.getByRole('heading', { name: 'Route Pattern Analysis' }).waitFor();
+ await releaseLazy(region, status);
+ assert.match(await page.locator('#analyticsContent').innerText(), /Route Pattern Analysis/);
+ assert.doesNotMatch(await page.locator('#analyticsContent').innerText(), /Failed to load node|synthetic node/);
+ }
+ console.log(' ✓ late lazy success and HTTP 500 failure preserve the newly selected tab');
+
+ await page.evaluate(() => RegionFilter.setSelected(['E2E-FAIL']));
+ await page.locator('#analyticsTabs [data-tab="nodes"]').click();
+ await releaseLazy('E2E-FAIL', 500);
+ await page.getByText(/Failed to load node analytics: API 500/).waitFor();
+ assert.deepStrictEqual(errors, [], 'handled lazy HTTP failures must not become unhandled rejections');
+ lazyGates.set('E2E-FAIL', { response: deferred(), arrived: deferred() });
+ await theme();
+ await releaseLazy('E2E-FAIL');
+ await page.getByRole('link', { name: 'E2E-FAIL synthetic node', exact: true }).first().waitFor();
+ console.log(' ✓ a current lazy failure is visible and a subsequent refresh recovers');
+
+ await selectRegion('E2E-LEFT', '1h');
+ await lazyGates.get('E2E-LEFT').arrived.promise;
+ await page.evaluate(() => { location.hash = '#/home'; });
+ await page.locator('#analyticsContent').waitFor({ state: 'detached' });
+ await releaseLazy('E2E-LEFT');
+ assert.strictEqual(await page.locator('#analyticsContent').count(), 0);
+ assert.deepStrictEqual(errors, [], 'lazy completion after destroy must not throw or restart rendering');
+ console.log(' ✓ a delayed lazy response after page leave is harmless');
+ console.log('Analytics loading browser regression: 8 passed');
+ } finally {
+ await browser.close();
+ }
+})().catch(error => { console.error(error); process.exitCode = 1; });
diff --git a/tests/unit/test-analytics-loading.js b/tests/unit/test-analytics-loading.js
new file mode 100644
index 000000000..b671b782a
--- /dev/null
+++ b/tests/unit/test-analytics-loading.js
@@ -0,0 +1,471 @@
+/* Exercise the real analytics page lifecycle with controllable API promises. */
+'use strict';
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+const vm = require('vm');
+
+const source = fs.readFileSync(path.join(__dirname, '../../public/analytics.js'), 'utf8');
+const settle = () => new Promise(resolve => setImmediate(resolve));
+const unhandled = [];
+process.on('unhandledRejection', error => unhandled.push(error.message));
+
+function fixture(url, total) {
+ switch (url.split('?')[0]) {
+ case '/analytics/rf': return { totalTransmissions: total, totalPackets: total, packetsPerHour: [], payloadTypes: [], snr: {}, rssi: {} };
+ case '/analytics/topology': return { uniqueNodes: 0, hopDistribution: [] };
+ case '/analytics/hash-sizes': return { total: 0, distribution: {}, hourly: [], topHops: [], multiByteNodes: [] };
+ case '/analytics/channels': return { activeChannels: 0, decryptable: 0 };
+ case '/nodes': return { nodes: [], total };
+ case '/nodes/bulk-health':
+ case '/api/nodes/clock-skew':
+ case '/nodes/clock-skew': return [];
+ case '/analytics/subpaths-bulk': return { results: Array.from({ length: 4 }, () => ({ subpaths: [] })) };
+ case '/analytics/neighbor-graph': return { nodes: [], edges: [], stats: {} };
+ case '/analytics/distance': return { status: 'building', retry_after_seconds: 5 };
+ case '/observers/metrics/summary': return { observers: [] };
+ case '/analytics/roles': return { roles: [], totalNodes: 0 };
+ case '/scope-stats': return { summary: { transportTotal: total, scoped: 0, unscoped: total, unknownScope: 0 } };
+ default: return { rows: [] };
+ }
+}
+
+async function harness(initialTab = '') {
+ let page;
+ const requests = [], events = new Map(), timers = new Map(), frames = [];
+ let timerId = 0;
+ function element() {
+ let html = '';
+ return {
+ get innerHTML() { return html; },
+ set innerHTML(value) { html = value; this.writes++; },
+ writes: 0, value: '', style: {}, listeners: {},
+ classList: { add() {}, remove() {}, toggle() {}, contains: () => false },
+ addEventListener(name, fn) { this.listeners[name] = fn; },
+ setAttribute() {},
+ querySelectorAll() { return []; },
+ querySelector(selector) { return elements[selector.slice(1)] || null; },
+ getContext() { return { scale() {} }; },
+ };
+ }
+ const elements = Object.fromEntries(['analyticsContent', 'analyticsTabs', 'analyticsTimeWindow', 'analyticsRegionFilter', 'analyticsAreaFilter'].map(id => [id, element()]));
+ elements.analyticsTabs.querySelector = () => ({ classList: { add() {} } });
+ function filter() {
+ return { init() {}, onChange(fn) { this.change = fn; }, regionQueryString: () => '', areaQueryString: () => '' };
+ }
+ const sandbox = {
+ window: null, console, URLSearchParams,
+ document: { getElementById: id => elements[id] || null, querySelectorAll: () => [], documentElement: {} },
+ location: { hash: '#/analytics' + (initialTab ? '?tab=' + initialTab : '') },
+ history: { replaceState() {} },
+ localStorage: { getItem: () => null, setItem() {} },
+ sessionStorage: { getItem: () => null, setItem() {} },
+ RegionFilter: filter(), AreaFilter: filter(),
+ CLIENT_TTL: { analyticsRF: 1000 },
+ initTabBar() {},
+ registerPage(name, handlers) { assert.strictEqual(name, 'analytics'); page = handlers; },
+ addEventListener(name, fn) { events.set(name, fn); },
+ removeEventListener(name) { events.delete(name); },
+ requestAnimationFrame(fn) { frames.push(fn); return frames.length; }, cancelAnimationFrame() {},
+ setInterval(fn) { timers.set(++timerId, fn); return timerId; },
+ setTimeout(fn) { const id = ++timerId; timers.set(id, () => { timers.delete(id); fn(); }); return id; },
+ clearInterval(id) { timers.delete(id); }, clearTimeout(id) { timers.delete(id); },
+ getComputedStyle: () => ({ getPropertyValue: () => '' }),
+ getFavorites: () => [],
+ api(url) {
+ return new Promise((resolve, reject) => requests.push({ url, resolve, reject }));
+ },
+ };
+ sandbox.fetchAllNodes = query => sandbox.api('/nodes?' + query);
+ sandbox.fetch = url => sandbox.api(url).then(data => ({ ok: true, json: async () => data }));
+ sandbox.window = sandbox;
+ vm.runInNewContext(source, sandbox, { filename: 'analytics.js' });
+ async function init() {
+ elements.analyticsContent = element();
+ elements.analyticsContent.innerHTML = 'Loading analytics…';
+ await page.init(element());
+ }
+ await init();
+ return {
+ page, elements, requests, init, timers, frames,
+ element,
+ add(...ids) { ids.forEach(id => { elements[id] = element(); }); },
+ favorites() { sandbox.getFavorites = () => ['aa'.repeat(32)]; },
+ html: () => elements.analyticsContent.innerHTML,
+ theme: () => events.get('theme-refresh')?.(),
+ tab(tab) {
+ const button = { dataset: { tab }, classList: { add() {} } };
+ elements.analyticsTabs.listeners.click({ target: { closest: () => button } });
+ },
+ window(value) {
+ elements.analyticsTimeWindow.value = value;
+ elements.analyticsTimeWindow.listeners.change();
+ },
+ refresh: () => sandbox.RegionFilter.change(),
+ async resolve(batch, total) {
+ requests.slice(batch * 6, batch * 6 + 6).forEach(r => r.resolve(fixture(r.url, total)));
+ await settle();
+ },
+ async reject(batch, message) {
+ requests[batch * 6].reject(new Error(message));
+ await settle();
+ },
+ };
+}
+
+let passed = 0, failed = 0;
+async function test(name, fn) {
+ const before = unhandled.length;
+ try {
+ try { await fn(); } finally { await settle(); }
+ assert.deepStrictEqual(unhandled.slice(before), [], 'page lifecycle must not reject in the background');
+ passed++;
+ console.log(' ✓ ' + name);
+ } catch (error) {
+ failed++;
+ console.error(' ✗ ' + name + ': ' + error.message.split('\n')[0]);
+ }
+}
+
+(async () => {
+ await test('theme refresh and every core tab wait for complete analytics', async () => {
+ const h = await harness();
+ h.theme();
+ for (const tab of ['overview', 'rf', 'topology', 'channels', 'hashsizes', 'collisions']) {
+ h.tab(tab);
+ h.theme();
+ assert.match(h.html(), /Loading analytics/);
+ }
+ assert.strictEqual(h.requests.length, 6, 'refreshes must not issue extra requests');
+ });
+
+ await test('ready data still renders and tabs and theme refresh keep working', async () => {
+ const h = await harness();
+ await h.resolve(0, 111);
+ assert.match(h.html(), /stat-value">111111 {
+ const h = await harness();
+ h.window('1h');
+ assert.match(h.requests[7].url, /window=1h/);
+ await h.resolve(1, 222);
+ assert.match(h.html(), /stat-value">222222 {
+ const h = await harness();
+ h.refresh();
+ await h.resolve(1, 222);
+ await h.reject(0, 'stale failure');
+ assert.match(h.html(), /stat-value">222222 {
+ const h = await harness();
+ await h.reject(0, '