OnCatch demos
Demo app · real OnCatch widget · Next.js

Cobalt — your SaaS dashboard.

A fake SaaS app on the most common modern stack (Next.js, a virtualized table, a Stripe-style checkout iframe, a streaming AI assistant). File a bug with the OnCatch button (bottom corner) — even mid-stream — and watch a clean screenshot land in the live triage feed.

Sign in to Cobalt

Demo — any credentials work.

QA test plan

System under test: a Next.js 16 SaaS dashboard with auth, a Stripe-style checkout iframe, a virtualized table, and a streaming AI panel.

  1. 1. Sign in (any credentials) and browse the dashboard.
  2. 2. Open the AI assistant and start a response — then file a bug mid-stream.
  3. 3. Confirm the screenshot is coherent under token-by-token DOM churn.
  4. 4. Open "Buy a seat" — the cross-origin checkout iframe is captured cleanly.
  5. 5. Use "Break it" to plant a defect (stream error / iframe fail / broken row).
  6. 6. File a bug right after — the console error rides along in the report.

How it's captured

The widget rasterizes the page with html-to-image. This demo exercises the four things that break naive capture on a SaaS stack:

  • · a cross-origin (Stripe) iframe — opaque, captured gracefully
  • · a virtualized 10k-row grid — captured at the current scroll position
  • · a DOM mutating under AI token streaming — coherent snapshot
  • · server-rendered + client-hydrated islands (Next.js App Router)