Auto-reconnecting perpetual SSE

[yinghaochan]

I'm looking to have a stream that always tries to reconnect to the server no matter what.

An example of this could be to display a live currency exchange rate, that will have new data forever.

The current docs says: The Client Retry Plugin enables retrying client calls when errors occur.

import { consumeEventIterator } from '@orpc/client'

const cancel = consumeEventIterator(client.streaming(undefined, {context: {retry: Infinity}}), {
  onEvent: (event) => {
    console.log(event.message)
  },
  onError: (error) => {
    console.error(error)
  },
  onSuccess: (value) => {
    console.log(value)
  },
  onFinish: (state) => {
    console.log(state)
  },
})

But what about if the server instance shuts down gracefully? It should ideally try to reconnect (maybe with a backoff).

Maybe something like this?

function perpetual (){
const cancel = consumeEventIterator(client.streaming(undefined, {context: {retry: Infinity}}), {
  onEvent: (event) => {
    console.log(event.message)
  },
  onError: (error) => {
    console.error(error)
  },
  onSuccess: (value) => {
    console.log(value)
  },
  onFinish: (state) => {
   perpetual()
  },
})
}

[dosubot[bot]]

orpc's Client Retry Plugin does support infinite retries for SSE streams by setting context.retry: Infinity, and you can configure the delay between retries with retryDelay (default is 2000ms, or you can set your own). The retry logic will attempt to reconnect whenever an error occurs, including network failures and most server-side disconnects, and you can further control retry conditions with a custom shouldRetry function. When the stream ends (either by error or completion), the plugin cleans up resources and stops retrying if the abort signal is triggered. This means you generally don't need to manually recurse with your perpetual() pattern for error cases—retries are handled for you, including resource cleanup and backoff between attempts source.

However, if the server shuts down gracefully and the stream ends without an error (i.e., the iterator completes normally), the retry plugin will not reconnect—the stream is considered finished. In this case, your recursive approach using onFinish is a practical way to achieve perpetual reconnection, but you should ensure it doesn't lead to stack growth or resource leaks. Instead of recursion, consider using a loop or a restart mechanism outside the callback to avoid these issues.

For robust perpetual SSE, use the retry plugin for error-based reconnections and handle normal completion in onFinish by restarting the stream. You can also customize backoff and retry logic via the plugin options. The consumeEventIterator utility provides structured event handling and cleanup, but does not itself implement retry or reconnection logic for graceful shutdowns source.

Let me know if you want a concrete example of a safe perpetual loop pattern!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[yinghaochan]

Let me know if you want a concrete example of a safe perpetual loop pattern!

@dosu please give examples

[dosubot[bot]]

Here’s a safe perpetual SSE loop pattern for orpc that reconnects on both errors and graceful server shutdowns, without risking stack growth or resource leaks:

import { consumeEventIterator } from '@orpc/client'

let cancel: (() => Promise<void>) | undefined
let stopped = false

async function startStream() {
  if (stopped) return
  cancel = consumeEventIterator(
    client.streaming(undefined, { context: { retry: Infinity, retryDelay: 2000 } }),
    {
      onEvent: (event) => {
        console.log(event.message)
      },
      onError: (error) => {
        console.error(error)
      },
      onSuccess: (value) => {
        console.log('Stream finished:', value)
      },
      onFinish: (state) => {
        // Wait before reconnecting to avoid tight loop
        setTimeout(() => {
          if (!stopped) startStream()
        }, 2000)
      },
    }
  )
}

// To start the perpetual stream:
startStream()

// To stop and clean up:
async function stopStream() {
  stopped = true
  if (cancel) await cancel()
}

This pattern uses setTimeout in onFinish to restart the stream after any termination (error or graceful), avoiding recursion and stack growth. The cancel function lets you clean up resources if you ever want to stop the loop. You can tune retryDelay and add a custom shouldRetry for backoff or smarter retry logic as needed. The retry plugin will handle error-based reconnections automatically, while your loop ensures reconnection after normal completion source.

Let me know if you want a version with exponential backoff or more advanced control!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[yinghaochan]

unlimited depth recursion is an antipattern. @dosu can you give other examples?

[yinghaochan]

After looking at the different options, here's what we landed on:

const ac = new AbortController();

while (!ac.signal.aborted) {
    const iterator = orpc.eventStream(undefined, {
        signal: ac.signal,
        context: { retry: Infinity },
    });    //  can also wrap the `for... await` in a try / catch instead using the ClientRetryPlugin
    for await (const { event, data } of await iterator) {
        // do stuff with events here
    }
    // potentially add a wait here between retries
}