UI Zap: Bug reporting made simple

uizap turns vague “it’s broken” messages into actionable, replayable bug reports. Capture video, DOM replay, console & network logs and metadata in one click, sent to Jira/GitHub/Slack to cut MTTR.

Comment

UI Zap — Maker Story

Inspiration

Modern web apps are hard to debug: state is ephemeral, repro steps are fuzzy, and “it’s broken” tickets waste cycles. After watching engineers, QA, and support bounce screenshots, Loom links, and log snippets across tools, we set out to make a one-click report that already contains everything an engineer needs to reproduce the issue—no detective work required.

What We Built

uizap turns vague bug reports into actionable, replayable issues:

  • Capture: lightweight GIF/video, DOM replay (rrweb), console & network logs, and precise environment metadata (URL, browser/OS, viewport, feature flags, app version).
  • Share & Ship: secure links and direct pushes to Jira, Linear, GitHub Issues, and Slack (Intercom support capture in progress).
  • Workflow Fit: map projects, labels, components, and custom fields; de-dup hints and structured steps-to-reproduce.

How We Built It

  • Edge-first architecture on Cloudflare:
    • Workers (Hono.js): ingestion/API, JWT auth, request validation, light PII scrubbing, signed/expiring share URLs.
    • Pages: frontend app, shareable viewer, and blog—globally fast.
    • R2: artifact storage with lifecycle policies; Cron Triggers for post-processing & retention; Load Balancer to offload heavier jobs to Hetzner nodes; Wrangler for envs/secrets.
    • Cloudflare Logs (Logpush): backend telemetry; Web Analytics: privacy-first visitor insights for landing and blog.
  • Browser extension (MV3): shadow-DOM mounted UI, isolated styling, low-overhead capture; careful handling of SPA routes and cross-origin frames.
  • Data & Integrations: Supabase/Postgres with RLS; integration flows for Jira/Linear/GitHub/Slack; outbox/queue pattern for reliable webhooks and retries.

What We Learned

  • Context is king: replay + logs + metadata reduce triage time dramatically compared to video-only reports.
  • Privacy by default earns trust: redaction and light PII scrubbing must be first-class, not bolted on.
  • Edge > region for UX: pushing capture and playback closer to users meaningfully improves perceived speed and retention economics.
  • Integration ergonomics matter: mapping fields and defaults to each team’s workflow is as valuable as the capture itself.

Challenges We Faced

  • MV3 & DOM replay quirks: handling shadow DOM, cross-origin iframes, and scroll/viewport sync so drawings and clicks line up in replay.
  • OAuth edge cases: redirect URI and workspace/app-invite pitfalls (e.g., Slack’s not_in_channel) that required clearer setup flows and permissions.
  • Cost vs. fidelity: balancing high-fidelity capture with storage/egress; solved via R2 lifecycle rules and adaptive capture strategies.
  • Log volume & safety: keeping logs useful while scrubbing sensitive values and capping payload sizes under real-world network conditions.

What’s Next

  • AI-assisted triage on the edge: use Cloudflare Workers AI (via AI Gateway) to auto-generate clear ticket titles/descriptions and root-cause hints from captured context—fast, cost-controlled, and privacy-aware.
  • Deeper helpdesk loops: Intercom-first capture and richer bi-directional updates across support and engineering.
  • More browsers & frameworks: Firefox/Safari support and framework-aware hints (React/Vue/Svelte) to speed diagnosis even further.

uizap’s goal is simple: make every bug report reproducible by default, so teams ship fixes faster with less friction.

Built With

Share this project:

Updates