Command Palette

Search for a command to run...

Hectal
Phase 3Intermediate4 of 16 in AI Frontend

Stop, Retry and Failure

Real users press Stop, lose their connection, hit rate limits and wait on slow models. Build the controls and the honest messages for each case.

Phase 2 made Mitra stream. This phase makes it survive. A streamed answer is a long-lived connection to a slow, expensive service, so everything that can go wrong with a long conversation can go wrong here: the user changes their mind, the connection drops, the model is busy, the provider says "slow down", or the stream simply goes quiet.

You will learn the Stop button and what it really does to the browser, the network and your bill; how to keep and label a partial answer; what to do when the stream breaks halfway; the difference between retry and regenerate; how to notice a slow or stuck stream; and how to show a rate limit as a countdown instead of an error.

Every example runs real browser code against a scripted stand-in model, so each failure happens on demand and prints the same thing every time. By the end Mitra can be stopped, can recover, and always tells the user the truth about what happened.

0/7 · 0%
7 topics ~3 h 20 code blocks & diagrams
Start with the first topic
1
3.1

The Stop Button and AbortController

Stopping an answer means telling the browser to close the connection, which tells your server to stop asking the model. AbortController does it; the part people miss is telling a deliberate stop apart from a real failure, and making sure an old request never writes into a new question.

33 min 4 code practice

2
3.2

Keeping a Partial Answer

An answer can end early for four reasons: the user stopped it, the model hit its length limit, the model was blocked, or the connection failed. Keep whatever arrived, label exactly why it is unfinished, and offer the next step that fits.

28 min 2 code practice

3
3.3

When the Stream Breaks

Once the first bytes arrive the status is already 200, so a failure after that does not look like an HTTP error. A stream can break by throwing, by carrying an error message inside it, by closing early, or by sending data you cannot read. Detect each, keep the text, and offer a fresh try.

27 min 2 code practice

4
3.4

Retry and Regenerate

Retry repeats a request that failed. Regenerate asks again for a better answer to a request that worked. They send different messages, treat the old answer differently, and fail in different ways, and both can hurt a struggling server if they repeat too fast.

28 min 3 code practice

5
3.5

Slow and Stuck Requests

A slow request will finish; a stuck one never will, and from the browser they look the same until you add a clock. Use messages that grow more honest as the wait grows, and a watchdog that gives up when a stream goes quiet.

29 min 3 code practice

6
3.6

Rate Limits in the UI

A 429 means "too many requests, wait". It is the most common AI error and the one a user can fix by waiting. Read the Retry-After header, show a countdown, lock the button until it ends, and never let a retry loop burn through the allowance.

29 min 4 code practice

7
3.7

Build: Mitra Can Be Stopped and Recovers

Mitra gains a Stop button, honest labels for stopped, cut-off and broken answers, Continue, Try again, a stall watchdog and a rate-limit countdown. One status variable and one function decide what the screen shows for every ending.

32 min 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Add a Stop Button

#ask starts a streamed answer into #answer. Make the button #stop work: when it is clicked while the answer is arriving, the request must be cancelled, the text that already arrived must stay, and #status must say Stopped.

Intermediate
2

Say How the Answer Ended

Two buttons ask Mitra a question: #short and #long. The route answers in the usual JSON chat shape. Show the reply text in #answer.

Intermediate
3

Keep What Arrived

This route sends part of an answer and then the connection breaks. Right now the page throws the partial text away.

Intermediate
4

A Countdown for a Rate Limit

The first call to /api/chat is refused with 429 and Retry-After: 1. The second works.

Intermediate
5

Retry Only What Can Work

Write askWithRetry(). The route fails with 503 twice and then answers. #ask should show the answer in #answer and the number of requests it took in #attempts as Attempts: 3.

Advanced