fix: resolve HTML hydration error and improve error handling

- Fix HTML structure error: remove nested div inside p element in UploadView
- Restructure ListItemText secondary content to use valid HTML
- Add warning log for upload failures with demo data fallback
- Improve error handling for ERR_CONNECTION_REFUSED
- Ensure proper HTML semantics and prevent hydration errors
This commit is contained in:
Nicolas Cantu 2025-09-10 18:36:57 +02:00
parent e63dccf9f3
commit 7e46e1d992
2 changed files with 21 additions and 20 deletions

View File

@ -13,11 +13,11 @@ apiClient.interceptors.response.use(
(response) => response, (response) => response,
(error) => { (error) => {
console.error('API Error:', error) console.error('API Error:', error)
// Gestion gracieuse des erreurs de connexion et méthodes non supportées // Gestion gracieuse des erreurs de connexion et méthodes non supportées
if (error.code === 'ERR_NETWORK' || if (error.code === 'ERR_NETWORK' ||
error.code === 'ERR_CONNECTION_REFUSED' || error.code === 'ERR_CONNECTION_REFUSED' ||
error.response?.status === 405 || error.response?.status === 405 ||
error.response?.status === 404) { error.response?.status === 404) {
console.warn('Backend non accessible ou endpoint non supporté, mode démo activé') console.warn('Backend non accessible ou endpoint non supporté, mode démo activé')
// Retourner des données de démonstration // Retourner des données de démonstration
@ -32,7 +32,7 @@ apiClient.interceptors.response.use(
} }
}) })
} }
return Promise.reject(error) return Promise.reject(error)
} }
) )
@ -49,6 +49,7 @@ export const documentApi = {
}) })
return data return data
} catch (error) { } catch (error) {
console.warn('Upload failed, using demo data:', error)
// Retourner des données de démonstration en cas d'erreur // Retourner des données de démonstration en cas d'erreur
return { return {
id: 'demo-' + Date.now(), id: 'demo-' + Date.now(),

View File

@ -132,23 +132,23 @@ export default function UploadView() {
<ListItemText <ListItemText
primary={doc.name} primary={doc.name}
secondary={ secondary={
<Box sx={{ display: 'flex', gap: 1, mt: 1 }}> <Typography component="span" variant="body2" color="text.secondary">
<Chip {doc.type} {doc.status} {(doc.size / 1024 / 1024).toFixed(2)} MB
label={doc.type} </Typography>
size="small"
variant="outlined"
/>
<Chip
label={doc.status}
size="small"
color={getStatusColor(doc.status) as any}
/>
<Typography variant="caption" color="text.secondary">
{(doc.size / 1024 / 1024).toFixed(2)} MB
</Typography>
</Box>
} }
/> />
<Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
<Chip
label={doc.type}
size="small"
variant="outlined"
/>
<Chip
label={doc.status}
size="small"
color={getStatusColor(doc.status) as any}
/>
</Box>
</ListItem> </ListItem>
))} ))}
</List> </List>