Introducing Watch: Automatic Error Monitoring with Session Replay

The Gap Between Finding Bugs and Catching Errors

VibeCheck started as a tool for QA engineers to capture bugs during testing. You record your screen, capture console logs and network requests, and share a link with developers. It works great for bugs you can see and reproduce.

But what about the bugs you can't see? The JavaScript errors that happen in production, on your users' browsers, at 3am when nobody's watching?

That's what Watch is for.

What is Watch?

Watch is a lightweight SDK you add to your website. It runs silently in the background and waits for JavaScript errors. When one fires, Watch captures the last 30 seconds of context — DOM mutations, console logs, network requests, and user actions — and sends it to your VibeCheck dashboard.

No manual recording. No reproduction steps. The error happens, and you get a full session replay showing exactly what the user did before things broke.

How It Works

Add a single script tag to your site:

<script src="https://unpkg.com/@vibecheck-watch/sdk/dist/vibecheck.iife.js"></script>
<script>
  VibeCheck.init({
    projectKey: "proj_xxx",
    environment: "production"
  });
</script>

That's it. From this point on, every unhandled JavaScript error triggers a capture.

Under the hood, Watch continuously records the page using rrweb — the same technology that powers session replay tools like OpenReplay. The recording is kept in a 30-second circular buffer (capped at 2MB) so it's lightweight and doesn't grow over time.

When an error fires:

1. The buffer is frozen with the last 30 seconds of DOM events
2. Console logs, network requests, and user actions are collected
3. The error is fingerprinted (normalized stack trace hashed with SHA-256)
4. After a 2-second debounce, everything is gzip-compressed and sent to VibeCheck
5. Duplicate errors within the same session are suppressed for 60 seconds

The Dashboard

Errors land in the Watch dashboard on VibeCheck, grouped by fingerprint. Each group shows:

• The error type and message
• How many times it's occurred
• When it was first and last seen
• Which URLs are affected

Click into any error to open the full session viewer — a page with the DOM replay on the left and Error, Console, Network, and AI Fix tabs on the right. It's the same viewer you use for regular VibeCheck tracks, but populated with data from the SDK instead of a manual recording.

Error Management

Each error group has a status: New, Seen, Resolved, or Ignored. You can triage errors directly from the dashboard — mark noise as Ignored, acknowledge known issues as Seen, and track fixes through to Resolved.

Identify Affected Users

If your app has authentication, call VibeCheck.identify() after login:

VibeCheck.identify({
  id: "user_123",
  email: "jane@example.com"
})

Now each error session includes the affected user's info, so you can answer questions like "is this affecting paying customers?" without digging through server logs.

AI Fix Integration

Here's where Watch connects to the rest of VibeCheck: errors captured by Watch work with AI Fix.

From the error session viewer, the AI Fix tab receives the full error context — type, message, stack trace with file and line numbers — and uses it to navigate your GitHub repo and propose a code fix. The stack trace gives the agent precise file:line targeting, which makes it more accurate than working from a recording where it has to infer the problem.

Connect your GitHub repo in Settings and you can go from "error in production" to "PR ready for review" without writing a single line of code.

What About Privacy?

Watch captures DOM mutations, not screenshots or video. Password inputs are masked by default. The SDK doesn't use cookies or do any cross-site tracking. Payloads are compressed and sent directly to your VibeCheck project — no third-party services involved.

If a user opts out, call VibeCheck.optOut() and all capturing stops.

Getting Started

1. Create a project in the Watch dashboard
2. Copy your API key
3. Add the script tag or npm package to your website
4. Errors will start appearing in your dashboard automatically

Check the full Watch documentation for the complete API reference, setup options, and integration details.

Watch is available now for all VibeCheck users. Free plans include the SDK with the same usage limits as manual recordings.