How FlowTrace works
Pick a perspective and watch every interaction travel through the full web stack: browser, network, server and database.
When you trigger an action on a website, the request passes through many components before the screen updates. FlowTrace lays out that path as an ordered sequence of stages and animates a packet of data moving through it. The stages below use the same labels FlowTrace shows on screen.
The request path, stage by stage
- 01
Browser UI
The browser registers a user input via the operating system input pipeline.
- 02
DOM Event
A synthetic event is dispatched through the DOM event system to listeners.
- 03
JS Runtime
JavaScript invokes the handler, runs validation and prepares the payload.
- 04
State
Client state is updated optimistically before the network call resolves.
- 05
HTTP Request
The fetch call serializes the payload into an HTTP request with headers.
- 06
DNS Lookup
The hostname is resolved through a recursive DNS query to an IP address.
- 07
TLS Handshake
Client and server negotiate ciphers and exchange keys to encrypt the channel.
- 08
CDN Edge
The request hits the nearest edge node which may serve cached assets.
- 09
API Gateway
The gateway routes the request, applies rate limits and forwards to services.
- 10
Auth
Middleware verifies the session token, scopes and permissions.
- 11
Server Logic
The controller orchestrates business logic and downstream calls.
- 12
Cache
A hot key is checked in the in-memory cache to avoid hitting the database.
- 13
Queue
A background job is enqueued for asynchronous processing.
- 14
Database
A transaction writes the record using a parameterized SQL statement.
- 15
Response
The server serializes the result and streams it back over the same connection.
- 16
Render
React reconciles the virtual DOM and the browser paints the next frame.
Four ways to see the flow
System View
Explore the full infrastructure in the standard 3D overview. Free camera, draggable nodes, and the complete request map.
Cinematic Journey
Sit back and watch the request lifecycle as a guided cinematic tour with auto-tracking camera and step-by-step storytelling.
First-Person Flow
Step inside the request and follow the data path from within. Experience the journey from the perspective of the moving packet.
Scenario Builder
Compose your own flow: click, form, scroll, error, cache or latency. Experiment and watch the result in real time.