-
-
Nine checkout requests become a three-step handoff with two linked IDs.
Inspiration
A teammate asks, “Which requests led to that checkout conflict?” Imagine replying with a file they can run: here’s the cart, here’s the reservation, and here’s exactly where checkout used it. I built TraceMint for that moment. It starts with a recording from Chrome’s Network panel and ends with the evidence in your teammate’s hands.
What it does
Open a browser network recording (a HAR), select a request, and build a capsule. In the sample store, nine requests surround a checkout that returned HTTP 409. TraceMint picks out three: create the cart, reserve its items, and check out. The cart ID connects the first two requests; the reservation ID connects the next two. Click Inspect matching fields to see where each connection comes from.
The capsule gives the identifiers synthetic names and carries those same names through the sequence. Download the Node.js test and a teammate can check both links and the checkout status offline. They can also supply another response and run that same test again. Change the reservation ID: the test pinpoints the reservation-to-checkout link. The cart link and the 409 status check still pass.
How it works
A browser-side JavaScript engine reads the capture, indexes identifiers produced in earlier JSON responses, and finds the later request fields that use them. It walks backward from the selected request and records the source and destination field of each match. A separate export step builds the capsule with synthetic values and generates a stand-alone test using Node’s built-in test runner. The export leaves out request headers and cookies. The raw capture stays in the browser tab.
What I’m proud of
My favorite moment is the second run: change one reservation ID, press Enter, and TraceMint points straight to that handoff. A teammate gets three requests, two traceable links, and one runnable file from the checkout example. A second example follows a different shape: the library’s book and reader requests both feed a single loan request. The same engine finds both patterns.
I also tested a fresh Chromium recording of a local repair-shop app. Six browser requests became a three-request capsule. The exported test passed all four checks, singled out a changed reservation ID, and still passed when an unrelated response field changed.
Try it
Open the checkout sample, select the request marked 409, and click Build capsule. Inspect the matching fields, choose Download test, and run node --test trace.test.mjs in the download folder. Switch to the library sample to see two independent requests converge on the same target.
Tools and credits
Built for GenHacks with JavaScript ES modules, HTML, CSS, browser File and Blob APIs, and Node.js (node:test, node:assert/strict). Python packages the workbench as a single offline HTML file. Playwright and Chromium recorded a separate integration test; the demo uses original synthetic HAR fixtures. OpenAI Codex assisted with design, implementation, tests, writing, and video production. The video shows the project running in Google Chrome, with FFmpeg for editing and Apple’s Samantha voice for narration.
Built With
- css3
- html5
- javascript
- node.js
- playwright
- python
