feat: enhance analytics data handling with early event sending (after 5s)

src/lib/index.ts

@@ -86,7 +86,7 @@ export async function bandwidthTest(
 			const elapsedMs = performance.now() - startTime;
 			onProgress(elapsedMs, loadedBytes, totalBytes, bytesPerSecond, true);
 			// send analytics data
-			await sendAnalyticsData(bytesPerSecond, latencySum / numLatencyTests, cdnPop);
+			await sendAnalyticsData(bytesPerSecond, latencySum / numLatencyTests, cdnPop, 1.);
 			break;
 		}
 
@@ -148,12 +148,13 @@ export async function getClientInfo(): Promise<ClientInfo> {
 	);
 }
 
-export async function sendAnalyticsData(bytesPerSecond: number, latency: number, location: string) {
+export async function sendAnalyticsData(bytesPerSecond: number, latency: number, location: string, progress: number) {
 	// send measurements to analytics API
 	const measurements = {
 		bandwidth: bytesPerSecond,
 		latency,
-		location
+		location,
+		progress
 	};
 	console.log('Sending analytics data');
 	return new Promise((resolve) => {

src/routes/+page.svelte

@@ -77,6 +77,7 @@
 	};
 
 	let testTimeoutHandler = 0;
+	let earlyAnalyticsHandler = 0;
 
 	const startTest = () => {
 		testStatus = 'Running';
@@ -88,24 +89,21 @@
 		bandwidthTest(bandwidthCallback, latencyCallback, serverLocationCallback);
 		testTimeoutHandler = setTimeout(async () => {
 			console.log('Test timed out after', MaxTestDurationSec, 'seconds');
+			// send final analytics data even if the test is not completed (we have enough data for a good estimate)
+			await sendAnalyticsData(currentBandwidth, currentLatency, serverLocation, 1.);
 			testStatus = 'Completed';
 			progress = 100;
 		}, MaxTestDurationSec * 1000);
+		earlyAnalyticsHandler = setTimeout(() => {
+			// send analytics event after 5 seconds (in case user closes the tab before the test completes)
+			sendAnalyticsData(currentBandwidth, currentLatency, serverLocation, progress / 100);
+		}, 5000);
 	};
 	const stopTest = () => {
 		testStatus = 'Stopped';
 		clearTimeout(testTimeoutHandler);
+		clearTimeout(earlyAnalyticsHandler);
 	};
-	$effect(() => {
-		(async () => {
-			if (testStatus === 'Completed') {
-				// send analytics event
-				await sendAnalyticsData(currentBandwidth, currentLatency, serverLocation);
-			}
-		})();
-	});
-	//counter(callback);
-	//bandwidthTest(bandwidthCallback, latencyCallback);
 
 	let canvas: HTMLCanvasElement;
 
@@ -231,7 +229,7 @@
 			<div class="mb-2 flex justify-between">
 				<span class="text-sm font-medium text-gray-700">Test Progress</span>
 				<span id="progress-percent" class="text-sm font-medium text-gray-700"
-					>{progress.toFixed(0)}%</span
+				>{progress.toFixed(0)}%</span
 				>
 			</div>
 			<div class="h-2.5 w-full rounded-full bg-gray-200">

src/routes/analytics/+server.ts

@@ -16,12 +16,13 @@ const ddbClient = new DynamoDBClient({ region: REGION });
 
 export async function POST({ request }) {
 	try {
-		const { bandwidth, latency, location } = await request.json();
+		const { bandwidth, latency, location, progress } = await request.json();
 
 		if (
 			typeof bandwidth !== 'number' ||
 			typeof latency !== 'number' ||
-			typeof location !== 'string'
+			typeof location !== 'string' ||
+			typeof progress !== 'number'
 		) {
 			return json({ error: 'Invalid data' }, { status: 400 });
 		}
@@ -35,7 +36,8 @@ export async function POST({ request }) {
 			bandwidth: { N: bandwidth.toString() },
 			latency: { N: latency.toString() },
 			location: { S: location },
-			timestamp: { S: new Date().toISOString() }
+			timestamp: { S: new Date().toISOString() },
+			progress: { N: progress.toString() }
 		};
 
 		const putParams = {
@@ -45,7 +47,7 @@ export async function POST({ request }) {
 
 		await ddbClient.send(new PutItemCommand(putParams));
 
-		console.log('Received bandwidth data:', { bandwidth, latency, location });
+		console.log('Received bandwidth data:', { bandwidth, latency, location, progress });
 
 		return json({ success: true });
 	} catch (error) {