chore(debug): extend /debug-realtime with stats, emit-button and filters
Bouwt de basale luister-tabel uit met diagnostische tooling om de SSE+LISTEN-pipe stress-vrij te kunnen valideren. Toegevoegd: - POST /api/debug/emit-test-notify — vuurt een handmatige pg_notify op scrum4me_changes met een synthetic payload (debug:true) zonder een echte DB-UPDATE te doen. Isoleert de SSE-route van Prisma/triggers. - DebugRealtimeClient: stats-grid (status, reconnects, total events, since last event met >30s rood-warning, largest gap, first-event- time), emit-button, reset-stats, filters op type en entity (incl. "debug only"). - Type/entity kolom in de tabel met kleuring per type. Geen impact op productie- of solo-flow. Tijdelijke testtooling; verwijderen wanneer we deze pagina niet meer nodig hebben. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
e964a76318
commit
dbbd20f3a9
2 changed files with 384 additions and 46 deletions
59
app/api/debug/emit-test-notify/route.ts
Normal file
59
app/api/debug/emit-test-notify/route.ts
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
// TIJDELIJKE debug-endpoint. Stuurt een handmatige pg_notify op
|
||||
// `scrum4me_changes` zonder een echte UPDATE te doen. Bedoeld om de
|
||||
// SSE-pipe te testen los van Prisma/triggers.
|
||||
//
|
||||
// VERWIJDEREN voor M8 out-of-draft.
|
||||
|
||||
import { Client } from 'pg'
|
||||
|
||||
export const runtime = 'nodejs'
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
const CHANNEL = 'scrum4me_changes'
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const directUrl = process.env.DIRECT_URL ?? process.env.DATABASE_URL
|
||||
if (!directUrl) {
|
||||
return Response.json({ error: 'DIRECT_URL/DATABASE_URL niet gezet' }, { status: 500 })
|
||||
}
|
||||
|
||||
let body: unknown = null
|
||||
try {
|
||||
body = await request.json()
|
||||
} catch {
|
||||
// empty body is OK — we vullen defaults in
|
||||
}
|
||||
|
||||
const overrides = (body && typeof body === 'object' ? body : {}) as Record<string, unknown>
|
||||
const payload = {
|
||||
op: 'U',
|
||||
entity: 'task',
|
||||
id: `debug-${Date.now()}`,
|
||||
story_id: 'debug-story',
|
||||
product_id: 'debug-product',
|
||||
sprint_id: null,
|
||||
assignee_id: null,
|
||||
task_status: 'TO_DO',
|
||||
task_sort_order: 1,
|
||||
task_title: 'manual debug emit',
|
||||
changed_fields: ['status'],
|
||||
debug: true,
|
||||
emitted_at: new Date().toISOString(),
|
||||
...overrides,
|
||||
}
|
||||
|
||||
const client = new Client({ connectionString: directUrl })
|
||||
try {
|
||||
await client.connect()
|
||||
// pg_notify met JSON-string als payload — zelfde formaat als de trigger
|
||||
await client.query('SELECT pg_notify($1, $2)', [CHANNEL, JSON.stringify(payload)])
|
||||
return Response.json({ ok: true, payload })
|
||||
} catch (err) {
|
||||
return Response.json(
|
||||
{ ok: false, error: err instanceof Error ? err.message : String(err) },
|
||||
{ status: 500 },
|
||||
)
|
||||
} finally {
|
||||
try { await client.end() } catch {}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,96 +1,215 @@
|
|||
'use client'
|
||||
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
|
||||
type RowType = 'ready' | 'message' | 'error' | 'open' | 'close'
|
||||
|
||||
interface Row {
|
||||
receivedAt: string
|
||||
type: 'ready' | 'message' | 'error'
|
||||
receivedAt: number
|
||||
type: RowType
|
||||
raw: string
|
||||
parsed?: Record<string, unknown>
|
||||
}
|
||||
|
||||
const MAX_ROWS = 200
|
||||
interface Stats {
|
||||
reconnects: number
|
||||
totalEvents: number
|
||||
firstEventAt: number | null
|
||||
lastEventAt: number | null
|
||||
largestGapMs: number
|
||||
emitInFlight: boolean
|
||||
lastEmitResult: string | null
|
||||
}
|
||||
|
||||
const MAX_ROWS = 500
|
||||
const HEARTBEAT_WARN_MS = 30_000
|
||||
|
||||
export function DebugRealtimeClient() {
|
||||
const [rows, setRows] = useState<Row[]>([])
|
||||
const [status, setStatus] = useState<'connecting' | 'open' | 'closed' | 'error'>('connecting')
|
||||
const [stats, setStats] = useState<Stats>({
|
||||
reconnects: 0,
|
||||
totalEvents: 0,
|
||||
firstEventAt: null,
|
||||
lastEventAt: null,
|
||||
largestGapMs: 0,
|
||||
emitInFlight: false,
|
||||
lastEmitResult: null,
|
||||
})
|
||||
const [filterType, setFilterType] = useState<'all' | RowType>('all')
|
||||
const [filterEntity, setFilterEntity] = useState<'all' | 'task' | 'story' | 'debug'>('all')
|
||||
const [tickNow, setTickNow] = useState(() => Date.now())
|
||||
|
||||
const sourceRef = useRef<EventSource | null>(null)
|
||||
const lastEventTimeRef = useRef<number | null>(null)
|
||||
|
||||
// Tick every second om "since last event"-counter levend te houden
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => setTickNow(Date.now()), 1000)
|
||||
return () => clearInterval(t)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const source = new EventSource('/api/debug/realtime-stream')
|
||||
sourceRef.current = source
|
||||
|
||||
const append = (row: Row) => {
|
||||
setRows((prev) => [row, ...prev].slice(0, MAX_ROWS))
|
||||
lastEventTimeRef.current = row.receivedAt
|
||||
setStats((s) => {
|
||||
const prevLast = s.lastEventAt
|
||||
const gap = prevLast ? row.receivedAt - prevLast : 0
|
||||
return {
|
||||
...s,
|
||||
totalEvents: s.totalEvents + 1,
|
||||
firstEventAt: s.firstEventAt ?? row.receivedAt,
|
||||
lastEventAt: row.receivedAt,
|
||||
largestGapMs: Math.max(s.largestGapMs, gap),
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
source.addEventListener('ready', (e) => {
|
||||
setStatus('open')
|
||||
const data = (e as MessageEvent).data ?? ''
|
||||
append({ receivedAt: new Date().toISOString(), type: 'ready', raw: data })
|
||||
})
|
||||
const open = () => {
|
||||
const source = new EventSource('/api/debug/realtime-stream')
|
||||
sourceRef.current = source
|
||||
|
||||
source.addEventListener('error', (e) => {
|
||||
setStatus('error')
|
||||
const data = (e as MessageEvent).data ?? '(no data)'
|
||||
append({ receivedAt: new Date().toISOString(), type: 'error', raw: data })
|
||||
})
|
||||
append({ receivedAt: Date.now(), type: 'open', raw: '(EventSource opening)' })
|
||||
setStats((s) => ({ ...s, reconnects: s.reconnects + 1 }))
|
||||
setStatus('connecting')
|
||||
|
||||
source.onmessage = (e) => {
|
||||
append({ receivedAt: new Date().toISOString(), type: 'message', raw: e.data ?? '' })
|
||||
source.addEventListener('ready', (e) => {
|
||||
setStatus('open')
|
||||
const data = (e as MessageEvent).data ?? ''
|
||||
const parsed = safeParse(data)
|
||||
append({ receivedAt: Date.now(), type: 'ready', raw: data, parsed })
|
||||
})
|
||||
|
||||
source.addEventListener('error', (e) => {
|
||||
setStatus('error')
|
||||
const data = (e as MessageEvent).data ?? '(no data)'
|
||||
append({ receivedAt: Date.now(), type: 'error', raw: data })
|
||||
})
|
||||
|
||||
source.onmessage = (e) => {
|
||||
const parsed = safeParse(e.data ?? '')
|
||||
append({ receivedAt: Date.now(), type: 'message', raw: e.data ?? '', parsed })
|
||||
}
|
||||
|
||||
source.onerror = () => {
|
||||
setStatus('error')
|
||||
append({ receivedAt: Date.now(), type: 'close', raw: '(EventSource error/close)' })
|
||||
}
|
||||
}
|
||||
|
||||
source.onerror = () => {
|
||||
setStatus('error')
|
||||
}
|
||||
open()
|
||||
|
||||
return () => {
|
||||
source.close()
|
||||
sourceRef.current?.close()
|
||||
sourceRef.current = null
|
||||
}
|
||||
}, [])
|
||||
|
||||
function statusColor() {
|
||||
switch (status) {
|
||||
case 'open':
|
||||
return 'green'
|
||||
case 'error':
|
||||
return 'red'
|
||||
case 'closed':
|
||||
return 'gray'
|
||||
default:
|
||||
return 'orange'
|
||||
async function emitTestEvent() {
|
||||
setStats((s) => ({ ...s, emitInFlight: true, lastEmitResult: null }))
|
||||
try {
|
||||
const res = await fetch('/api/debug/emit-test-notify', { method: 'POST' })
|
||||
const json = (await res.json()) as { ok?: boolean; error?: string }
|
||||
setStats((s) => ({
|
||||
...s,
|
||||
emitInFlight: false,
|
||||
lastEmitResult: json.ok ? 'sent ✓' : `failed: ${json.error ?? 'unknown'}`,
|
||||
}))
|
||||
} catch (err) {
|
||||
setStats((s) => ({
|
||||
...s,
|
||||
emitInFlight: false,
|
||||
lastEmitResult: `failed: ${err instanceof Error ? err.message : String(err)}`,
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
setRows([])
|
||||
setStats({
|
||||
reconnects: 0,
|
||||
totalEvents: 0,
|
||||
firstEventAt: null,
|
||||
lastEventAt: null,
|
||||
largestGapMs: 0,
|
||||
emitInFlight: false,
|
||||
lastEmitResult: null,
|
||||
})
|
||||
lastEventTimeRef.current = null
|
||||
}
|
||||
|
||||
const filteredRows = useMemo(() => {
|
||||
return rows.filter((row) => {
|
||||
if (filterType !== 'all' && row.type !== filterType) return false
|
||||
if (filterEntity !== 'all') {
|
||||
const entity = (row.parsed?.entity as string | undefined) ?? null
|
||||
if (filterEntity === 'debug') {
|
||||
if (!row.parsed?.debug) return false
|
||||
} else {
|
||||
if (entity !== filterEntity) return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
})
|
||||
}, [rows, filterType, filterEntity])
|
||||
|
||||
const sinceLastEvent = lastEventTimeRef.current
|
||||
? tickNow - lastEventTimeRef.current
|
||||
: null
|
||||
|
||||
return (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
Status:{' '}
|
||||
<span style={{ color: statusColor(), fontWeight: 'bold' }}>{status}</span> · totaal{' '}
|
||||
{rows.length} entries
|
||||
</div>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
|
||||
<ControlBar
|
||||
status={status}
|
||||
stats={stats}
|
||||
sinceLastEvent={sinceLastEvent}
|
||||
filterType={filterType}
|
||||
setFilterType={setFilterType}
|
||||
filterEntity={filterEntity}
|
||||
setFilterEntity={setFilterEntity}
|
||||
onEmit={emitTestEvent}
|
||||
onReset={reset}
|
||||
/>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12, marginTop: 12 }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#f0f0f0', textAlign: 'left' }}>
|
||||
<th style={{ padding: 6, border: '1px solid #ddd', width: 220 }}>received_at</th>
|
||||
<th style={{ padding: 6, border: '1px solid #ddd', width: 100 }}>type</th>
|
||||
<th style={{ padding: 6, border: '1px solid #ddd', width: 140 }}>entity / op</th>
|
||||
<th style={{ padding: 6, border: '1px solid #ddd' }}>payload</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.length === 0 ? (
|
||||
{filteredRows.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={3} style={{ padding: 12, textAlign: 'center', color: '#888' }}>
|
||||
Wachten op events… trigger een mutatie via UI of script.
|
||||
<td colSpan={4} style={{ padding: 12, textAlign: 'center', color: '#888' }}>
|
||||
Wachten op events… trigger een mutatie via UI / script of klik "emit test event".
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
rows.map((row, idx) => (
|
||||
<tr key={`${row.receivedAt}-${idx}`}>
|
||||
filteredRows.map((row, idx) => (
|
||||
<tr
|
||||
key={`${row.receivedAt}-${idx}`}
|
||||
style={{ background: row.type === 'message' ? 'transparent' : '#fafafa' }}
|
||||
>
|
||||
<td style={{ padding: 6, border: '1px solid #ddd', whiteSpace: 'nowrap' }}>
|
||||
{row.receivedAt}
|
||||
{new Date(row.receivedAt).toISOString()}
|
||||
</td>
|
||||
<td style={{ padding: 6, border: '1px solid #ddd', color: typeColor(row.type) }}>
|
||||
{row.type}
|
||||
</td>
|
||||
<td style={{ padding: 6, border: '1px solid #ddd', whiteSpace: 'nowrap' }}>
|
||||
{row.parsed?.entity ? (
|
||||
<>
|
||||
{row.parsed.entity as string}
|
||||
{row.parsed.op ? ` / ${row.parsed.op as string}` : ''}
|
||||
{row.parsed.debug ? ' [debug]' : ''}
|
||||
</>
|
||||
) : (
|
||||
'—'
|
||||
)}
|
||||
</td>
|
||||
<td style={{ padding: 6, border: '1px solid #ddd' }}>{row.type}</td>
|
||||
<td style={{ padding: 6, border: '1px solid #ddd', wordBreak: 'break-all' }}>
|
||||
<code>{row.raw}</code>
|
||||
</td>
|
||||
|
|
@ -102,3 +221,163 @@ export function DebugRealtimeClient() {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ControlBar({
|
||||
status,
|
||||
stats,
|
||||
sinceLastEvent,
|
||||
filterType,
|
||||
setFilterType,
|
||||
filterEntity,
|
||||
setFilterEntity,
|
||||
onEmit,
|
||||
onReset,
|
||||
}: {
|
||||
status: 'connecting' | 'open' | 'closed' | 'error'
|
||||
stats: Stats
|
||||
sinceLastEvent: number | null
|
||||
filterType: 'all' | RowType
|
||||
setFilterType: (t: 'all' | RowType) => void
|
||||
filterEntity: 'all' | 'task' | 'story' | 'debug'
|
||||
setFilterEntity: (e: 'all' | 'task' | 'story' | 'debug') => void
|
||||
onEmit: () => void
|
||||
onReset: () => void
|
||||
}) {
|
||||
const heartbeatStale = sinceLastEvent !== null && sinceLastEvent > HEARTBEAT_WARN_MS
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
|
||||
gap: 8,
|
||||
padding: 12,
|
||||
background: '#f7f7f7',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
<Stat label="status" value={status} color={statusColor(status)} />
|
||||
<Stat label="reconnects" value={String(stats.reconnects)} />
|
||||
<Stat label="total events" value={String(stats.totalEvents)} />
|
||||
<Stat
|
||||
label="since last event"
|
||||
value={sinceLastEvent === null ? '—' : `${(sinceLastEvent / 1000).toFixed(1)}s`}
|
||||
color={heartbeatStale ? 'red' : undefined}
|
||||
/>
|
||||
<Stat
|
||||
label="largest gap"
|
||||
value={
|
||||
stats.largestGapMs > 0
|
||||
? `${(stats.largestGapMs / 1000).toFixed(1)}s`
|
||||
: '—'
|
||||
}
|
||||
/>
|
||||
<Stat
|
||||
label="first event"
|
||||
value={stats.firstEventAt ? new Date(stats.firstEventAt).toLocaleTimeString() : '—'}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<button
|
||||
onClick={onEmit}
|
||||
disabled={stats.emitInFlight}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
background: '#0a0',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: 4,
|
||||
cursor: stats.emitInFlight ? 'wait' : 'pointer',
|
||||
opacity: stats.emitInFlight ? 0.6 : 1,
|
||||
}}
|
||||
>
|
||||
{stats.emitInFlight ? 'sending…' : 'emit test event'}
|
||||
</button>
|
||||
{stats.lastEmitResult && (
|
||||
<span style={{ fontSize: 12, color: '#666' }}>{stats.lastEmitResult}</span>
|
||||
)}
|
||||
<button
|
||||
onClick={onReset}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
background: '#eee',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: 4,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
reset stats
|
||||
</button>
|
||||
<span style={{ marginLeft: 12, fontSize: 12, color: '#666' }}>filter:</span>
|
||||
<select
|
||||
value={filterType}
|
||||
onChange={(e) => setFilterType(e.target.value as 'all' | RowType)}
|
||||
style={{ fontSize: 12, padding: 4 }}
|
||||
>
|
||||
<option value="all">all types</option>
|
||||
<option value="ready">ready</option>
|
||||
<option value="message">message</option>
|
||||
<option value="error">error</option>
|
||||
<option value="open">open</option>
|
||||
<option value="close">close</option>
|
||||
</select>
|
||||
<select
|
||||
value={filterEntity}
|
||||
onChange={(e) => setFilterEntity(e.target.value as 'all' | 'task' | 'story' | 'debug')}
|
||||
style={{ fontSize: 12, padding: 4 }}
|
||||
>
|
||||
<option value="all">all entities</option>
|
||||
<option value="task">task</option>
|
||||
<option value="story">story</option>
|
||||
<option value="debug">debug only</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Stat({ label, value, color }: { label: string; value: string; color?: string }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<span style={{ fontSize: 11, color: '#888', textTransform: 'uppercase' }}>{label}</span>
|
||||
<span style={{ fontSize: 14, fontWeight: 'bold', color: color ?? 'inherit' }}>{value}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function statusColor(status: 'connecting' | 'open' | 'closed' | 'error') {
|
||||
switch (status) {
|
||||
case 'open':
|
||||
return 'green'
|
||||
case 'error':
|
||||
return 'red'
|
||||
case 'closed':
|
||||
return 'gray'
|
||||
default:
|
||||
return 'orange'
|
||||
}
|
||||
}
|
||||
|
||||
function typeColor(type: RowType) {
|
||||
switch (type) {
|
||||
case 'message':
|
||||
return '#0070cc'
|
||||
case 'ready':
|
||||
return 'green'
|
||||
case 'error':
|
||||
return 'red'
|
||||
case 'open':
|
||||
return '#888'
|
||||
case 'close':
|
||||
return '#888'
|
||||
}
|
||||
}
|
||||
|
||||
function safeParse(raw: string): Record<string, unknown> | undefined {
|
||||
try {
|
||||
return JSON.parse(raw) as Record<string, unknown>
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue