mgonzalez/project.linkedcorp.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: filtro de severidad (Alta/Media/Baja) en el log de errores

Browse Source 
Se asigna sola, sin etiquetar nada a mano: backend y errores de render de React (rompen toda la
pantalla) = alta; errores JS sueltos = media; promesas rechazadas sin manejar = baja (suelen ser
fallos de red puntuales, no criticos). Nuevo filtro en el panel ademas del de origen ya existente.

Migracion 014_error_logs_severity.sql (ALTER TABLE ADD COLUMN IF NOT EXISTS). Probado en dev: las
tres severidades se asignan correctamente segun el origen, un valor invalido del frontend cae en
media, y el filtro combinado con origen funciona.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Milton Gonzalez
2026-09-17 14:50:36 -05:00
parent a06df86881
commit feadd2e715
14 changed files with 81 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Configuracion/ErrorLogsPanel.jsx
+19 -4
View File
@@ -7,11 +7,14 @@ import { Button } from '../../components/Button.jsx';
import { Badge } from '../../components/Badge.jsx';
import { ComboBox } from '../../components/ComboBox.jsx';
const SEVERITY_COLOR = { alta: 'danger', media: 'warning', baja: 'success' };
export default function ErrorLogsPanel() {
const { t, pushToast, openDialog } = useUi();
const runAction = useAction();
const [source, setSource] = useState('');
const { data: logs, loading, reload } = useAsync(() => listErrorLogs({ source }), [source]);
const [severity, setSeverity] = useState('');
const { data: logs, loading, reload } = useAsync(() => listErrorLogs({ source, severity }), [source, severity]);
function confirmClear() {
openDialog({
@@ -34,7 +37,7 @@ export default function ErrorLogsPanel() {
return (
<div>
<div style={{ display: 'flex', gap: 10, marginBottom: 12, alignItems: 'center' }}>
<div style={{ display: 'flex', gap: 10, marginBottom: 12, alignItems: 'center', flexWrap: 'wrap' }}>
<div style={{ width: 160 }}>
<ComboBox
options={[
@@ -42,7 +45,18 @@ export default function ErrorLogsPanel() {
{ value: 'backend', label: 'Backend' },
{ value: 'frontend', label: 'Frontend' },
]}
value={source} onChange={setSource}
value={source} onChange={setSource} placeholder={t('error_logs_source')}
/>
</div>
<div style={{ width: 160 }}>
<ComboBox
options={[
{ value: '', label: t('common_all') },
{ value: 'alta', label: t('error_logs_severity_alta') },
{ value: 'media', label: t('error_logs_severity_media') },
{ value: 'baja', label: t('error_logs_severity_baja') },
]}
value={severity} onChange={setSeverity} placeholder={t('error_logs_severity')}
/>
</div>
<Button variant="standard" icon={Trash2} onClick={confirmClear} disabled={!logs || logs.length === 0}>
@@ -56,7 +70,8 @@ export default function ErrorLogsPanel() {
{(logs || []).map((log) => (
<div key={log.id} className="panel-card" style={{ marginBottom: 8 }}>
<div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 6 }}>
<Badge color={log.source === 'backend' ? 'danger' : 'warning'}>{log.source}</Badge>
<Badge color={SEVERITY_COLOR[log.severity] || 'muted'}>{t(`error_logs_severity_${log.severity}`)}</Badge>
<Badge color="muted">{log.source}</Badge>
<span className="text-muted" style={{ fontSize: '.72rem' }}>{String(log.created_at).slice(0, 16)}</span>
{log.user_name && <span className="text-muted" style={{ fontSize: '.72rem' }}>· {log.user_name}</span>}
</div>