fix(api): handle non-json response (#1159)

nicolaskempf57 · web-flow · commit 83154ad70394 · 2026-06-29T15:01:52.000+02:00
diff --git a/plugins/api.ts b/plugins/api.ts
@@ -1,4 +1,5 @@
 import { toast } from '@datagouv/components-next'
+import { getApiErrorMessage } from '~/utils/api'
 
 export default defineNuxtPlugin({
   async setup(nuxtApp) {
@@ -65,26 +66,7 @@ export default defineNuxtPlugin({
             return
           }
 
-          let message = ''
-          if (response._data) {
-            try {
-              if ('error' in response._data) {
-                message = response._data.error
-              }
-              else if ('message' in response._data) {
-                message = response._data.message
-              }
-              else if ('errors' in response._data && typeof response._data.errors === 'object') {
-                message = Object.entries(response._data.errors).map(([key, value]) => `${key}: ${value}`).join(' ; ')
-              }
-              else if ('response' in response._data && 'errors' in response._data.response && Array.isArray(response._data.response.errors)) {
-                message = response._data.response.errors.join(' ; ')
-              }
-            }
-            catch (e) {
-              console.error(e)
-            }
-          }
+          const message = getApiErrorMessage(response._data)
 
           if (options?.method && ['POST', 'PUT', 'PATCH'].includes(options.method) && response.status === 400) {
             toast.error(t(`Le formulaire contient des erreurs. ${message}`))
diff --git a/tests-unit/utils/api.spec.ts b/tests-unit/utils/api.spec.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it, vi } from 'vitest'
+import { getApiErrorMessage } from '~/utils/api'
+
+describe('getApiErrorMessage', () => {
+  it('returns an empty string for string response data and logs a warning excerpt', () => {
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const html = '<html>Server Error</html>'
+
+    expect(getApiErrorMessage(html)).toBe('')
+    expect(errorSpy).not.toHaveBeenCalled()
+    expect(warnSpy).toHaveBeenCalledWith('[API] Non-JSON error response:', html)
+
+    errorSpy.mockRestore()
+    warnSpy.mockRestore()
+  })
+
+  it('returns an empty string for null or undefined response data', () => {
+    expect(getApiErrorMessage(null)).toBe('')
+    expect(getApiErrorMessage(undefined)).toBe('')
+  })
+
+  it('extracts the `error` field when present', () => {
+    expect(getApiErrorMessage({ error: 'Something went wrong' })).toBe('Something went wrong')
+  })
+
+  it('extracts the `message` field when present', () => {
+    expect(getApiErrorMessage({ message: 'A message' })).toBe('A message')
+  })
+
+  it('prefers `error` over `message`', () => {
+    expect(getApiErrorMessage({ error: 'First', message: 'Second' })).toBe('First')
+  })
+
+  it('formats an `errors` object into a human readable string', () => {
+    expect(getApiErrorMessage({ errors: { name: 'required', email: 'invalid' } })).toBe('name: required ; email: invalid')
+  })
+
+  it('joins response.errors array when present', () => {
+    expect(getApiErrorMessage({ response: { errors: ['bad', 'worse'] } })).toBe('bad ; worse')
+  })
+})
diff --git a/utils/api.ts b/utils/api.ts
@@ -62,6 +62,45 @@ export function getDataFromSSRPayload(key: string, nuxtApp: NuxtApp) {
   return nuxtApp.payload.data[key] ? nuxtApp.payload.data[key] : undefined
 }
 
+/**
+ * Extract a human-readable error message from an API error response body.
+ * Handles non-JSON responses (e.g. HTML error pages) gracefully.
+ */
+export function getApiErrorMessage(data: unknown): string {
+  if (!data || typeof data !== 'object') {
+    if (typeof data === 'string' && data.length) {
+      console.warn('[API] Non-JSON error response:', data.slice(0, 200))
+    }
+    return ''
+  }
+
+  const record = data as Record<string, unknown>
+
+  if ('error' in record && typeof record.error === 'string') {
+    return record.error
+  }
+
+  if ('message' in record && typeof record.message === 'string') {
+    return record.message
+  }
+
+  if ('errors' in record && typeof record.errors === 'object' && record.errors !== null) {
+    return Object.entries(record.errors).map(([key, value]) => `${key}: ${value}`).join(' ; ')
+  }
+
+  if (
+    'response' in record
+    && record.response
+    && typeof record.response === 'object'
+    && 'errors' in record.response
+    && Array.isArray((record.response as Record<string, unknown>).errors)
+  ) {
+    return ((record.response as Record<string, unknown>).errors as string[]).join(' ; ')
+  }
+
+  return ''
+}
+
 export function usePostApiWithCsrf() {
   const { $api } = useNuxtApp()
 
