open-index/open-npm huggingface dataset:
npm package: @o11y/monitor-vibes-ui
Description: O11y instrumentation package for UI applications with automatic rootActivity and pageview tracking
Author: Instrumentation Team
Latest version: 0.1.2

# @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

```bash
npm install @o11y/monitor-vibes-ui
```

## Usage

```javascript
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

```typescript
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