feat: error log panel - delete, export JSON/CSV, select rows
This commit is contained in:
root
parent
f451add13c
commit
3934e6a872
|
|
@ -6,6 +6,7 @@ import { createClient } from '@supabase/supabase-js';
|
|||
|
||||
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
|
||||
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
|
||||
const supabaseServiceKey = import.meta.env.VITE_SUPABASE_SERVICE_ROLE_KEY;
|
||||
|
||||
const DATE_RANGES = [
|
||||
{ value: 'today', label: 'Сегодня' },
|
||||
|
|
@ -25,6 +26,24 @@ const ERROR_TONES = {
|
|||
Warning: 'warning',
|
||||
};
|
||||
|
||||
function formatLogEntry(e) {
|
||||
const ts = e.created_at ? new Date(e.created_at).toISOString() : 'NO_TIMESTAMP';
|
||||
const lines = [
|
||||
`[${ts}] ${e.error_type || 'Unknown'}: ${e.message || 'No message'}`,
|
||||
` URL: ${e.url || '-'}`,
|
||||
` Component: ${e.component || '-'}`,
|
||||
` Line: ${e.line_number ?? '-'}:${e.column_number ?? '-'}`,
|
||||
];
|
||||
if (e.user_id) lines.push(` User: ${e.user_id}`);
|
||||
if (e.props) lines.push(` Props: ${e.props}`);
|
||||
if (e.stack) {
|
||||
lines.push(' Stack:');
|
||||
e.stack.split('\n').forEach(l => lines.push(' ' + l));
|
||||
}
|
||||
lines.push(` UA: ${e.user_agent || '-'}`);
|
||||
return lines.join('\n');
|
||||
}
|
||||
|
||||
export default function ErrorLogPanel() {
|
||||
const [errors, setErrors] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
|
@ -33,9 +52,12 @@ export default function ErrorLogPanel() {
|
|||
const [filterType, setFilterType] = useState('');
|
||||
const [filterRange, setFilterRange] = useState('7d');
|
||||
const [availableTypes, setAvailableTypes] = useState([]);
|
||||
const [selected, setSelected] = useState(new Set());
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const intervalRef = useRef(null);
|
||||
const client = createClient(supabaseUrl, supabaseAnonKey);
|
||||
const adminClient = createClient(supabaseUrl, supabaseServiceKey);
|
||||
|
||||
const getRangeStart = (range) => {
|
||||
const now = new Date();
|
||||
|
|
@ -74,30 +96,135 @@ export default function ErrorLogPanel() {
|
|||
const fmtDate = (iso) => iso ? new Date(iso).toLocaleString('ru-RU') : '—';
|
||||
const trunc = (s, n) => !s ? '—' : s.length > n ? s.slice(0, n) + '…' : s;
|
||||
|
||||
const toggleSelect = (id) => {
|
||||
setSelected(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id); else next.add(id);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleSelectAll = () => {
|
||||
if (selected.size === errors.length) {
|
||||
setSelected(new Set());
|
||||
} else {
|
||||
setSelected(new Set(errors.map(e => e.id)));
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyAll = async () => {
|
||||
const text = errors.map((e) => {
|
||||
const ts = e.created_at ? new Date(e.created_at).toISOString() : 'NO_TIMESTAMP';
|
||||
return `[${ts}] ${e.error_type || 'Unknown'}: ${e.message || 'No message'} | URL: ${e.url || '-'} | Component: ${e.component || '-'} | Line: ${e.line_number ?? '-'}:${e.column_number ?? '-'} | Stack: ${e.stack || '-'} | Props: ${e.props || '-'} | UA: ${e.user_agent || '-'}`;
|
||||
}).join('\n\n');
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
} catch {
|
||||
const text = errors.map(formatLogEntry).join('\n\n');
|
||||
try { await navigator.clipboard.writeText(text); }
|
||||
catch {
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(ta);
|
||||
ta.value = text; document.body.appendChild(ta); ta.select();
|
||||
document.execCommand('copy'); document.body.removeChild(ta);
|
||||
}
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const handleCopySelected = async () => {
|
||||
const text = errors.filter(e => selected.has(e.id)).map(formatLogEntry).join('\n\n');
|
||||
if (!text) return;
|
||||
try { await navigator.clipboard.writeText(text); }
|
||||
catch {
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = text; document.body.appendChild(ta); ta.select();
|
||||
document.execCommand('copy'); document.body.removeChild(ta);
|
||||
}
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const handleDeleteSelected = async () => {
|
||||
if (selected.size === 0) return;
|
||||
if (!confirm(`Удалить ${selected.size} записей?`)) return;
|
||||
setDeleting(true);
|
||||
const { error: err } = await adminClient
|
||||
.from('client_error_logs')
|
||||
.delete()
|
||||
.in('id', Array.from(selected));
|
||||
if (err) { setFetchError('Ошибка удаления: ' + err.message); }
|
||||
else { setSelected(new Set()); fetchErrors(); }
|
||||
setDeleting(false);
|
||||
};
|
||||
|
||||
const handleDeleteAll = async () => {
|
||||
if (!confirm('Удалить ВСЕ записи об ошибках? Это необратимо.')) return;
|
||||
setDeleting(true);
|
||||
const { error: err } = await adminClient
|
||||
.from('client_error_logs')
|
||||
.delete()
|
||||
.neq('id', '00000000-0000-0000-0000-000000000000');
|
||||
if (err) { setFetchError('Ошибка удаления: ' + err.message); }
|
||||
else { setSelected(new Set()); fetchErrors(); }
|
||||
setDeleting(false);
|
||||
};
|
||||
|
||||
const handleDeleteOne = async (id) => {
|
||||
if (!confirm('Удалить эту запись?')) return;
|
||||
setDeleting(true);
|
||||
const { error: err } = await adminClient
|
||||
.from('client_error_logs')
|
||||
.delete()
|
||||
.eq('id', id);
|
||||
if (err) { setFetchError('Ошибка удаления: ' + err.message); }
|
||||
else { setExpandedId(null); fetchErrors(); }
|
||||
setDeleting(false);
|
||||
};
|
||||
|
||||
const downloadJSON = () => {
|
||||
const data = selected.size > 0
|
||||
? errors.filter(e => selected.has(e.id))
|
||||
: errors;
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `errors_${new Date().toISOString().slice(0, 10)}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const downloadCSV = () => {
|
||||
const data = selected.size > 0
|
||||
? errors.filter(e => selected.has(e.id))
|
||||
: errors;
|
||||
const headers = ['created_at', 'error_type', 'message', 'url', 'component', 'line_number', 'column_number', 'user_id', 'stack', 'props', 'user_agent'];
|
||||
const escape = (v) => {
|
||||
const s = v == null ? '' : String(v);
|
||||
if (s.includes(',') || s.includes('"') || s.includes('\n')) return '"' + s.replace(/"/g, '""') + '"';
|
||||
return s;
|
||||
};
|
||||
const rows = data.map(e => headers.map(h => escape(e[h])).join(','));
|
||||
const csv = [headers.join(','), ...rows].join('\n');
|
||||
const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `errors_${new Date().toISOString().slice(0, 10)}.csv`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const btnBase = {
|
||||
borderRadius: '9999px', padding: '0.4rem 0.75rem', cursor: 'pointer',
|
||||
fontSize: '0.85rem', fontWeight: 600, border: '1px solid var(--color-border, #334155)',
|
||||
background: 'transparent', color: 'var(--color-text, #e2e8f0)',
|
||||
};
|
||||
const btnDanger = { ...btnBase, borderColor: 'var(--color-danger, #ef4444)', color: 'var(--color-danger, #ef4444)' };
|
||||
const btnAccent = { ...btnBase, borderColor: 'var(--color-accent, #22c55e)', color: 'var(--color-accent, #22c55e)' };
|
||||
|
||||
return (
|
||||
<Panel>
|
||||
{/* Toolbar */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '0.75rem', marginBottom: '1rem' }}>
|
||||
<div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', cursor: 'pointer', fontSize: '0.85rem' }}>
|
||||
<input type="checkbox" checked={selected.size === errors.length && errors.length > 0} onChange={toggleSelectAll} />
|
||||
Все
|
||||
</label>
|
||||
<Select value={filterRange} onChange={(e) => setFilterRange(e.target.value)} className="min-w-[100px]! text-sm! py-2!">
|
||||
{DATE_RANGES.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
|
||||
</Select>
|
||||
|
|
@ -106,25 +233,32 @@ export default function ErrorLogPanel() {
|
|||
{availableTypes.map((t) => <option key={t} value={t}>{t}</option>)}
|
||||
</Select>
|
||||
<span style={{ color: 'var(--color-text-muted, #94a3b8)', fontSize: '0.85rem' }}>
|
||||
{errors.length} ошибок
|
||||
{errors.length} ошибок {selected.size > 0 && `(${selected.size} выбр.)`}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
||||
<button onClick={fetchErrors} style={{
|
||||
background: 'transparent', border: '1px solid var(--color-border, #334155)',
|
||||
borderRadius: '9999px', padding: '0.4rem 0.75rem', cursor: 'pointer',
|
||||
fontSize: '0.85rem', color: 'var(--color-text-muted, #94a3b8)',
|
||||
}}>
|
||||
↻
|
||||
<div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
|
||||
<button onClick={fetchErrors} style={btnBase} title="Обновить">↻</button>
|
||||
<button onClick={handleCopyAll} disabled={errors.length === 0} style={{ ...btnAccent, opacity: errors.length === 0 ? 0.4 : 1 }}>
|
||||
📋 Копировать всё
|
||||
</button>
|
||||
<button onClick={handleCopyAll} disabled={errors.length === 0} style={{
|
||||
background: copied ? 'var(--color-accent, #22c55e)' : 'var(--color-accent-soft, rgba(18,128,92,0.15))',
|
||||
color: copied ? '#fff' : 'var(--color-accent, #22c55e)',
|
||||
border: '1px solid var(--color-accent, #22c55e)',
|
||||
borderRadius: '9999px', padding: '0.4rem 0.75rem', cursor: 'pointer',
|
||||
fontSize: '0.85rem', fontWeight: 600,
|
||||
}}>
|
||||
{copied ? '✓ Скопировано' : '📋 Копировать всё'}
|
||||
{selected.size > 0 && (
|
||||
<button onClick={handleCopySelected} style={btnAccent}>
|
||||
📋 Копировать выбр.
|
||||
</button>
|
||||
)}
|
||||
<button onClick={downloadJSON} disabled={errors.length === 0} style={{ ...btnBase, opacity: errors.length === 0 ? 0.4 : 1 }}>
|
||||
⬇ JSON
|
||||
</button>
|
||||
<button onClick={downloadCSV} disabled={errors.length === 0} style={{ ...btnBase, opacity: errors.length === 0 ? 0.4 : 1 }}>
|
||||
⬇ CSV
|
||||
</button>
|
||||
{selected.size > 0 && (
|
||||
<button onClick={handleDeleteSelected} disabled={deleting} style={{ ...btnDanger, opacity: deleting ? 0.5 : 1 }}>
|
||||
🗑 Удалить выбр.
|
||||
</button>
|
||||
)}
|
||||
<button onClick={handleDeleteAll} disabled={deleting || errors.length === 0} style={{ ...btnDanger, opacity: deleting || errors.length === 0 ? 0.4 : 1 }}>
|
||||
🗑 Удалить все
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -154,21 +288,31 @@ export default function ErrorLogPanel() {
|
|||
|
||||
{errors.map((err) => {
|
||||
const isExpanded = expandedId === err.id;
|
||||
const isSelected = selected.has(err.id);
|
||||
return (
|
||||
<div
|
||||
key={err.id}
|
||||
style={{ borderBottom: '1px solid var(--color-border, #334155)', cursor: 'pointer' }}
|
||||
onClick={() => setExpandedId(isExpanded ? null : err.id)}
|
||||
style={{ borderBottom: '1px solid var(--color-border, #334155)' }}
|
||||
>
|
||||
{/* Summary */}
|
||||
<div style={{
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1.4fr 1fr 2.5fr 1.5fr',
|
||||
gridTemplateColumns: '2rem 1.4fr 1fr 2.5fr 1.5fr',
|
||||
gap: '0.5rem',
|
||||
alignItems: 'center',
|
||||
padding: '0.55rem 0.75rem',
|
||||
fontSize: '0.88rem',
|
||||
}}>
|
||||
cursor: 'pointer',
|
||||
background: isSelected ? 'rgba(34,197,94,0.08)' : 'transparent',
|
||||
}}
|
||||
onClick={() => setExpandedId(isExpanded ? null : err.id)}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onChange={() => toggleSelect(err.id)}
|
||||
/>
|
||||
<span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted, #94a3b8)', whiteSpace: 'nowrap' }}>
|
||||
{fmtDate(err.created_at)}
|
||||
</span>
|
||||
|
|
@ -183,7 +327,6 @@ export default function ErrorLogPanel() {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
{/* Expanded */}
|
||||
{isExpanded && (
|
||||
<div style={{
|
||||
padding: '0.75rem 1rem 1rem',
|
||||
|
|
@ -236,6 +379,11 @@ export default function ErrorLogPanel() {
|
|||
<div><strong>UA:</strong> {trunc(err.user_agent, 60)}</div>
|
||||
{err.user_id && <div style={{ gridColumn: '1 / -1' }}><strong>User ID:</strong> {err.user_id}</div>}
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<button onClick={() => handleDeleteOne(err.id)} disabled={deleting} style={{ ...btnDanger, fontSize: '0.8rem' }}>
|
||||
Удалить запись
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -243,6 +391,17 @@ export default function ErrorLogPanel() {
|
|||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{copied && (
|
||||
<div style={{
|
||||
position: 'fixed', bottom: '1rem', right: '1rem',
|
||||
background: 'var(--color-accent, #22c55e)', color: '#fff',
|
||||
padding: '0.5rem 1rem', borderRadius: '9999px', fontSize: '0.85rem',
|
||||
fontWeight: 600, zIndex: 1000,
|
||||
}}>
|
||||
Скопировано!
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue