APE-7: Parse API errors in chat UI

api/chat.ts

@@ -1,11 +1,12 @@
-import { CHAT_REQUEST_FAILED, createChatResponse, HttpStatus } from '../server/index.js'
+import { createChatResponse, HttpStatus, INVALID_REQUEST_JSON } from '../server/index.js'
 
 export async function POST(request: Request) {
+  let body: unknown
   try {
-    const body = await request.json()
-    return await createChatResponse(body)
-  } catch (error) {
-    const message = error instanceof Error ? error.message : CHAT_REQUEST_FAILED
-    return Response.json({ error: message }, { status: HttpStatus.InternalServerError })
+    body = await request.json()
+  } catch {
+    return Response.json({ error: INVALID_REQUEST_JSON }, { status: HttpStatus.BadRequest })
   }
+
+  return createChatResponse(body)
 }

server/index.ts

@@ -4,6 +4,7 @@ export { chatRequestSchema } from './chatRequest.js'
 export {
   CHAT_REQUEST_FAILED,
   INVALID_CHAT_REQUEST,
+  INVALID_REQUEST_JSON,
   OPENAI_API_KEY_MISSING,
 } from './messages.js'
 export { HttpStatus, type HttpStatusCode } from './httpStatus.js'

server/messages.ts

@@ -1,6 +1,8 @@
 export const OPENAI_API_KEY_MISSING =
   'OpenAI API key is not configured. For local development, add OPENAI_API_KEY to a .env file in the project root and restart the dev server. On Vercel, add OPENAI_API_KEY under Project Settings → Environment Variables.'
 
+export const INVALID_REQUEST_JSON = 'Request body must be valid JSON.'
+
 export const INVALID_CHAT_REQUEST = 'Invalid chat request body.'
 
 export const CHAT_REQUEST_FAILED = 'Chat request failed.'

src/lib/getChatErrorMessage.ts

@@ -1,11 +1,22 @@
 import { CHAT_CLIENT_ERROR } from '../../server/messages'
 
+function parseApiError(text: string): string | null {
+  if (!text.trim().startsWith('{')) return null
+
+  try {
+    const error = (JSON.parse(text) as { error?: string }).error
+    return error?.trim() ?? null
+  } catch {
+    return null
+  }
+}
+
 export function getChatErrorMessage(
   error: { message: string } | undefined,
   status: string,
 ): string | null {
   if (error?.message) {
-    return error.message
+    return parseApiError(error.message) ?? error.message
   }
 
   if (status === 'error') {

vite/apiDevMiddleware.ts

@@ -1,5 +1,5 @@
 import type { IncomingMessage, ServerResponse } from 'node:http'
-import { CHAT_REQUEST_FAILED, createChatResponse, HttpStatus } from '../server'
+import { CHAT_REQUEST_FAILED, createChatResponse, HttpStatus, INVALID_REQUEST_JSON } from '../server'
 
 type ConnectNext = (error?: unknown) => void
 
@@ -43,7 +43,14 @@ async function sendWebResponse(webResponse: Response, res: ServerResponse): Prom
 }
 
 async function handleChatPost(req: IncomingMessage, res: ServerResponse): Promise<void> {
-  const body = await readJsonBody(req)
+  let body: unknown
+  try {
+    body = await readJsonBody(req)
+  } catch {
+    sendJson(res, HttpStatus.BadRequest, { error: INVALID_REQUEST_JSON })
+    return
+  }
+
   const webResponse = await createChatResponse(body)
   await sendWebResponse(webResponse, res)
 }