fix: serialize call history first to show more context

Author: skoshx

e2e/capture/performance/performance.spec.ts

@@ -66,7 +66,7 @@ test("time-to-(mount | update | nested-update)", async ({ page }) => {
 	assertAbsolutePeformance(baseline, profilerEntries, 10);
 })
 
-test.only("time-to-click-handled", async ({ page }) => {
+test("time-to-click-handled", async ({ page }) => {
 	const baseline = {
 		'click-handled': 40.09999999962747,
 	};

src/core/captureLimits.ts

@@ -1,12 +1,70 @@
 import { Err, Ok } from 'ts-results'
-import { CaptureAmountLimit, CapturedCall, CapturedFunction } from './types'
+import { CaptureAmountLimit, CaptureInvocation, CapturedCall, CapturedFunction } from './types'
 import {
 	parseCaptureAmountLimit,
 	parseFilepathFromFunctionId,
 	sortCapturesByTimestamp
 } from './util'
 import { getCaptureSize } from './stringify'
 
+export function getSizeLimitedCaptures<T extends CapturedCall | CapturedFunction>(
+	callsOrFunctions: T[],
+	sizeLimitBytes: number
+) {
+	let currentSize = 0
+	let result: T[] = []
+
+	const callsOrFunctionsClone = callsOrFunctions.map((callOrFunc) => ({
+		id: callOrFunc.id,
+		invocations: [...callOrFunc.invocations]
+	}))
+
+	for (let i = 0; i < callsOrFunctions.length; i++) {
+		result.push({ id: callsOrFunctions[i].id, invocations: [] as T['invocations'] } as T)
+	}
+
+	let addedThisRound = false
+	do {
+		addedThisRound = false // Reset for the current round
+
+		for (let i = 0; i < callsOrFunctionsClone.length; i++) {
+			const call = callsOrFunctionsClone[i]
+			if (call.invocations.length > 0) {
+				// Instead of popping the last, we take the newest invocation directly
+				const invocation = call.invocations[call.invocations.length - 1] // Access the newest invocation
+				const invocationSize = getCaptureSize(invocation as any).unwrapOr(0)
+
+				if (currentSize + invocationSize <= sizeLimitBytes) {
+					// Insert the invocation in the correct order (newest first)
+					result[i].invocations.unshift(invocation) // Add the invocation to the beginning
+					call.invocations.pop() // Remove the newest invocation from the clone
+					currentSize += invocationSize
+					addedThisRound = true
+				}
+			}
+		}
+	} while (addedThisRound && currentSize < sizeLimitBytes)
+
+	// Filter out calls without invocations
+	result = result.filter((callOrFunc) => callOrFunc.invocations.length > 0)
+
+	const resultCalls: CapturedCall[] = []
+	const resultFunctions: CapturedFunction[] = []
+
+	for (let i = 0; i < result.length; i++) {
+		if (result[i].id.includes('-call-_')) {
+			resultCalls.push(result[i])
+		} else {
+			resultFunctions.push(result[i])
+		}
+	}
+
+	return Ok({
+		calls: resultCalls,
+		functions: resultFunctions
+	})
+}
+
 export function getLimitedCaptures(
 	calls: CapturedCall[],
 	functions: CapturedFunction[],
@@ -59,35 +117,5 @@ export function getLimitedCaptures(
 	}
 
 	// Handle byte limits
-	const duplicateCalls: typeof calls = []
-	const duplicateFunctions: typeof functions = []
-
-	let sizeCounter = 0
-
-	for (let i = 0; i < Math.max(calls.length, functions.length); i++) {
-		if (sizeCounter >= parsedCaptureAmountLimit.val.sizeLimit) {
-			break
-		}
-		const callEntry = calls.at(-(i + 1))
-		const functionEntry = functions.at(-(i + 1))
-		if (callEntry) {
-			duplicateCalls.push(callEntry)
-
-			const captureSize = getCaptureSize(callEntry)
-			if (captureSize.err === false) {
-				sizeCounter += captureSize.val
-			}
-		}
-		if (functionEntry) {
-			duplicateFunctions.push(functionEntry)
-
-			const captureSize = getCaptureSize(functionEntry)
-
-			if (captureSize.err === false) {
-				sizeCounter += captureSize.val
-			}
-		}
-	}
-
-	return Ok({ calls: duplicateCalls, functions: duplicateFunctions })
+	return getSizeLimitedCaptures(sortedCombined, parsedCaptureAmountLimit.val.sizeLimit)
 }

test/captureLimits.test.ts

@@ -1,5 +1,38 @@
 import { describe, expect, it } from 'vitest'
 import { parseCaptureAmountLimit, parseFilepathFromFunctionId } from '../src/core/util'
+import { CapturedCall } from '../src/core/types'
+import { getLimitedCaptures, getSizeLimitedCaptures } from '../src/core/captureLimits'
+
+const createData = (bytes: number) => {
+	return 'H'.repeat(bytes)
+}
+
+const callsFixture: CapturedCall[] = [
+	{
+		id: '/a.js-call-_a',
+		invocations: [1, 2].map((timestamp) => ({
+			args: [],
+			output: createData(2),
+			timestamp
+		}))
+	},
+	{
+		id: '/b.js-call-_b',
+		invocations: [3, 4, 5, 6, 7].map((timestamp) => ({
+			args: [],
+			output: createData(2),
+			timestamp
+		}))
+	},
+	{
+		id: '/c.js-call-_c',
+		invocations: [8, 9].map((timestamp) => ({
+			args: [],
+			output: createData(2),
+			timestamp
+		}))
+	}
+]
 
 describe('capture limits', () => {
 	it('parseCaptureAmountLimit', () => {
@@ -43,4 +76,79 @@ describe('capture limits', () => {
 		)
 		expect(parseFilepathFromFunctionId(``).val).toBe(`Invalid function ID "".`)
 	})
+
+	it('saves everything when capture limit is more than data', () => {
+		const limitedResult = getSizeLimitedCaptures(callsFixture, 6_000).unwrap()
+		const { calls: newCalls } = limitedResult
+		expect(newCalls).toStrictEqual(callsFixture)
+	})
+
+	it('does capture limiting depth (functions & calls) first, instead of bredth first (invocations)', () => {
+		const SERIALIZATION_ADDON = 46 * 3
+		const limitedResult = getSizeLimitedCaptures(callsFixture, 6 + SERIALIZATION_ADDON).unwrap()
+		const { calls: newCalls } = limitedResult
+
+		expect(newCalls.length).toBe(3)
+		expect(newCalls).toStrictEqual([
+			{
+				id: '/a.js-call-_a',
+				invocations: [2].map((timestamp) => ({
+					args: [],
+					output: createData(2),
+					timestamp
+				}))
+			},
+			{
+				id: '/b.js-call-_b',
+				invocations: [7].map((timestamp) => ({
+					args: [],
+					output: createData(2),
+					timestamp
+				}))
+			},
+			{
+				id: '/c.js-call-_c',
+				invocations: [9].map((timestamp) => ({
+					args: [],
+					output: createData(2),
+					timestamp
+				}))
+			}
+		])
+
+		// Extra serialization bytes * num functions * num invocations
+		const SERIALIZATION_ADDON_SECOND = 46 * 3 * 2
+
+		const { calls: secondTestCaseCalls } = getSizeLimitedCaptures(
+			callsFixture,
+			12 + SERIALIZATION_ADDON_SECOND
+		).unwrap()
+		expect(secondTestCaseCalls.length).toBe(3)
+		expect(secondTestCaseCalls).toStrictEqual([
+			{
+				id: '/a.js-call-_a',
+				invocations: [1, 2].map((timestamp) => ({
+					args: [],
+					output: createData(2),
+					timestamp
+				}))
+			},
+			{
+				id: '/b.js-call-_b',
+				invocations: [6, 7].map((timestamp) => ({
+					args: [],
+					output: createData(2),
+					timestamp
+				}))
+			},
+			{
+				id: '/c.js-call-_c',
+				invocations: [8, 9].map((timestamp) => ({
+					args: [],
+					output: createData(2),
+					timestamp
+				}))
+			}
+		])
+	})
 })

test/transform.test.ts

@@ -542,7 +542,7 @@ describe('uff(Async) transform', () => {
 })
 
 it('loads config', async () => {
-	const config = await loadConfig()
+	const { generateBuildId, ...config } = (await loadConfig())!
 
 	expect(config).toEqual({
 		projectId: 'flytrap',
@@ -579,7 +579,7 @@ it('doesnt transform reserved words', () => {
 })
 
 // @todo: add this test back
-it.only('transforms .vue files', async () => {
+it('transforms .vue files', async () => {
 	const fixture = `
 	<script setup>
 	function foo() {