viktor/wrongmove
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add frontend performance metrics pipeline to Prometheus

Browse source 
Collect browser-side worker round-trips, computation times, main-thread
operations, and feature counts, batch them client-side, and expose as
Prometheus histograms via a new POST /api/perf endpoint.
This commit is contained in:
Viktor Barzin 2026-02-22 17:30:29 +00:00
parent c24c3a545c
commit d90fa38776
No known key found for this signature in database
GPG key ID: 0EB088298288D958
10 changed files with 188 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

55
frontend/src/workers/HexgridHeatmapClient.ts
View file

@ -7,6 +7,7 @@ import type {
GridResultMessage,
} from './types';
import { toFeatureItem } from './types';
import { record } from '../services/perfCollector';
interface HexgridConfig {
intensity: number;
@ -46,6 +47,9 @@ export class HexgridHeatmapClient {
private pendingColorScale = new Map<number, PendingPromise<ColorScaleResultMessage>>();
private pendingBounds = new Map<number, PendingPromise<BoundsResultMessage>>();
// Send timestamps for round-trip measurement
private sendTimestamps = new Map<number, number>();
private config: HexgridConfig = {
intensity: 8,
spread: 0.1,
@ -118,9 +122,15 @@ export class HexgridHeatmapClient {
private handleWorkerMessage(msg: WorkerResponse): void {
switch (msg.type) {
case 'DATA_READY':
// Data loaded in worker, nothing to do on main thread
case 'DATA_READY': {
const sent = this.sendTimestamps.get(msg.requestId);
if (sent !== undefined) {
this.sendTimestamps.delete(msg.requestId);
record('worker_roundtrip', 'set_data', (performance.now() - sent) / 1000);
}
record('worker_compute', 'set_data', msg.computeMs / 1000);
break;
}
case 'GRID_RESULT':
this.handleGridResult(msg);
@ -151,6 +161,14 @@ export class HexgridHeatmapClient {
if (msg.requestId !== this.pendingGridRequestId) return;
this.pendingGridRequestId = null;
// Record perf metrics
const sent = this.sendTimestamps.get(msg.requestId);
if (sent !== undefined) {
this.sendTimestamps.delete(msg.requestId);
record('worker_roundtrip', 'generate_grid', (performance.now() - sent) / 1000);
}
record('worker_compute', 'generate_grid', msg.computeMs / 1000);
const hexgrid = msg.hexgrid as unknown as GeoJSON.FeatureCollection;
const currentZoom = Math.floor(this.map.getZoom());
const zoomChanged = this.lastZoom !== null && this.lastZoom !== currentZoom;
@ -198,12 +216,16 @@ export class HexgridHeatmapClient {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
setData(data: { features: Array<{ properties: any; geometry: { type: 'Point'; coordinates: [number, number] } }> }): void {
// Build main-thread R-tree for click queries
const t0 = performance.now();
const items = data.features.map(toFeatureItem);
this.mainTree.clear();
this.mainTree.load(items);
record('main_thread', 'rtree_build', (performance.now() - t0) / 1000);
record('feature_count', 'set_data', data.features.length);
// Post to worker for grid generation tree
const requestId = this.nextRequestId();
this.sendTimestamps.set(requestId, performance.now());
this.worker.postMessage({
type: 'SET_DATA',
requestId,
@ -246,8 +268,20 @@ export class HexgridHeatmapClient {
percentileConfig: { minBound: number; maxBound: number }
): Promise<ColorScaleResultMessage> {
const requestId = this.nextRequestId();
this.sendTimestamps.set(requestId, performance.now());
return new Promise((resolve, reject) => {
this.pendingColorScale.set(requestId, { resolve, reject });
this.pendingColorScale.set(requestId, {
resolve: (msg) => {
const sent = this.sendTimestamps.get(requestId);
if (sent !== undefined) {
this.sendTimestamps.delete(requestId);
record('worker_roundtrip', 'color_scale', (performance.now() - sent) / 1000);
}
record('worker_compute', 'color_scale', msg.computeMs / 1000);
resolve(msg);
},
reject,
});
this.worker.postMessage({
type: 'COMPUTE_COLOR_SCALE',
requestId,
@ -261,8 +295,20 @@ export class HexgridHeatmapClient {
boundsPercentileConfig: { clipMin: number; clipMax: number }
): Promise<BoundsResultMessage> {
const requestId = this.nextRequestId();
this.sendTimestamps.set(requestId, performance.now());
return new Promise((resolve, reject) => {
this.pendingBounds.set(requestId, { resolve, reject });
this.pendingBounds.set(requestId, {
resolve: (msg) => {
const sent = this.sendTimestamps.get(requestId);
if (sent !== undefined) {
this.sendTimestamps.delete(requestId);
record('worker_roundtrip', 'bounds', (performance.now() - sent) / 1000);
}
record('worker_compute', 'bounds', msg.computeMs / 1000);
resolve(msg);
},
reject,
});
this.worker.postMessage({
type: 'COMPUTE_BOUNDS',
requestId,
@ -302,6 +348,7 @@ export class HexgridHeatmapClient {
const requestId = this.nextRequestId();
this.pendingGridRequestId = requestId;
this.sendTimestamps.set(requestId, performance.now());
this.worker.postMessage({
type: 'GENERATE_GRID',