bug(web): DELETE conversation fails with "Failed to fetch" TypeError #195

Closed
opened 2026-03-17 02:14:12 +00:00 by jason.woltje · 0 comments
Owner

Description

Attempting to delete a conversation via the web dashboard fails with a TypeError: Failed to fetch at the network level. The request never completes — this is not a server-side error but a client-side fetch failure.

Error

TypeError: Failed to fetch
    at api (src/lib/api.ts:28:21)
    at ChatPage.useCallback[handleDelete] (src/app/(dashboard)/chat/page.tsx:154:16)
    at ConversationList.useCallback[confirmDelete] (src/components/chat/conversation-list.tsx:121:7)

Location

  • apps/web/src/lib/api.ts:28fetch() call fails
  • apps/web/src/app/(dashboard)/chat/page.tsx:154handleDelete calls api<void>(\/api/conversations/${id}`, { method: 'DELETE' })`
  • apps/gateway/src/conversations/conversations.controller.ts:67@Delete(':id') endpoint exists and returns 204

Analysis

Failed to fetch is a browser-level network error, not an HTTP error. The request does not reach the server. Likely causes:

  1. CORS preflight failure on DELETEDELETE is not a simple method, so the browser sends an OPTIONS preflight request. The gateway CORS config (enableCors({ origin, credentials })) uses Fastify's CORS plugin which should handle this, but verify:

    • Is @fastify/cors properly handling OPTIONS preflight for DELETE method?
    • Is the Access-Control-Allow-Methods response header including DELETE?
  2. Mixed content / URL mismatch — If the web app runs on a different origin than http://localhost:3000 (e.g., HTTPS, different port, or a real domain), the CORS origin check will reject it. GATEWAY_CORS_ORIGIN is set to http://localhost:3000 in .env.

  3. Gateway not running — The simplest cause. If the gateway is down, all fetches fail with this error.

This may share a root cause with #191 (sidebar delete in TUI also fails). Both attempt DELETE /api/conversations/:id — if the endpoint itself is broken, both clients would fail.

Steps to Reproduce

  1. Open web dashboard at http://localhost:3000
  2. Navigate to Chat page
  3. Right-click or use the delete action on a conversation
  4. Error appears in browser console

Environment

  • Next.js 16.1.6 (Turbopack)
  • Gateway CORS origin: http://localhost:3000
  • Gateway port: 4000
## Description Attempting to delete a conversation via the web dashboard fails with a `TypeError: Failed to fetch` at the network level. The request never completes — this is not a server-side error but a client-side fetch failure. ## Error ``` TypeError: Failed to fetch at api (src/lib/api.ts:28:21) at ChatPage.useCallback[handleDelete] (src/app/(dashboard)/chat/page.tsx:154:16) at ConversationList.useCallback[confirmDelete] (src/components/chat/conversation-list.tsx:121:7) ``` ## Location - `apps/web/src/lib/api.ts:28` — `fetch()` call fails - `apps/web/src/app/(dashboard)/chat/page.tsx:154` — `handleDelete` calls `api<void>(\`/api/conversations/\${id}\`, { method: 'DELETE' })` - `apps/gateway/src/conversations/conversations.controller.ts:67` — `@Delete(':id')` endpoint exists and returns 204 ## Analysis `Failed to fetch` is a browser-level network error, not an HTTP error. The request does not reach the server. Likely causes: 1. **CORS preflight failure on DELETE** — `DELETE` is not a simple method, so the browser sends an `OPTIONS` preflight request. The gateway CORS config (`enableCors({ origin, credentials })`) uses Fastify's CORS plugin which should handle this, but verify: - Is `@fastify/cors` properly handling `OPTIONS` preflight for `DELETE` method? - Is the `Access-Control-Allow-Methods` response header including `DELETE`? 2. **Mixed content / URL mismatch** — If the web app runs on a different origin than `http://localhost:3000` (e.g., HTTPS, different port, or a real domain), the CORS origin check will reject it. `GATEWAY_CORS_ORIGIN` is set to `http://localhost:3000` in `.env`. 3. **Gateway not running** — The simplest cause. If the gateway is down, all fetches fail with this error. ## Related This may share a root cause with #191 (sidebar delete in TUI also fails). Both attempt `DELETE /api/conversations/:id` — if the endpoint itself is broken, both clients would fail. ## Steps to Reproduce 1. Open web dashboard at `http://localhost:3000` 2. Navigate to Chat page 3. Right-click or use the delete action on a conversation 4. Error appears in browser console ## Environment - Next.js 16.1.6 (Turbopack) - Gateway CORS origin: `http://localhost:3000` - Gateway port: 4000
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mosaicstack/stack#195