Static Web Application throws unspecific error (500) when using ReadableStream

Question

I'm having a Svelte/SvelteKit application that has also some API endpoints delivering data. The application is deployed using swa CLI. Everything is working except on endpoint, where I want to stream data that is asynchronously generated and may take some time (from 5 minutes to an hour).

When using streamed data with ReadableStream and Content-Type: 'text/event-stream' I always get an 500 error without any additional information. Even a big try/catch block and generating an 400 response fails (again I get an 500) :(

import { json, type RequestHandler } from "@sveltejs/kit";

let tmo: any;
export const GET: RequestHandler = async ({ params }) => {
	 try {
		  const stream = new ReadableStream({
				start(controller) {
					 controller.enqueue("data: start data\n\n");
					 tmo = setTimeout(() => {
						controller.enqueue("data: end data\n\n");
						controller.close();
					 }, 1000)
				},
				cancel() {
					 clearTimeout(tmo);
				}
		  });
		  return new Response(stream, {
				headers: {
					 'Content-Type': 'text/event-stream', // 'text/event-stream'
					 'Cache-Control': 'no-cache',
				}
		  })
	 } catch (err: any) {
		  return  json({
				error: err.msg,
				obj: JSON.stringify(err, null, 3)
		  }, { status: 400 });
	 }
}

Running locally using vite dev there is no problem.

But using swa start (also locally) the following console output is generated:

[2025-01-13T09:44:26.445Z] Host lock lease acquired by instance ID '000000000000000000000000D4E7EE2E'.
GET http://127.0.0.1:7071/api/__render (proxy)
[2025-01-13T09:45:20.443Z] Executing 'Functions.sk_render' (Reason='This function was programmatically called via the host APIs.', Id=4eba5d28-641b-4ca3-a63b-376d5c8d7592)
[2025-01-13T09:45:20.554Z] Executed 'Functions.sk_render' (Failed, Id=4eba5d28-641b-4ca3-a63b-376d5c8d7592, Duration=138ms)
[2025-01-13T09:45:20.555Z] System.Private.CoreLib: Exception while executing function: Functions.sk_render. System.Private.CoreLib: Result: Failure
[2025-01-13T09:45:20.555Z] Exception: Received non-Uint8Array chunk
[2025-01-13T09:45:20.556Z] Stack: TypeError: Received non-Uint8Array chunk
[2025-01-13T09:45:20.556Z]     at readAllBytes (node:internal/deps/undici/undici:1713:17)
[2025-01-13T09:45:20.557Z]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[2025-01-13T09:45:20.557Z]     at async fullyReadBody (node:internal/deps/undici/undici:1664:24)
[2025-01-13T09:45:20.557Z]     at async specConsumeBody (node:internal/deps/undici/undici:5564:7)
[2025-01-13T09:45:20.558Z]     at async toResponse (/home/knut/Documents/CMC_eval_suite/ai-cmc-eval-suite/build/server/sk_render/index.js:91568:34)
[2025-01-13T09:45:20.558Z]     at async Object.index12 (/home/knut/Documents/CMC_eval_suite/ai-cmc-eval-suite/build/server/sk_render/index.js:91544:20).
GET http://localhost:4280/api/__render - 500

I found another problem description that matches my problem. But unfortunately without any solution: https://github.com/Azure/azure-functions-nodejs-library/issues/290

I'm happy for any help!

Answer 1

@Knut Wehrle ,

Based on our previous discussions, here’s a consolidated solution for handling streaming responses in your Static Web App (SWA) using Azure Functions:

1. Fixing the 500 Error with TextEncoder: As you've already implemented, using TextEncoder().encode() for formatting your stream chunks resolves the issue of non-Uint8Array chunks. Here's an example to ensure proper encoding for the streamed data:
2. Handling Dynamic Routes for Streaming: To support dynamic routes, such as /session/[id]/llm, you should configure the staticwebapp.config.json (or swa-cli.config.json) with wildcard routes. Here's an example configuration to ensure streaming is handled for such dynamic paths: {

   "routes": [
   
       {
   
           "route": "/session/*/llm",
   
           "allowedRoles": ["anonymous"]
   
       }
   
   ]
   

   }
   If you have any further questions or encounter issues, feel free to reach out!

Answer 2

Unfortunately I still get no stream but all at once. I already double checked staticwebapp.config.json and everything is fine. It seems, that the server buffers everything and sends no data after each enqueue() call.