@dagij/plugin (SmartMonitor plugin)

A comprehensive monitoring plugin for React applications that automatically captures errors, user interactions, page views, performance metrics, and API requests.

Features

• 🚀 Zero Configuration: Simple provider-based setup
• 🔍 Comprehensive Monitoring: Errors, clicks, page views, performance, and API requests
• 📊 Real-time Analytics: Track user behavior and application performance
• 🌐 Rich Context: Captures browser info, session data, and page context
• 📦 Lightweight: Minimal performance overhead
• ⚛️ React First: Built specifically for React applications with Provider pattern

Installation

npm install @dagij/plugin

Or using yarn:

yarn add @dagij/plugin

Quick Start

React Applications

Wrap your application with the SmartMonitorProvider component:

import { SmartMonitorProvider } from '@dagij/plugin';
import App from './App';

function Main() {
  return (
    <SmartMonitorProvider
      endpoint="https://your-backend.onrender.com"
      projectId="your-project-id"
      apiKey="your-api-key"
      trackClicks={true}
      trackPageViews={true}
      trackPerformance={true}
      trackApiRequests={true}
      debug={false}
    >
      <App />
    </SmartMonitorProvider>
  );
}

export default Main;

React Example (Full Setup)

// src/main.tsx or src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { SmartMonitorProvider } from '@dagij/plugin';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <SmartMonitorProvider
      endpoint="https://your-backend.onrender.com"
      projectId="your-project-id"
      apiKey="your-api-key"
      trackClicks={true}
      trackPageViews={true}
      trackPerformance={true}
      trackApiRequests={true}
      debug={false}
    >
      <App />
    </SmartMonitorProvider>
  </React.StrictMode>
);

What Gets Captured

JavaScript Errors

• Uncaught exceptions
• Syntax errors
• Runtime errors
• Error message and stack trace

Promise Rejections

• Unhandled Promise rejections
• Rejection reason and context

Network Errors

• Failed fetch requests
• HTTP error responses (4xx, 5xx)
• Request URL, method, and status code

User Clicks (when enabled)

• Element clicked (tag name, class, id)
• Click position (x, y coordinates)
• Timestamp
• Page context

Page Views (when enabled)

• URL visited
• Referrer
• Timestamp
• Session information

Performance Metrics (when enabled)

• Page load time
• Time to first byte (TTFB)
• DOM content loaded time
• Resource loading times
• Navigation timing

API Requests (when enabled)

• Request URL and method
• Response status and time
• Request/response headers
• Request payload (optional)
• Response time

Context Information

For every captured event, SmartMonitor includes:

• Timestamp
• Page URL (including query parameters)
• Session ID (persisted across page loads)
• User ID (if provided)
• Browser user agent
• Viewport dimensions
• Project ID and API authentication

Configuration

SmartMonitorProvider Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | endpoint | string | Yes | - | URL of your SmartMonitor backend | | projectId | string | Yes | - | Your project ID from the dashboard | | apiKey | string | Yes | - | Your API key from the dashboard | | trackClicks | boolean | No | true | Enable/disable click event tracking | | trackPageViews | boolean | No | true | Enable/disable page view tracking | | trackPerformance | boolean | No | true | Enable/disable performance metrics | | trackApiRequests | boolean | No | true | Enable/disable API request monitoring | | debug | boolean | No | false | Enable debug logging to console |

Example:

<SmartMonitorProvider
  endpoint="https://your-backend.onrender.com"
  projectId="my-project-abc123"
  apiKey="sk_..."
  trackClicks={true}
  trackPageViews={true}
  trackPerformance={true}
  trackApiRequests={true}
  debug={false}
>
  <App />
</SmartMonitorProvider>

API Reference

SmartMonitor.init(config: MonitorConfig): void

For non-React or vanilla JavaScript applications, you can use the init method.

Parameters:

• config (required): Configuration object with the following properties:
  • endpoint (required): The URL of your SmartMonitor backend
  • projectId (required): Your project ID from the dashboard
  • apiKey (required): Your API key from the dashboard
  • trackClicks (optional): Enable click tracking (default: true)
  • trackPageViews (optional): Enable page view tracking (default: true)
  • trackPerformance (optional): Enable performance tracking (default: true)
  • trackApiRequests (optional): Enable API request tracking (default: true)
  • debug (optional): Enable debug mode (default: false)

Example:

SmartMonitor.init({
  endpoint: 'https://your-backend.onrender.com',
  projectId: 'my-project-abc123',
  apiKey: 'sk_...',
  trackClicks: true,
  trackPageViews: true,
  trackPerformance: true,
  trackApiRequests: true,
  debug: false
});

SmartMonitor.setUserId(userId: string): void

Updates the user ID after initialization (useful for login flows).

Parameters:

• userId (required): A unique identifier for the current user

Example:

// After user logs in
SmartMonitor.setUserId('user-789');

SmartMonitor.captureError(error: Error, context?: Record<string, any>): void

Manually capture an error with optional additional context.

Parameters:

• error (required): The Error object to capture
• context (optional): Additional context data to include with the error

Example:

try {
  // Some risky operation
  riskyFunction();
} catch (error) {
  SmartMonitor.captureError(error as Error, {
    operation: 'riskyFunction',
    customData: 'additional info'
  });
}

How It Works

1. Error Capture: Registers global handlers for window.onerror and window.onunhandledrejection
2. Network Interception: Wraps the native fetch API to monitor network requests
3. Context Collection: Gathers browser and session information
4. Transmission: Sends error logs to your backend via POST requests to /api/logs

Error Handling

SmartMonitor is designed to fail gracefully:

• If the backend is unreachable, errors are logged silently without disrupting your app
• If sessionStorage is unavailable, session IDs are stored in memory
• Network interception is transparent and doesn't modify request/response behavior

Browser Support

• Chrome/Edge: Latest 2 versions
• Firefox: Latest 2 versions
• Safari: Latest 2 versions
• Modern browsers with ES6+ support

TypeScript Support

SmartMonitor is written in TypeScript and includes full type definitions.

import SmartMonitor from '@dagij/plugin';

// Full type safety
SmartMonitor.init('http://localhost:3000', 'user-123');

Development

Build

npm run build

Test

npm test

Watch Mode

npm run dev

License

MIT

Support

For issues and questions, please visit the repository for this project:

https://github.com/dagijosi/Tester (see plugin/)