loop: mediarecorder-stt completed after 6 iterations

Author: chriswritescode-dev

frontend/public/audio-worklet-processor.js

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { sttApi } from './stt'
+import { FetchError } from './fetchWrapper'
 
 describe('WAV extension selection logic', () => {
   const originalFetch = global.fetch
@@ -69,6 +70,18 @@ describe('WAV extension selection logic', () => {
     expect(audioFile.name).toBe('recording.m4a')
   })
 
+  it('should return webm for audio/webm;codecs=opus blob', async () => {
+    const blob = new Blob([], { type: 'audio/webm;codecs=opus' })
+    mockFetch.mockResolvedValueOnce(createMockResponse(true, { text: 'test' }))
+
+    await sttApi.transcribe(blob, 'test-user')
+
+    const callArgs = mockFetch.mock.calls[0]
+    const formData = callArgs[1]?.body as FormData
+    const audioFile = formData.get('audio') as File
+    expect(audioFile.name).toBe('recording.webm')
+  })
+
   it('should default to wav for unknown types', async () => {
     const blob = new Blob([], { type: 'audio/unknown' })
     mockFetch.mockResolvedValueOnce(createMockResponse(true, { text: 'test' }))
@@ -123,3 +136,85 @@ describe('WAV extension selection logic', () => {
     expect(formData.get('audio')).toBeInstanceOf(File)
   })
 })
+
+describe('sttApi.transcribe cancellation and timeout', () => {
+  const originalFetch = global.fetch
+
+  beforeEach(() => {
+    vi.stubGlobal('fetch', vi.fn())
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    global.fetch = originalFetch
+  })
+
+  it('throws 499 CANCELED when caller aborts', async () => {
+    const blob = new Blob([], { type: 'audio/webm;codecs=opus' })
+    const abortController = new AbortController()
+
+    const mockFetch = global.fetch as ReturnType<typeof vi.fn>
+    mockFetch.mockImplementation((_url: string, options: RequestInit) => {
+      const signal = options.signal as AbortSignal
+      return new Promise((_resolve, reject) => {
+        if (signal.aborted) {
+          const err = new Error('The operation was aborted')
+          err.name = 'AbortError'
+          reject(err)
+          return
+        }
+        signal.addEventListener('abort', () => {
+          const err = new Error('The operation was aborted')
+          err.name = 'AbortError'
+          reject(err)
+        }, { once: true })
+      })
+    })
+
+    const promise = sttApi.transcribe(blob, 'test-user', abortController.signal)
+
+    abortController.abort()
+
+    await expect(promise).rejects.toThrow(FetchError)
+    await expect(promise).rejects.toMatchObject({
+      statusCode: 499,
+      code: 'CANCELED',
+    })
+  })
+
+  it('throws 408 TIMEOUT when transcription times out', async () => {
+    vi.useFakeTimers()
+
+    const blob = new Blob([], { type: 'audio/webm;codecs=opus' })
+
+    const mockFetch = global.fetch as ReturnType<typeof vi.fn>
+    mockFetch.mockImplementation((_url: string, options: RequestInit) => {
+      const signal = options.signal as AbortSignal
+      return new Promise((_resolve, reject) => {
+        if (signal.aborted) {
+          const err = new Error('The operation was aborted')
+          err.name = 'AbortError'
+          reject(err)
+          return
+        }
+        signal.addEventListener('abort', () => {
+          const err = new Error('The operation was aborted')
+          err.name = 'AbortError'
+          reject(err)
+        }, { once: true })
+      })
+    })
+
+    const promise = sttApi.transcribe(blob, 'test-user')
+
+    vi.advanceTimersByTime(60000)
+
+    await expect(promise).rejects.toThrow(FetchError)
+    await expect(promise).rejects.toMatchObject({
+      statusCode: 408,
+      code: 'TIMEOUT',
+    })
+
+    vi.useRealTimers()
+  })
+})

frontend/src/api/stt.test.ts

@@ -54,18 +54,27 @@ export const sttApi = {
     urlObj.searchParams.set('userId', userId)
 
     const controller = new AbortController()
-    const timeoutId = setTimeout(() => controller.abort(), 60000)
+    let timeoutFired = false
+    const timeoutId = setTimeout(() => {
+      timeoutFired = true
+      controller.abort()
+    }, 60000)
 
-    const abortSignal = signal || controller.signal
+    if (signal?.aborted) {
+      controller.abort()
+    }
+    const onAbort = () => controller.abort()
+    signal?.addEventListener('abort', onAbort, { once: true })
 
     try {
       const response = await fetch(urlObj.toString(), {
         method: 'POST',
         body: formData,
-        signal: abortSignal,
+        signal: controller.signal,
       })
 
       clearTimeout(timeoutId)
+      signal?.removeEventListener('abort', onAbort)
 
       if (!response.ok) {
         const data = await response.json().catch(() => ({ error: 'Transcription failed' }))
@@ -75,7 +84,12 @@ export const sttApi = {
       return response.json()
     } catch (error) {
       clearTimeout(timeoutId)
+      signal?.removeEventListener('abort', onAbort)
+
       if (error instanceof Error && error.name === 'AbortError') {
+        if (signal?.aborted && !timeoutFired) {
+          throw new FetchError('Transcription canceled', 499, 'CANCELED')
+        }
         throw new FetchError('Transcription timeout', 408, 'TIMEOUT')
       }
       throw error