Scrum4Me/app/debug-realtime/page.tsx
Janpeter Visser c6fdd45d98
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>
2026-04-29 20:35:40 +02:00

23 lines
862 B
TypeScript

// TIJDELIJKE debug-pagina voor M8-acceptance.
// Geen auth, geen styling — toont alle inkomende pg_notify-events op
// `scrum4me_changes` in een tabel zodat we kunnen zien of de SSE + LISTEN-
// pipe überhaupt events doorstroomt op Vercel.
//
// VERWIJDEREN VOOR M8 OUT-OF-DRAFT.
import { DebugRealtimeClient } from './client'
export const dynamic = 'force-dynamic'
export default function DebugRealtimePage() {
return (
<div style={{ fontFamily: 'monospace', padding: 16 }}>
<h1 style={{ fontSize: 18, fontWeight: 'bold' }}>Realtime debug scrum4me_changes</h1>
<p style={{ fontSize: 13, color: '#666' }}>
Live SSE-stream rechtstreeks van Postgres LISTEN op channel{' '}
<code>scrum4me_changes</code>. Geen auth, geen filtering. Verwijderen na M8 acceptance.
</p>
<DebugRealtimeClient />
</div>
)
}