EventReplay - Session Replay Debugger for Backend Event Streams

Acceptance Criteria

Kafka Ingestion: done when events flow from connected Kafka cluster to Postgres with zero lag. Timeline UI: done when 1,000 events render and are searchable in under 2 seconds. Replay: done when clicking an event shows full JSON payload and parent/child events. Filter: done when filtering by event type returns only matching events instantly. Multi-team: done when team members see only their org's events.

How to build it, step by step

1. Bootstrap app: npx create-next-app@latest eventreplay --typescript --tailwind --app; create /agent subfolder for the Node.js consumer service. 2. Install core dependencies: in /agent run npm install kafkajs amqplib ioredis; in root run npm install @supabase/supabase-js socket.io recharts zod stripe resend. 3. Define Postgres schema in Supabase: create tables 'teams' (id, name, api_key), 'connections' (id, team_id, type enum kafka|rabbitmq|redis, config JSONB), 'event_logs' (id, connection_id, event_type text, payload JSONB, source_service text, occurred_at timestamptz, created_at timestamptz) partitioned by occurred_at monthly; add GIN index on payload and btree index on (connection_id, occurred_at). 4. Build Kafka consumer in /agent/kafka-consumer.ts: use kafkajs ConsumerGroup, subscribe to target topics, on each message POST to ingest API with { event_type, payload: JSON.parse(message.value), source_service, occurred_at: message.timestamp }; handle offset commits only after successful HTTP 200 from ingest API to avoid data loss. 5. Build RabbitMQ consumer in /agent/rabbitmq-consumer.ts: use amqplib channel.consume with noAck false, ack only after successful ingest POST; parse message.content.toString() as JSON payload. 6. Build ingest API route at app/api/ingest/route.ts: validate Bearer token against teams.api_key, parse body with Zod schema (event_type string, payload object max 100KB, source_service string, occurred_at ISO string), insert into event_logs via Supabase client, return 200; add rate limit of 1000 req/min per api_key using upstash/ratelimit or in-memory token bucket. 7. Build WebSocket server using socket.io in a Next.js custom server (server.ts): on new event_log insert (use Supabase realtime subscription on event_logs table), emit to room keyed by connection_id so only authorized team members receive live events. 8. Build timeline UI in app/dashboard/timeline/page.tsx: fetch paginated event_logs for selected connection and time range via /api/events?connection_id=&from=&to=&limit=500; render as a vertical scrollable list with recharts AreaChart showing event volume over time as scrubber; clicking a time range zooms to that window; clicking an event opens a JSON inspector drawer using react-json-view. 9. Implement search: add /api/events/search route using Postgres full-text — SELECT * FROM event_logs WHERE connection_id = $1 AND to_tsvector('english', payload::text) @@ plainto_tsquery($2) ORDER BY occurred_at DESC LIMIT 100; expose as debounced search input in UI. 10. Add Supabase Auth with Google OAuth and RLS policies: event_logs readable only where connection_id IN (SELECT id FROM connections WHERE team_id = auth.team_id()); expose /api/teams/invite for adding teammates by email. 11. Stripe billing: create products in Stripe dashboard (Starter $299/mo 10M events, Pro $999/mo 1B events); add /api/billing/checkout route using stripe.checkout.sessions.create with price_id; add /api/webhooks/stripe to handle customer.subscription.updated and update teams.plan_tier; enforce event volume limits in ingest route by checking monthly count against tier cap. 12. Docker setup: write /agent/Dockerfile (node:20-alpine, COPY package.json, npm ci, COPY ., CMD node dist/index.js); write docker-compose.yml with agent service taking env vars KAFKA_BROKERS, RABBITMQ_URL, INGEST_API_URL, INGEST_API_KEY; write /docs/setup.md with copy-paste docker run command for user's infra.