Read a Streamed response in a middleware

[unsync]

Hi !
I've spent hours on this, it is possibly impossible to do, but i'd prefer to ask before giving up ^^

I'm trying, in a middleware, to spy/read/follow or whatever naming is best, a streamed response.

Context:

• I do not control the handler, or at least i'd prefer not to touch it's code
• I need the client to still get a stream, not blocking the I/O

I've tried many, many, many things i could find on the web (clone the response, etc), most of the time i either end up reading the stream and i block the response, or i manage to somehow follow the stream but the client gets the response in one time.

The why:

The idea is to log some of the data returned into the stream.

My workaround:

While i want to avoid touching my handler code, i added a context variable that contains a function, called when the stream is done :

// middleware.js
c.set('streamEnd', async (chunks: any) => {
  // handle my stream
})

// handler.js
const chunks = []
for await (const chunk of stream) {
    chunks.push(chunk)
    await writer.write(encoder.encode(chunk));
}
c.var.streamEnd(chunks);
writer.close();

Forgive me for this partial and somehow pseudo-code, if someone get the idea and needs more, i'm listening :)

My middleware :

export function myLastMiddleware() {
    return async function handle(c: Context, next: Next) {
        // nothing special here
        await next()
        // here, i need to read/follow/spy on my Stream
    }
}

Thanks a lot for any tips towards a solution 🙏

[unsync]

Turns out i found the solution, i guess i needed another look with a cleared head.
Here is my code for the posterity, feel free to challenge it :)

There is some obvious null checks to add depending on your use-case and code, but if are trying to achieve something similar, it should work :)

Disclamer: this has only been tested locally with wrangler, and on Cloudflare

Also, if you don't know this yet, remember to use this whenever you have a promise in your callback :

c.executionCtx.waitUntil(myAsyncPromise());

The middleware:

export function myMiddleware() {
    return async function handle(c: Context, next: Next) {
        // do what you want here
        await next()
        
        const clonedRequest = c.res.clone()

        // Transform the response by adding our callback
        const transformedStream = new ReadableStream({
            async start(controller): Promise<void> {
                const reader = clonedRequest.body.getReader()
                const decoder = new TextDecoder()

                // OPTIONAL: collect chunks
                const chunks: string[] = []

                while (true) {
                    const { done, value } = await reader.read()
                    if (done) break
                    const chunkText = decoder.decode(value, { stream: true })
                    controller.enqueue(value)

                    // OPTIONAL: collect chunk
                    if(chunkText) chunks.push(chunkText)
                }
                controller.close()

                // OPTIONAL: insert your callback here
                streamCallback(c, chunks)
            }
        })

        // Create a new response with the transformed stream
        return new Response(transformedStream, {
            headers: c.res.headers
        })
    }
}