Azure Static Web Apps - Deploying Svelte App with SSR

[onlyutkarsh]

Investigative information

I have a Sveltekit app and I am using https://github.com/geoffrich/svelte-adapter-azure-swa adapter to deploy to Azure Static Web App. The app has an API built-in (/chat/api) and I am calling it from the front end. The API makes a call to Azure OpenAI and streams the data back to front end. The frontend loads fine, however when it makes the call to the API it returns an error (screenshot below). I am able to replicate the issue locally on the emulator using SWA CLI and I see below error.

Repro steps

Under src/routes/chat/api, have a +server.ts file with a POST endpoint which is something like this.

export const POST: RequestHandler = async ({ request }) => {
	const openAIClient = new OpenAIClient(env.AZ_OPENAI_ENDPOINT, new AzureKeyCredential(env.AZ_OPENAI_TOKEN));
	const events = await.openAIClient.streamChatCompletions(env.AZ_OPENAI_DEPLOYMENT_NAME, messages, {
		...
	});
	const stream = new ReadableStream({
		async start(controller) {
    		...
			controller.close();
		}
  	});

	return new Response(stream, {
		status: 200,
		headers: {
			'Cache-Control': 'no-cache',
			'Content-Type': 'text/event-stream',
			Connection: 'keep-alive'
		}
	});
}

Start the app using swa CLI (swa start), and using any REST Client, make a call to local API and you get the above error.

I have following SWA CLI config for local

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "km-svelte": {
      "appLocation": "./",
      "apiLocation": "build/server",
      "outputLocation": "build/static",
      "apiLanguage": "node",
      "apiVersion": "18",
      "appBuildCommand": "npm run build",
      "run": "npm run dev",
      "verbose": "true",
      "platform": {
        "apiRuntime": "node:20"
      }
    }
  }
}

Expected behavior

The data is streamed back to the front end/client.

Actual behavior

Error as below

[2024-08-10T11:39:47.676Z] Executing 'Functions.sk_render' (Reason='This function was programmatically called via the host APIs.', Id=915b21cb-c9b5-4992-b0b2-5ffd012c2f46)
[2024-08-10T11:39:49.299Z] Executed 'Functions.sk_render' (Failed, Id=915b21cb-c9b5-4992-b0b2-5ffd012c2f46, Duration=1629ms)
[2024-08-10T11:39:49.299Z] System.Private.CoreLib: Exception while executing function: Functions.sk_render. System.Private.CoreLib: Result: Failure
[2024-08-10T11:39:49.299Z] Exception: Received non-Uint8Array chunk
[2024-08-10T11:39:49.299Z] Stack: TypeError: Received non-Uint8Array chunk
[2024-08-10T11:39:49.299Z]     at readAllBytes (node:internal/deps/undici/undici:4417:17)
[2024-08-10T11:39:49.299Z]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[2024-08-10T11:39:49.299Z]     at async fullyReadBody (node:internal/deps/undici/undici:4381:22)
[2024-08-10T11:39:49.299Z]     at async consumeBody (node:internal/deps/undici/undici:5463:7)
[2024-08-10T11:39:49.299Z]     at async toResponse (/Users/utkarsh/_DEV/GitHub/onlyutkarsh/km/build/server/sk_render/index.js:162301:34)
[2024-08-10T11:39:49.299Z]     at async Object.index4 (/Users/utkarsh/_DEV/GitHub/onlyutkarsh/km/build/server/sk_render/index.js:162277:20).
POST http://localhost:4280/api/__render - 500

Known workarounds

Provide a description of any known workarounds.

Related information

Provide any related information

• Static Web App Hosting Plan: Standard
• Programming language used: SvelteKit and Typescript
• Core Tools Version: 4.0.5907 Commit hash: N/A +807e89766a92b14fd07b9f0bc2bea1d8777ab209 (64-bit)
• Function Runtime Version: 4.834.3.22875

[kwehrle]

@onlyutkarsh I'm having exactly the same problem and no idea how to handle this. Do you have any new information or already solved the problem?

I posted more or less this problem on Microsoft Q&A:
https://learn.microsoft.com/en-us/answers/questions/2145747/static-web-application-throws-unspecific-error-(50
The solution is quite simple. The enqueued data must be encoded with Textencoder.encode()

[onlyutkarsh]

Hey @kwehrle - I could not resolve it. I decided to host my webapp in an AppService.

[kwehrle]

I decided to go with with an Container Instance on Azure. This also solved the problem.
From MS I got the information, that the problem is, that svelte-adapter-azure-swa currently not supports streaming. But it seems, that geoffrich is on it and maybe in the next time it will - hopefully - work.