Server-Sent Events

• EventSource.CONNECTING after an error means the browser will retry by itself; treating that as a fatal error and building a second retry loop on top produces two competing reconnection policies.
• The constructor takes a URL and { withCredentials }. There is no header option, and that constraint should shape the auth design rather than be discovered by it.
• Every event carries lastEventId, so your reducer always knows its position in the stream without tracking it separately (Ordering and Duplicate Delivery).

1// One instance, owned by one module. Not one per component.
2const es = new EventSource('/api/stream')   // cookies ride along, same-origin
3 
4// Named events demultiplex without a discriminator field in the payload.
5es.addEventListener('order.created', (e) => {
6  applyEvent(JSON.parse(e.data), e.lastEventId)
7})
8es.addEventListener('order.updated', (e) => {
9  applyEvent(JSON.parse(e.data), e.lastEventId)
10})
11 
12// onerror does NOT mean "give up". The browser is already reconnecting;
13// readyState tells you which state it is in.
14es.onerror = () => {
15  setConnectionState(es.readyState === EventSource.CLOSED ? 'closed' : 'reconnecting')
16}
17es.onopen = () => setConnectionState('live')
18 
19// The stream is a resource with an owner and a lifetime.
20window.addEventListener('pagehide', () => es.close())

What is absent is the lesson: no timer, no attempt counter, no jitter, no Last-Event-ID tracking. es.readyState distinguishes "reconnecting" from "permanently closed", which is the distinction the UI needs to render honestly.

1HTTP/1.1 200 OK
2Content-Type: text/event-stream
3Cache-Control: no-store
4Connection: keep-alive
5 
6retry: 3000
7 
8id: 1041
9event: order.created
10data: {"id":"o_88","total":1299}
11 
12id: 1042
13event: order.updated
14data: {"id":"o_88","status":"paid"}
15 
16: keep-alive comment, defeats idle timeouts, dispatches nothing
17 
18--- connection drops here; the browser waits, then re-requests ---
19 
20GET /api/stream HTTP/1.1
21Accept: text/event-stream
22Last-Event-ID: 1042
23Cookie: session=...

retry: sets the browser's reconnection delay in milliseconds — the one place a real millisecond number belongs, because it is a protocol field rather than a claim about performance. A line beginning with : is a comment that keeps intermediaries from declaring the connection idle.