Monitor SDK

A comprehensive, enterprise-grade frontend monitoring SDK for web applications, similar to Sentry.

Features

• Error Tracking: Capture JavaScript errors, Promise rejections, resource load failures, and React errors
• Performance Monitoring: Web Vitals (FCP, LCP, FID, CLS, TTFB), navigation timing, resource timing
• User Behavior Tracking: Click events, route changes, custom events
• Network Monitoring: XHR and Fetch request tracking with performance metrics
• Framework Support: Core SDK (framework-agnostic) + React plugin (Vue coming soon)
• Advanced Features:
  • Sampling rate control
  • Data sanitization
  • Offline queue with retry
  • IndexedDB storage
  • Plugin architecture

Packages

• @monitor-sdk/core - Core monitoring SDK (framework-agnostic)
• @monitor-sdk/react - React integration
• monitor-server - Node.js backend service

Quick Start

Installation

# Install core package
npm install @monitor-sdk/core

# For React apps
npm install @monitor-sdk/react

Basic Usage (Vanilla JS)

import { Monitor } from '@monitor-sdk/core';

const monitor = Monitor.init({
  appId: 'my-app',
  appVersion: '1.0.0',
  reporter: {
    url: 'https://your-server.com/api/v1/report/batch',
  },
});

// Track custom events
monitor.track('button_click', { buttonId: 'submit' });

// Capture errors manually
monitor.captureError(new Error('Something went wrong'));

React Usage

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Monitor } from '@monitor-sdk/core';
import { MonitorProvider, useMonitor, ErrorBoundary } from '@monitor-sdk/react';
import App from './App';

const monitor = Monitor.init({
  appId: 'my-react-app',
  reporter: {
    url: 'https://your-server.com/api/v1/report/batch',
  },
});

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <MonitorProvider monitor={monitor}>
      <ErrorBoundary monitor={monitor}>
        <App />
      </ErrorBoundary>
    </MonitorProvider>
  </React.StrictMode>
);

Configuration

Monitor.init({
  appId: 'my-app',
  appVersion: '1.0.0',
  userId: 'user-123',

  reporter: {
    url: 'https://your-server.com/api/v1/report/batch',
    method: 'POST',
    timeout: 10000,
    maxRetries: 3,
    useBeacon: true,
  },

  sampling: {
    rate: 1.0,           // 100% sampling
    errorRate: 1.0,      // Always capture errors
    performanceRate: 0.1, // 10% performance sampling
  },

  error: {
    enabled: true,
    captureConsole: false,
    ignoreErrors: [/^Script error/],
  },

  performance: {
    enabled: true,
    captureWebVitals: true,
    captureNavigation: true,
    captureResource: false,
  },

  behavior: {
    enabled: true,
    captureClick: true,
    captureInput: false,
    captureRoute: true,
  },

  network: {
    enabled: true,
    captureXHR: true,
    captureFetch: true,
    ignoreUrls: [/localhost:3000/],
  },

  queue: {
    maxSize: 1000,
    flushInterval: 5000,
    flushSize: 30,
  },
});

Backend Server

Setup

cd server
cp .env.example .env
# Edit .env with your MongoDB connection string
pnpm install
pnpm run dev

Environment Variables

PORT=3000
MONGODB_URI=mongodb://localhost:27017/monitor
NODE_ENV=development
CORS_ORIGIN=*

API Endpoints

• POST /api/v1/report/batch - Batch report events
• GET /api/v1/query/errors - Query error logs
• GET /api/v1/query/performance - Query performance logs
• GET /api/v1/query/behavior - Query behavior logs

Development

# Install dependencies
pnpm install

# Build all packages
pnpm run build

# Run tests
pnpm run test

# Lint
pnpm run lint

License

MIT