@vibecheck-watch/sdk

Lightweight JavaScript SDK for passive error monitoring with full session replay. Captures JS errors with DOM recording, console logs, network requests, and user actions — then sends everything to VibeCheck for debugging with session replay.

Install

Script tag (easiest):

<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"
})

What it captures

When a JS error occurs, the SDK flushes the last 30 seconds of:

• DOM replay — full session recording via rrweb (mouse movements, clicks, scrolling, DOM mutations)
• Console logs — all console.log/warn/error calls with timestamps
• Network requests — fetch and XHR calls with status codes, timing, and errors
• User actions — clicks, input changes, and navigation events

API

// Initialize (required)
VibeCheck.init({
  projectKey: "proj_xxx",       // Required — from your VibeCheck project
  endpoint: "https://...",      // Custom endpoint (default: VibeCheck cloud)
  bufferDuration: 30,           // Seconds of replay to keep (default: 30)
  sampleRate: 1.0,              // 0-1, percentage of errors to capture (default: 1.0)
  environment: "production",    // Environment tag
  release: "1.2.3",             // App version tag
  ignoreErrors: [               // Skip matching errors
    "ResizeObserver loop",
    /Script error/
  ],
  beforeSend: (event) => {      // Transform or filter before sending
    // return null to drop the event
    return event
  }
})

// Identify the current user (optional)
VibeCheck.identify({
  id: "user_123",
  email: "[email protected]",
  name: "Jane Doe"
})

// Capture an error manually
VibeCheck.captureError(new Error("Something went wrong"))

// Add custom context
VibeCheck.addContext({ page: "checkout", cartSize: 3 })

// Opt out of tracking (stops all recording)
VibeCheck.optOut()

How it works

1. The SDK continuously records DOM mutations, console logs, network requests, and user actions into a circular buffer (30s window, 2MB cap)
2. When a JS error fires (window.onerror, unhandledrejection), the SDK snapshots the current buffer
3. After 2 seconds of no new errors, all queued errors are flushed to the VibeCheck platform
4. Errors are deduplicated by fingerprint (normalized stack trace) — same error won't be sent twice within 60 seconds
5. On the platform, you get a full session replay with synced console, network, and user action timelines

Privacy

• Passwords are masked by default (<input type="password">)
• Add vc-block class to any element to exclude it from recording
• Add vc-ignore class to exclude an element's content but keep its structure
• VibeCheck.optOut() stops all recording and clears buffers
• sampleRate lets you capture only a percentage of errors
• beforeSend hook lets you redact or drop events before they leave the browser

Browser support

Works in all modern browsers (Chrome, Firefox, Safari, Edge). No IE support.

Size

~240KB raw / ~77KB gzipped (includes rrweb recorder and pako compression)

License

MIT