React Monitoring Kit

React library for capturing and monitoring application-breaking errors.

Installation

npm install react-monitoring-kit

Basic Usage

import { ErrorMonitoringProvider } from 'react-monitoring-kit';

function App() {
  return (
    <ErrorMonitoringProvider
      config={{
        onError: (errorDetails) => {
          // Send to your logging service
          console.log('Error captured:', errorDetails);
          
          // Example: send to API
          fetch('/api/log-error', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(errorDetails),
          });
        },
      }}
    >
      <YourApp />
    </ErrorMonitoringProvider>
  );
}

Features

• Captures errors that break React components
• Extracts detailed information (stack trace, component, URL, line, file)
• Customizable context
• TypeScript first
• Zero required dependencies (except React)
• Optional React Router support

Advanced Usage

With React Router

import { ErrorMonitoringProvider, useRouteTracking } from 'react-monitoring-kit';
import { BrowserRouter } from 'react-router-dom';

function RouteTracker() {
  useRouteTracking();
  return null;
}

function App() {
  return (
    <ErrorMonitoringProvider
      config={{
        onError: (errorDetails) => {
          // errorDetails.additionalContext.route will have route information
          console.log('Error on route:', errorDetails.additionalContext?.route);
        },
      }}
    >
      <BrowserRouter>
        <RouteTracker />
        <YourApp />
      </BrowserRouter>
    </ErrorMonitoringProvider>
  );
}

Adding Custom Context

import { useErrorMonitoring } from 'react-monitoring-kit';

function UserProfile({ userId }) {
  const { addContext, removeContext } = useErrorMonitoring();

  useEffect(() => {
    addContext('userId', userId);
    return () => removeContext('userId');
  }, [userId]);

  return <div>Profile</div>;
}

Using ErrorBoundary Directly

import { ErrorBoundary } from 'react-monitoring-kit';

function App() {
  return (
    <ErrorBoundary
      onError={(errorDetails) => {
        console.log('Error:', errorDetails);
      }}
      fallback={<div>Something went wrong</div>}
    >
      <ComponentThatMightError />
    </ErrorBoundary>
  );
}

API

ErrorDetails

Object with detailed error information:

interface ErrorDetails {
  // Basic data
  message: string;              // Error message
  name: string;                 // Error name (e.g., TypeError)
  stack?: string;               // Complete stack trace
  componentStack: string;       // React component tree
  
  // Structured information
  sourceFile?: string;          // Exact file where the error occurred
  sourceLine?: number;          // Exact line of the error
  sourceColumn?: number;        // Exact column of the error
  componentName?: string;       // Name of the React component that failed
  userStack?: string[];         // Filtered stack (only user code, no node_modules)
  
  // Context
  timestamp: Date;              // When the error occurred
  url: string;                  // URL where the error happened
  userAgent: string;            // User's browser
  additionalContext?: {         // Customizable additional context
    route?: object;             // Route information (if using useRouteTracking)
    // ... other contexts added via addContext
  };
}

Example of captured error:

{
  message: "Cannot read property 'map' of undefined",
  name: "TypeError",
  sourceFile: "http://localhost:5173/src/components/UserList.tsx",
  sourceLine: 42,
  sourceColumn: 15,
  componentName: "UserList",
  userStack: [
    "UserList@http://localhost:5173/src/components/UserList.tsx:42:15",
    "Dashboard@http://localhost:5173/src/pages/Dashboard.tsx:28:10"
  ],
  url: "http://localhost:5173/dashboard",
  timestamp: "2025-10-17T14:54:18.123Z"
}

License

MIT