UNPKG

react-activity-tracker

Version:

A library to track user interactions and API activity in React apps

31 lines (26 loc) 1.66 kB
# 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. ```bash npm install react-activity-tracker ``` ```js 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: ```json { "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.