@catdoes/watch-web

Error tracking and monitoring SDK for web applications.

CatDoes Watch provides real-time error tracking, crash reporting, and debugging tools for your web applications built with Vite, Next.js, or any other web framework.

Features

• Automatic Error Capture - Catches unhandled errors and promise rejections
• React Error Boundary - Integrated error boundary component
• Breadcrumbs - Track user actions leading up to errors
• Offline Support - Queues events in localStorage, sends when reconnected
• Lightweight - Zero runtime dependencies

Installation

npm install @catdoes/watch-web

Quick Start

1. Initialize the SDK

In your app's entry point (e.g., main.tsx for Vite, or app/layout.tsx for Next.js):

import { Watch, setupGlobalHandlers } from "@catdoes/watch-web";

const client = Watch.init({
  apiKey: import.meta.env.VITE_CATDOES_WATCH_KEY || "",
  debug: import.meta.env.DEV,
});

if (client) {
  setupGlobalHandlers(client);
}

2. Wrap Your App with Error Boundary

import { WatchErrorBoundary } from "@catdoes/watch-web/react";

function App() {
  return <WatchErrorBoundary>{/* Your app content */}</WatchErrorBoundary>;
}

3. Capture Errors Manually (Optional)

import { Watch } from "@catdoes/watch-web";

try {
  await riskyOperation();
} catch (error) {
  Watch.captureError(error as Error, {
    context: "riskyOperation",
    userId: currentUser.id,
  });
}

API Reference

Watch.init(config)

Initializes the Watch client.

interface WatchConfig {
  apiKey: string;
  endpoint?: string;
  environment?: "development" | "production";
  captureConsoleErrors?: boolean;
  maxBreadcrumbs?: number;
  debug?: boolean;
  beforeSend?: (event) => event | null;
}

Watch.captureError(error, extra?)

Manually capture an error.

Watch.captureError(new Error("Something went wrong"), {
  userId: "123",
  action: "checkout",
});

Watch.captureMessage(message, level?)

Capture a message as an error.

Watch.captureMessage("User attempted invalid action", "warning");

Watch.addBreadcrumb(breadcrumb)

Add a breadcrumb for context.

Watch.addBreadcrumb({
  type: "navigation",
  message: "User navigated to Settings",
  data: { screen: "Settings" },
});

Watch.setContext(key, value)

Set context that will be attached to all future events.

Watch.setContext("appVersion", "1.2.3");

Watch.setUser(user)

Set user information for error correlation.

Watch.setUser({
  id: "user123",
  email: "[email protected]",
});

Watch.flush()

Force flush all queued events to the server.

await Watch.flush();

Breadcrumb Types

• navigation - Route or page changes
• ui - User interactions (clicks, form submissions)
• http - Network requests
• console - Console logs
• custom - Custom events

Environment Variables

# Vite
VITE_CATDOES_WATCH_KEY=your_api_key_here

# Next.js
NEXT_PUBLIC_CATDOES_WATCH_KEY=your_api_key_here

Support

• Documentation: https://catdoes.watch/docs
• Support: [email protected]

License

Proprietary - All rights reserved by CatDoes.