Logo

API & SDKs

Integrate Watchup directly into your application code.

Initialization Requirement

You must always initialize the SDKs with your Project ID. Requests without a valid Project ID will be rejected.

JS

JavaScript / React SDK

Unified tracking for web applications

1

Install the package

npm install watchup-react
2

Create Client Wrapper

In Next.js, create a client component (e.g., WatchupClient.js) to prevent hydration errors.

"use client";
import { WatchupProvider } from 'watchup-react';

export function WatchupClient({ children }) {
  return (
    <WatchupProvider 
      projectId="YOUR_PROJECT_ID" 
      apiKey="YOUR_API_KEY"
      baseUrl="https://watchup.space"
    >
      {children}
    </WatchupProvider>
  );
}
3

Add to Layout

Wrap your children in layout.tsx with your new component.

import { WatchupClient } from './WatchupClient';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <WatchupClient>
          {children}
        </WatchupClient>
      </body>
    </html>
  );
}

Automatic Tracking Enabled

Once wrapped, Watchup will automatically monitor all API requests (fetch/XHR), web-vitals, and console errors without any extra code.

RN

React Native SDK

Monitor mobile app performance & crashes

1

Install the package

npm install watchup-rn
2

Initialize

Wrap your root app component with the provider.

import { WatchupProvider } from 'watchup-rn';

const App = () => {
  return (
    <WatchupProvider
      projectId="YOUR_PROJECT_ID"
      apiKey="YOUR_API_KEY"
      baseUrl="https://watchup.space"
    >
      <MainApp />
    </WatchupProvider>
  );
};
3

Manual Capture

Use the hook to capture handled errors manually.

import { useWatchup } from 'watchup-rn';

const MyComponent = () => {
  const watchup = useWatchup();

  const handleError = (error) => {
    watchup?.captureError(error, { 
      isFatal: false 
    });
  };

  return <Button 
    onPress={() => handleError(new Error("Test"))} 
    title="Test" 
  />;
};
SV

SvelteKit SDK

Native monitoring for SvelteKit apps

1

Install the package

npm install watchup-svelte
2

Initialize (Client-side)

Add this to your +layout.svelte to start tracking.

<script lang="ts">
  import { initWatchup } from 'watchup-svelte'

  initWatchup({
    projectId: 'YOUR_PROJECT_ID',
    apiKey: 'your_api_key'
  })
</script>
3

Manual Error Capture

Report exceptions manually from any part of your code.

import { captureException } from 'watchup-svelte'

try {
  riskyOperation()
} catch (err) {
  captureException(err)
}
U

Universal SDK (Manual)

Core SDK for manual exception & message handling

1

Install the package

npm install watchup-sdk
2

Initialize

Setup the core worker with your credentials.

import { initWatchup } from 'watchup-sdk'

const watchup = initWatchup({
  projectId: 'YOUR_PROJECT_ID',
  apiKey: 'YOUR_API_KEY',
  environment: 'production'
})
3

Capture Events

Manually send errors or custom log messages.

// Capture Exception
watchup.captureException(new Error("Failed to process order"))

// Capture Message
watchup.captureMessage("User completed onboarding")

Watchup CLI

Manage projects and monitors from your terminal

1

Install Globally

npm install -g watchup-cli
2

Authenticate

watchup login
3

Common Commands

# List all projects
watchup projects:list
# List monitors for a project
watchup monitors:list --project YOUR_PROJECT_ID
# Create a new monitor
watchup monitors:create --project YOUR_PROJECT_ID
# Select and view details
watchup monitors:select
PY

Python SDK

Advanced server-side monitoring

pip install watchup_py
from watchup_py import WatchupClient

client = WatchupClient(
    project_id="YOUR_PROJECT_ID",
    api_key="YOUR_API_KEY"
)

Configuration Credentials

Global identifiers for your project

YOUR_PROJECT_ID