Skip to content

Latest commit

 

History

History
119 lines (93 loc) · 2.93 KB

README.md

File metadata and controls

119 lines (93 loc) · 2.93 KB

WatcherMan

WatcherMan is a real-time website monitoring system built with Next.js and Supabase that helps you track the uptime, latency, and status of multiple websites simultaneously.

Features

  • Real-time Monitoring: Track website status and performance in real-time
  • Custom Monitoring Intervals: Set different monitoring frequencies for each website
  • Interactive Dashboard: View detailed performance metrics and status history
  • Data Visualization:
    • Real-time latency graphs
    • Status indicators with color coding
    • Historical performance data
  • Data Export: Export monitoring data in CSV format with flexible date range selection
  • Status Classifications:
    • UP: Website is responding normally
    • DOWN: Website is not accessible
    • DELAYED: Response time consistently exceeding threshold
    • PENDING: Initial monitoring state

Tech Stack

  • Frontend: Next.js with React
  • Backend: Supabase
  • Database: PostgreSQL (via Supabase)
  • Charts: Recharts
  • UI Components: shadcn/ui
  • Icons: Lucide React
  • Date Handling: date-fns

Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn
  • Supabase account and project

Environment Variables

Create a .env file in the root directory with the following variables:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_SERVICE_ROLE=your_supabase_service_role

Database Setup

Create the following tables in your Supabase database:

website_list

create table website_list (
  address text primary key,
  freq integer not null
);

website_monitoring

create table website_monitoring (
  id bigint primary key generated always as identity,
  address text not null,
  status text not null,
  message text,
  lastChecked timestamp with time zone not null,
  latency double precision,
  created_at timestamp with time zone default timezone('utc'::text, now())
);

Installation

  1. Clone the repository:
git clone https://github.com/yourusername/watcherman.git
cd watcherman
  1. Install dependencies:
npm install
# or
yarn install
  1. Start the development server:
npm run dev
# or
yarn dev
  1. Start the monitoring service:
node monitor.js

Usage

  1. Access the dashboard at http://localhost:3000
  2. Add websites to monitor by entering their URLs
  3. View real-time status updates and performance metrics
  4. Export monitoring data as needed

Key Components

  • Home Component: Main dashboard interface (Home.tsx)
  • DataExportModal: Handles data export functionality (DataExportModal.tsx)
  • WebsiteMonitor: Core monitoring logic (monitor.js)

Monitoring Service

The monitoring service runs independently and:

  • Performs regular health checks on registered websites
  • Updates status and metrics in real-time
  • Handles connection timeouts and errors
  • Manages monitoring frequencies per website
  • Provides real-time updates via Supabase subscriptions