fix(errors) : humanize backend error messages for end users
Add centralized error translation layer (humanizeError) that converts raw Symfony/Doctrine/API Platform messages into user-friendly French. Fix useApi to extract errors from all backend response formats (violations, error, message, hydra:description, detail). Add toast deduplication to prevent double display. Replace error toast icon (X → CircleX) to distinguish from the dismiss button. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { useToast } from './useToast'
|
||||
import { humanizeError, extractApiErrorMessage } from '~/shared/utils/errorMessages'
|
||||
|
||||
export interface ApiResponse<T = any> {
|
||||
success: boolean
|
||||
@@ -59,23 +60,26 @@ export function useApi() {
|
||||
} else {
|
||||
const contentType = response.headers.get('content-type') || ''
|
||||
let errorData: Record<string, unknown> = {}
|
||||
if (contentType.includes('application/json')) {
|
||||
if (contentType.includes('json')) {
|
||||
errorData = await response.json().catch(() => ({}))
|
||||
} else {
|
||||
const text = await response.text().catch(() => '')
|
||||
errorData = text ? { message: text } : {}
|
||||
}
|
||||
const errorMessage = response.status === 403
|
||||
const rawMessage = response.status === 403
|
||||
? 'Permissions insuffisantes pour cette action.'
|
||||
: (errorData.message as string) || `Erreur ${response.status}: ${response.statusText}`
|
||||
: extractApiErrorMessage(errorData) || `Erreur ${response.status}: ${response.statusText}`
|
||||
const errorMessage = humanizeError(rawMessage)
|
||||
showError(errorMessage)
|
||||
return { success: false, error: errorMessage, status: response.status }
|
||||
}
|
||||
} catch (error) {
|
||||
clearTimeout(timeoutId)
|
||||
const err = error as Error & { name?: string }
|
||||
const errorMessage = err.name === 'AbortError' ? 'Timeout de la requête' : err.message || 'Erreur réseau'
|
||||
showError(`Erreur réseau: ${errorMessage}`)
|
||||
const errorMessage = err.name === 'AbortError'
|
||||
? 'La requête a pris trop de temps. Veuillez réessayer.'
|
||||
: 'Impossible de contacter le serveur. Vérifiez votre connexion.'
|
||||
showError(errorMessage)
|
||||
return { success: false, error: errorMessage }
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user