Tracing one action end to end: every hop in order, out and back, one line each

One action, every hop in order, out and back to the user; one line each before any depth.

Before you read: predict

ExamHall design round (ExamHall is invented). The interviewer asks: “What happens when a candidate clicks Submit?” She cuts in after one minute, 150 words at your pace. On your whiteboard, ExamHall's Submit passes eleven hops.

Counting words as this lesson's cut model does, which plan has given her the whole Submit when she cuts in?

The 30-second version

Asked what happens when a user acts, trace that one action: from the input, through each layer in order, back to where the user can act, including work that lands after the reply. Give every hop one line first, with what can fail there; then go deeper where the interviewer points.

One action, every hop in order, out and back to the user; one line each before any depth.

How it works

Step 1 of 11

One action. Name it ("a candidate clicks Submit") and follow that one request, not the diagram box by box.

In the kitchen

one line a stage, swim start to finish line → one line a hop, the whole path first (steps 1, 3, 6)

Analogy: A triathlon commentator's recap

Viewers tune in as the leader crosses the line. The commentator recaps her race in one line a stage, in order: the swim start, out of the water fourth, a quick first transition, the bike leg where she caught the front group, the second transition, the run, the finish. At each stage she says what could have cost the race and how viewers would have seen it: a lost goggle, a slow wetsuit. Only when the producer asks for the bike leg does she open it up: the climb, the gear change. And she reminds viewers that the official time comes later, once the timing chips are checked.

In the recap	In the trace
one line a stage, swim start to finish line	one line a hop, the whole path first (steps 1, 3, 6)
what each stage could have cost, as viewers saw it	a failure per hop, as the user sees it (step 7)
the bike leg opened when the producer asks	depth where the interviewer points (step 10)
the official time, later, after the chips	the second leg (step 5)

Breaks down when: a race only moves forward; a request also comes back, and its second leg can overtake the reply. Wrong inference: "the trace ends at the far end of the system."

In real terms: name the action, give each hop one line and one failure, out and back, then stop and let the interviewer pick the hop to open.

What the sources support, and what they don't. S1 is MDN's "Populating the page: how browsers work" and S2 is the NestJS docs' "Request lifecycle", both read on 2026-10-15 and valid as of 2026-10-15. S1 walks a page load hop by hop and times it from the user's click; S2 lays out NestJS's lifecycle in and back out. Neither is about interviews. "Completeness and order before depth" is the curriculum row's line and this lesson's advice; the cut and the thread are this lesson's labelled models, not measurements.

Try it

Answer first, then check. Nothing is saved.

Question 1 of 8

Chat app, timed on this lesson's thread model. Ana sends Ben a photo. Her phone is on a slow train connection: the upload takes 1,800 ms to reach the API, and the API's reply takes 400 ms to come back. The API spends 30 ms on the request in all. A worker takes a queued job 50 ms after it is queued, and its push reaches Ben's phone 120 ms after that; Ben is on fast Wi-Fi.

In what order do these happen?

Your order

1empty
2empty
3empty
4empty
5empty

Tap the lines in the order you expect.

Question 2 of 8

Chat app, as you drew it in this lesson's thread model: tapping Send shows the message as “sending” at once; the API checks the session, saves the message, queues a fan-out job and only then replies; on any error it replies 500 and the app marks the message “failed”; a worker takes the job and pushes the message to the other phone. One morning Ana's message to Ben turns “failed”. Ben's phone never gets a push, yet when he reopens the chat a minute later, the message is there.

Where did the send break?

Question 3 of 8

Chat app, timed on this lesson's thread model. When Ben opens a conversation, his app sends a read marker; the API records it, queues a job and replies to Ben; a worker takes the job and pushes “Seen” to Ana's phone. The interviewer gives you peak figures: Ben's request takes 90 ms to reach the API and the reply 90 ms to come back; the API spends 25 ms; a queued job waits 1,400 ms for a free worker, which then spends 15 ms; the push takes 70 ms to reach Ana. Then: “Where could latency come from?

Roughly how long after Ben opens the chat does Ana see Seen?” Which answer is right?

Question 4 of 8

Chat app, on this lesson's thread model: Ana's phone, the API and its database, a job queue, fan-out workers, Ben's phone. A message reaches an open chat by a worker's push. A job that fails is retried 15 minutes later. A bad deploy stops every worker from 10:02 to 10:12; no job is lost. At 10:05 Ana sends Ben a message, while Ben has the chat open.

The interviewer asks: “What do Ana and Ben each see?” Which answer is right?

Question 5 of 8

Chat design round. The interviewer asks what happens when Ana sends Ben a message. On each line, name one thing that can fail there and what the user would see, and keep it to 150 words.

Write the trace you would say aloud, one line per hop, from her tap to the message on Ben's screen and her “sent” tick.

Your answer (optional, stays on this page)

Question 6 of 8

A friend who builds chat apps has a frontend interview tomorrow. She says: “For a what-happens-when question I go as deep as I can on each layer as I reach it; depth is what shows seniority.” She asks what you think.

In three to five sentences, write what you tell her.

Your answer (optional, stays on this page)

Question 7 of 8

Streaming app, as you drew it in this lesson's thread model: tapping Download shows “Preparing” at once; the API checks the viewer's plan, saves a download record, queues a packaging job and then replies (any error replies 500 and the app shows “Download failed”); a worker packages the episode, marks the record ready and pushes “Ready to watch” to the phone. The phone and the laptop both read the record through the API's cache. The phone reads the record again only when its Downloads page is reopened. A viewer's phone has shown “Preparing” for an hour, with the Downloads page open the whole time. On her laptop, the account page lists the episode as ready.

Where did the download's path break?

Question 8 of 8

Ticketing interview.

The interviewer asks: “Walk me through what happens when a fan types the box office's address into a browser and presses Enter.” Going by MDN's “Populating the page: how browsers work” (read 2026-10-15), where does a complete answer start and end?

Go deeper

Pro tip

Before your next mock round, write the hop list of one action from the product you know best, one line each, from the tap to the screen and any second leg. Read it aloud against a timer: if it runs past a minute, cut words per hop, never hops.

Checked against the tools and docs as of 2026-10-15.

Predict first