chore: debug-realtime tooling for SSE pipeline diagnostics (#20)
* chore(debug): add /debug-realtime page + bare SSE endpoint Tijdelijke debug-tooling voor M8-acceptance op Vercel preview. - app/api/debug/realtime-stream/route.ts — geen auth, geen filtering; dropt elke pg_notify-event op scrum4me_changes rauw door als SSE - app/debug-realtime/page.tsx — open zonder login op de root, toont binnenkomende events in een simpele <table> Doel: isoleren of de SSE + Postgres LISTEN-pipe op Vercel überhaupt events laat zien, los van iron-session, productfilter of solo-store. Als ook deze niets binnen krijgt: probleem zit in pg connection of Vercel function lifecycle. Als deze wel events toont: probleem zit hoger in de stack (filter, store, hook). VERWIJDEREN voordat de PR uit draft gaat. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * 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> * chore(debug): add Layer 2 — mini Zustand-store + dispatch toggles Test of SSE-event → store → render-pipeline werkt buiten de Solo Paneel context. Mirrort het patroon van solo-store maar minimaal. - debug-store.ts: kleine Zustand-store met tasks + applyEvent + applyCount/skipCount-tellers - store-panel.tsx: rendert store-state in een tabel met statuskleuring - client.tsx: drie layer-toggles (dispatch / flushSync / startView- Transition) + lift dispatch in onmessage. Zo kunnen we elke combinatie isoleren Bevestigd: alle drie de toggles werken op het bare /debug-realtime endpoint. Volgende laag is Server Action revalidation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
GitHub
parent
868a53c2ed
commit
c6fdd45d98
6 changed files with 868 additions and 0 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 {}
|
||||
}
|
||||
}
|
||||
114
app/api/debug/realtime-stream/route.ts
Normal file
114
app/api/debug/realtime-stream/route.ts
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
// TIJDELIJKE debug-endpoint voor M8-acceptance.
|
||||
// Geen auth, geen filtering — alle pg_notify-events op `scrum4me_changes`
|
||||
// stromen rauw door naar de browser. Bedoeld om te isoleren of de
|
||||
// SSE + LISTEN-pipe op Vercel werkt, los van iron-session, productfilter
|
||||
// of solo-store.
|
||||
//
|
||||
// VERWIJDEREN VOOR M8 OUT-OF-DRAFT.
|
||||
|
||||
import { NextRequest } from 'next/server'
|
||||
import { Client } from 'pg'
|
||||
|
||||
export const runtime = 'nodejs'
|
||||
export const dynamic = 'force-dynamic'
|
||||
export const maxDuration = 300
|
||||
|
||||
const CHANNEL = 'scrum4me_changes'
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
const directUrl = process.env.DIRECT_URL ?? process.env.DATABASE_URL
|
||||
if (!directUrl) {
|
||||
return Response.json({ error: 'DIRECT_URL/DATABASE_URL niet gezet' }, { status: 500 })
|
||||
}
|
||||
|
||||
const isPooled = directUrl.includes('pooler.')
|
||||
const hostHint = directUrl.match(/@([^/]+)/)?.[1] ?? 'unknown-host'
|
||||
console.log(`[debug-realtime] connecting (${isPooled ? 'POOLED' : 'direct'}) host=${hostHint}`)
|
||||
|
||||
const encoder = new TextEncoder()
|
||||
const pgClient = new Client({ connectionString: directUrl })
|
||||
let closed = false
|
||||
let heartbeatTimer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
const stream = new ReadableStream({
|
||||
async start(controller) {
|
||||
const enqueue = (chunk: string) => {
|
||||
if (closed) return
|
||||
try {
|
||||
controller.enqueue(encoder.encode(chunk))
|
||||
} catch {
|
||||
// already closed
|
||||
}
|
||||
}
|
||||
|
||||
const cleanup = async (reason: string) => {
|
||||
if (closed) return
|
||||
closed = true
|
||||
if (heartbeatTimer) clearInterval(heartbeatTimer)
|
||||
try {
|
||||
await pgClient.end()
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
try {
|
||||
controller.close()
|
||||
} catch {
|
||||
// already closed
|
||||
}
|
||||
console.log(`[debug-realtime] closed: ${reason}`)
|
||||
}
|
||||
|
||||
try {
|
||||
await pgClient.connect()
|
||||
await pgClient.query(`LISTEN ${CHANNEL}`)
|
||||
console.log('[debug-realtime] LISTEN ready')
|
||||
} catch (err) {
|
||||
console.error('[debug-realtime] pg connect/listen failed:', err)
|
||||
enqueue(`event: error\ndata: ${JSON.stringify({ message: String(err) })}\n\n`)
|
||||
await cleanup('pg connect failed')
|
||||
return
|
||||
}
|
||||
|
||||
pgClient.on('notification', (msg) => {
|
||||
console.log(`[debug-realtime] RAW notification length=${msg.payload?.length ?? 0}`)
|
||||
if (!msg.payload) return
|
||||
enqueue(`data: ${msg.payload}\n\n`)
|
||||
})
|
||||
|
||||
pgClient.on('error', async (err) => {
|
||||
console.error('[debug-realtime] pg client error:', err)
|
||||
await cleanup('pg error')
|
||||
})
|
||||
|
||||
pgClient.on('end', () => {
|
||||
console.log('[debug-realtime] pg client end')
|
||||
})
|
||||
|
||||
enqueue(
|
||||
`event: ready\ndata: ${JSON.stringify({
|
||||
host: hostHint,
|
||||
pooled: isPooled,
|
||||
channel: CHANNEL,
|
||||
time: new Date().toISOString(),
|
||||
})}\n\n`,
|
||||
)
|
||||
|
||||
heartbeatTimer = setInterval(() => {
|
||||
enqueue(`: heartbeat ${new Date().toISOString()}\n\n`)
|
||||
}, 25_000)
|
||||
|
||||
request.signal.addEventListener('abort', () => {
|
||||
cleanup('client aborted')
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
return new Response(stream, {
|
||||
headers: {
|
||||
'Content-Type': 'text/event-stream; charset=utf-8',
|
||||
'Cache-Control': 'no-cache, no-transform',
|
||||
Connection: 'keep-alive',
|
||||
'X-Accel-Buffering': 'no',
|
||||
},
|
||||
})
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue