Can I vibe code FullStory?

Build a lightweight session recording and replay web application using Next.js, Node.js, rrweb, and PostgreSQL/S3 storage.

1. DATA MODEL & STORAGE:
- Create PostgreSQL tables for `sessions` (id, user_id, start_time, duration, device, browser, path_first) and `events_metadata` (session_id, timestamp, event_type).
- Store raw DOM mutation event streams in AWS S3 or Cloudflare R2 as gzipped JSON files keyed by `sessions/{id}/{chunk_id}.json.gz`.

2. FRONTEND RECORDING SNIPPET:
- Create a standalone browser JS script that imports `rrweb-recorder`.
- Implement automatic client-side PII masking: scramble all `input`, `textarea`, and `.mask-privacy` elements before events are dispatched.
- Buffer DOM events locally in memory. Batch send them via `fetch` POST to `/api/ingest` every 5 seconds or on `visibilitychange`.
- Capture console errors (`window.onerror`) and attach them to the current batch as error events.

3. INGESTION PIPELINE:
- Build a Fastify/Express API endpoint `/api/ingest` handling POST requests containing gzipped JSON payloads.
- Validate session tokens, append raw event arrays into S3/R2, and update session duration/pagecount in PostgreSQL.
- Implement rate limiting (max 100 requests per session per hour) to prevent ingestion abuse.

4. DASHBOARD & REPLAY PLAYER:
- Build a Next.js admin dashboard listing recorded sessions filtered by duration, date, and user ID.
- Embed `rrweb-player` on the session detail page. Fetch gzipped JSON chunks from S3/R2, decompress, and load into the player timeline.
- Render a synchronized side-panel showing console errors and network requests recorded during the session.

5. FAILURE MODES & PERFORMANCE:
- Ensure the recorder pauses when tab memory usage crosses safety limits or when main-thread lag exceeds 100ms.
- Handle fetch failures gracefully by buffering up to 2MB in LocalStorage before dropping old events.

$ each button prefixes agent-specific run instructions · build your own product, never copy proprietary code, trademarks or designs