uptimemesh-web

Web analytics & monitoring SDK for UptimeMesh.

Features

• Session tracking — browser, OS, device type, language, timezone, UTM params
• Page views — automatic via History API patching, with duration & scroll depth
• JavaScript errors — window.onerror + unhandledrejection
• Network monitoring — fetch + XMLHttpRequest interceptors (method, status, latency)
• Core Web Vitals — LCP, FID, CLS, FCP, TTFB via PerformanceObserver
• Rage clicks — 3+ clicks on same element within 500ms
• Dead clicks — click on non-interactive element
• Scroll milestones — 25%, 50%, 75%, 100% depth events
• Ad-blocker detection
• Batched ingest — events are batched and sent every 30s (configurable)

Installation

npm install uptimemesh-web
# or
yarn add uptimemesh-web
# or
pnpm add uptimemesh-web

Quick Start

import { UptimeMesh } from 'uptimemesh-web';

UptimeMesh.init('YOUR_API_KEY');

Get your API key from the Web Applications → App Detail → Integration tab in your UptimeMesh dashboard.

Framework Examples

Next.js (App Router)

// app/_providers/UptimeMeshProvider.tsx
'use client';
import { useEffect } from 'react';
import { UptimeMesh } from 'uptimemesh-web';

export function UptimeMeshProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    UptimeMesh.init(process.env.NEXT_PUBLIC_UPTIMEMESH_KEY!);
  }, []);
  return <>{children}</>;
}

React

// main.tsx
import { UptimeMesh } from 'uptimemesh-web';
UptimeMesh.init('YOUR_API_KEY');

Vue 3

// plugins/uptimemesh.ts
import { UptimeMesh } from 'uptimemesh-web';
export default { install: () => UptimeMesh.init('YOUR_API_KEY') };

Vanilla (CDN)

<script src="https://cdn.jsdelivr.net/npm/uptimemesh-web@1/dist/index.js"></script>
<script>UptimeMesh.init('YOUR_API_KEY');</script>

API

UptimeMesh.init(apiKey, options?)

Initializes the SDK. Call once on app startup.

| Option | Type | Default | Description | |---|---|---|---| | debug | boolean | false | Enable console logs | | ingestUrl | string | https://ingest.uptimemesh.com | Custom ingest URL (self-hosted) | | flushInterval | number (ms) | 30000 | Batch send interval | | disableNetwork | boolean | false | Disable network tracking | | disableErrors | boolean | false | Disable error tracking | | disableVitals | boolean | false | Disable Web Vitals | | disableClicks | boolean | false | Disable click tracking | | disableScroll | boolean | false | Disable scroll tracking |

Other methods

// Identify the current user
UptimeMesh.identify(userId: string | null): void

// Track a custom event
UptimeMesh.trackEvent(name: string, properties?: Record<string, unknown>): void

// Track a click
UptimeMesh.trackClick(element: string): void

// Manually capture an error
UptimeMesh.captureError(error: unknown, extra?: Record<string, unknown>): void

// Manually flush events (e.g. before page unload)
await UptimeMesh.flush(): Promise<void>

License

MIT — see LICENSE