React Activity Tracker
Track all network activity, user interactions, performance metrics, and JavaScript errors in your React app. This lightweight utility automatically logs all events and allows sending them to your backend.
npm install react-activity-tracker
import { initGlobalTracker, initUserActivityTracker, sendToServer } from 'react-activity-tracker';
const endpoint = 'http://YOUR_API/logs';
// Set endpoint once
useEffect(() => {
initGlobalTracker();
initUserActivityTracker();
// Send logs to server every 10 seconds
const interval = setInterval(() => {
sendToServer(endpoint);
}, 10000);
})
Tracks fetch, XMLHttpRequest, axios, WebSocket messages, sendBeacon calls, clicks, inputs, page performance, JavaScript errors, and unhandled promise rejections. All logs are timestamped.
API: initGlobalTracker()
enables network tracking. initUserActivityTracker()
tracks DOM events, performance, and JS errors. logger.setEndpoint(url)
sets your log server URL. logger.getEvents()
returns current logs. logger.sendToServer()
sends logs to the server and clears memory.
Example log entry:
{ "type": "fetch", "url": "/api/user", "method": "GET", "status": 200, "duration": 145, "timestamp": "2025-05-12T10:12:00.000Z" }
Tracked types: fetch, xhr, axios, websocket-send, websocket-receive, beacon, click, input, error, unhandledrejection, performance.
MIT License © 2025 Your Name. GitHub: https://github.com/your-username/react-activity-tracker. npm: https://www.npmjs.com/package/react-activity-tracker. Contributions welcome.