React library for capturing and monitoring application-breaking errors.
npm install react-monitoring-kitimport { 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>
);
}- 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
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>
);
}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>;
}import { ErrorBoundary } from 'react-monitoring-kit';
function App() {
return (
<ErrorBoundary
onError={(errorDetails) => {
console.log('Error:', errorDetails);
}}
fallback={<div>Something went wrong</div>}
>
<ComponentThatMightError />
</ErrorBoundary>
);
}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"
}MIT