@catdoes/watch

Error tracking and monitoring SDK for React Native and Expo apps.

CatDoes Watch provides real-time error tracking, crash reporting, and debugging tools for your mobile applications built with React Native and Expo.

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
• 📱 Cross-Platform - Works on iOS, Android, and Web
• 🔄 Offline Support - Queues events when offline, sends when reconnected
• ⚡ Lightweight - Minimal impact on app performance

Installation

npm install @catdoes/watch
# or
yarn add @catdoes/watch

Peer Dependencies

Make sure you have these peer dependencies installed:

npx expo install @react-native-async-storage/async-storage expo-crypto

Quick Start

1. Initialize the SDK

In your app's entry point (e.g., _layout.tsx for Expo Router):

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

// Initialize Watch with your API key
const watchClient = Watch.init({
  apiKey: process.env.EXPO_PUBLIC_CATDOES_WATCH_KEY || "",
  debug: __DEV__, // Enable debug logging in development
});

// Set up global error handlers
if (watchClient) {
  setupGlobalHandlers(watchClient);
}

2. Wrap Your App with Error Boundary

import { ErrorBoundary } from "@/components/ErrorBoundary";

export default function RootLayout() {
  return (
    <ErrorBoundary>
      {/* Your app content */}
    </ErrorBoundary>
  );
}

3. Capture Errors Manually (Optional)

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

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;                    // Your CatDoes Watch API key
  endpoint?: string;                 // Custom endpoint (default: CatDoes servers)
  environment?: "development" | "production";
  captureConsoleErrors?: boolean;    // Capture console.error (default: false)
  maxBreadcrumbs?: number;           // Max breadcrumbs to store (default: 20)
  debug?: boolean;                   // Enable debug logging
  beforeSend?: (event) => event | null; // Modify or drop events
}

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/screen changes
• ui - User interactions (taps, swipes)
• http - Network requests
• console - Console logs
• custom - Custom events

Environment Variables

Set your API key in your environment:

EXPO_PUBLIC_CATDOES_WATCH_KEY=your_api_key_here

Support

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

License

Proprietary - All rights reserved by CatDoes.