@o11y/monitor-vibes-ui

O11y instrumentation package for UI applications with automatic rootActivity (trace) management and pageview tracking.

Features

• 🚀 Easy one-line initialization
• 📊 Automatic rootActivity (trace) management with idle detection
• 🔄 Automatic pageview tracking via History API monitoring
• 🖱️ Click tracking for user interactions
• 🌐 Network request monitoring (fetch/XHR)
• 📈 Web Vitals tracking (CLS, FCP, LCP, TTFB, INP)
• 🔌 Framework agnostic (works with React, Vue, Angular, etc.)

Installation

npm install @o11y/monitor-vibes-ui

Usage

import { initialize } from '@o11y/monitor-vibes-ui';

// Initialize at the start of your application
initialize({
  appName: "My Application", // optional
  endpoint: "https://your-log-endpoint.com/logs", // optional
  isProduction: false // optional
});

How It Works

RootActivity (Trace) Management

The package automatically manages rootActivity lifecycle:

1. Page Load: Starts a rootActivity on initial page load
2. User Interaction: Starts a new rootActivity when user clicks on interactable elements
3. Route Navigation: Stops current rootActivity and starts a new one on route changes
4. Idle Detection: Automatically stops rootActivity when all network requests complete

Pageview Tracking

Automatically logs pageview information when routes change via:

• history.pushState()
• history.replaceState()
• popstate events (browser back/forward)

Network Monitoring

Automatically tracks and logs:

• fetch API calls
• XMLHttpRequest (XHR) calls
• Network timing metrics

Configuration Options

interface MonitorOptions {
  appName?: string;                    // Default: "UI Application"
  endpoint?: string;                   // Default: "https://api.example.com/logs"
  isProduction?: boolean;              // Default: false
  enableClickTracking?: boolean;       // Default: true
  enableHistoryTracking?: boolean;     // Default: true
}

License

BSD-3-Clause