Overview
TheSessionMonitor component tracks user activity and detects when users become inactive. It listens to various user interaction events and triggers analytics when inactivity thresholds are reached.
Props
The content to render while monitoring session activity.
Whether to track user inactivity. When enabled, monitors user interactions and triggers events after inactivity periods.
Time in milliseconds before a user is considered inactive. Default is 60000ms (1 minute).
Usage
Basic Session Monitoring
Custom Inactivity Threshold
Disable Inactivity Tracking
E-commerce Application
Dashboard with Short Timeout
Tracked Events
session_inactive
Tracked when a user becomes inactive (no interaction for the specified threshold):Behavior
- Monitors multiple user interaction events: mousedown, mousemove, keypress, scroll, touchstart
- Resets the inactivity timer on any tracked user interaction
- Tracks inactivity only once per inactivity period
- Uses passive event listeners for optimal performance
- Automatically cleans up event listeners on unmount
- Renders children as a React Fragment (no wrapper element)
Monitored Events
The component listens to the following browser events:mousedown- Mouse button pressmousemove- Mouse movementkeypress- Keyboard inputscroll- Page scrollingtouchstart- Touch screen interaction
Use Cases
- Track user engagement levels
- Detect session abandonment
- Trigger re-engagement prompts
- Monitor application usage patterns
- Implement auto-logout warnings
- Measure active vs. idle time
- Optimize resource usage during inactivity
- Analyze user attention spans
Implementation Details
The component uses a timer-based approach:- Sets up event listeners for user interactions
- On any interaction, updates the last activity timestamp
- Clears any existing inactivity timer
- Starts a new timer for the specified threshold
- If the timer completes without interruption, tracks the inactivity event
Performance Notes
- All event listeners use
{ passive: true }for better performance - Only one timeout active at a time
- Efficient cleanup prevents memory leaks
- No re-renders triggered by activity updates