Watch

Overview

Watch is VibeCheck's passive error monitoring SDK. Add a lightweight script to your website, and Watch automatically captures JavaScript errors with full context — DOM session replay, console logs, network requests, and user actions. When an error occurs, the last 30 seconds of activity are flushed to VibeCheck so you can see exactly what happened.

No manual recording needed. Watch runs in the background and captures errors as they happen in production.

How it works

1. Add the SDK to your website via a script tag or npm package
2. Errors are captured automatically — window.onerror and unhandledrejection events trigger a capture
3. Context is buffered — the SDK continuously records DOM mutations, console logs, network requests, and user actions in a 30-second circular buffer
4. On error, the buffer is flushed with the error details to VibeCheck
5. Errors are grouped by fingerprint (normalized stack trace) and deduplicated

Setup

Script tag

Add before </head>:

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

NPM

npm install @vibecheck-watch/sdk

import { VibeCheck } from '@vibecheck-watch/sdk'
 
VibeCheck.init({
  projectKey: "proj_xxx",
  environment: "production"
})

Replace proj_xxx with your project's API key from the Watch dashboard.

API

VibeCheck.init(config)

Initialize the SDK. Must be called before any other method.

VibeCheck.identify(user)

Associate errors with a specific user.

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

VibeCheck.captureError(error)

Manually capture an error (in addition to automatic captures).

try {
  riskyOperation()
} catch (err) {
  VibeCheck.captureError(err)
}

VibeCheck.addContext(data)

Add custom key-value context to future error captures.

VibeCheck.addContext({
  page: "checkout",
  cartSize: 3,
  plan: "pro"
})

VibeCheck.optOut()

Disable all capturing. Useful for honoring user privacy preferences.

What gets captured

When an error fires, Watch flushes:

• DOM replay — rrweb recording of the last 30 seconds of page mutations, so you can visually replay what happened
• Console logs — all console output (log, warn, error, info) leading up to the error
• Network requests — fetch and XHR calls with method, URL, status, duration, and timing
• User actions — clicks, inputs, and navigation events with timestamps
• Error details — type, message, full stack trace, source file and line number

Dashboard

Captured errors appear in the Watch dashboard at /projects on the platform:

• Error groups — errors are grouped by fingerprint (normalized stack trace). Each group shows the error message, occurrence count, first/last seen time, and affected URLs.
• Status management — mark errors as New, Seen, Resolved, or Ignored
• Session viewer — click any error to open the full session replay with Error, Console, Network, and AI Fix tabs

Error grouping

Errors are deduplicated using a fingerprint derived from the normalized stack trace:

1. Stack frames are stripped of query parameters, hashes, and line/column numbers
2. The normalized stack is hashed with SHA-256
3. Errors with the same hash are grouped together
4. Within a 60-second window, duplicate errors from the same session are suppressed

AI Fix integration

Watch errors work with AI Fix. From the error session viewer, navigate to the AI Fix tab to have the AI agent analyze the error's stack trace, read your GitHub repo, and propose a code fix — all from the error context.

Technical details

• Bundle size: lightweight IIFE build, loaded asynchronously
• Buffer limits: 30-second time window, 2MB cap
• Compression: payloads are gzip-compressed before sending
• Retry: failed sends retry with exponential backoff (1s, 2s, 4s)
• Fallback: uses sendBeacon on page unload to avoid data loss
• Privacy: no cookies, no cross-site tracking. DOM recording respects input[type=password] masking by default.

Tips

• Set the environment — use environment: "production" for prod and environment: "staging" for staging to filter errors by environment in the dashboard.
• Identify users — call VibeCheck.identify() after login so you can see which users are affected by each error.
• Add custom context — use VibeCheck.addContext() to attach page names, feature flags, or user plan info to errors.
• Use with AI Fix — connect your GitHub repo in Settings to enable one-click PR creation from error sessions.