Skip to main content

Overview

The SessionMonitor 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

children
ReactNode
required
The content to render while monitoring session activity.
trackInactivity
boolean
default:true
Whether to track user inactivity. When enabled, monitors user interactions and triggers events after inactivity periods.
inactivityThreshold
number
default:60000
Time in milliseconds before a user is considered inactive. Default is 60000ms (1 minute).

Usage

Basic Session Monitoring

import { SessionMonitor } from 'mentiq-sdk';

function App() {
  return (
    <SessionMonitor>
      <Layout>
        <Dashboard />
      </Layout>
    </SessionMonitor>
  );
}

Custom Inactivity Threshold

// Track inactivity after 5 minutes
<SessionMonitor inactivityThreshold={300000}>
  <Application />
</SessionMonitor>

Disable Inactivity Tracking

<SessionMonitor trackInactivity={false}>
  <PublicContent />
</SessionMonitor>

E-commerce Application

function ShoppingApp() {
  return (
    <SessionMonitor inactivityThreshold={120000}>
      <Router>
        <Header />
        <ProductCatalog />
        <ShoppingCart />
      </Router>
    </SessionMonitor>
  );
}

Dashboard with Short Timeout

function AdminDashboard() {
  return (
    <SessionMonitor
      trackInactivity={true}
      inactivityThreshold={30000}  // 30 seconds
    >
      <AdminPanel />
    </SessionMonitor>
  );
}

Tracked Events

session_inactive

Tracked when a user becomes inactive (no interaction for the specified threshold):
{
  inactive_duration: number,    // The inactivity threshold in milliseconds
  last_activity: number         // Timestamp of the last recorded activity
}

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 press
  • mousemove - Mouse movement
  • keypress - Keyboard input
  • scroll - Page scrolling
  • touchstart - 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:
  1. Sets up event listeners for user interactions
  2. On any interaction, updates the last activity timestamp
  3. Clears any existing inactivity timer
  4. Starts a new timer for the specified threshold
  5. If the timer completes without interruption, tracks the inactivity event
const updateActivity = () => {
  lastActivityRef.current = Date.now();
  
  if (inactivityTimerRef.current) {
    clearTimeout(inactivityTimerRef.current);
  }
  
  inactivityTimerRef.current = setTimeout(() => {
    track('session_inactive', {
      inactive_duration: inactivityThreshold,
      last_activity: lastActivityRef.current,
    });
  }, inactivityThreshold);
};

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

Combining with Other Components

function App() {
  return (
    <SessionMonitor inactivityThreshold={120000}>
      <TrackTime intervals={[60, 300, 600]}>
        <TrackScroll milestones={[25, 50, 75, 100]}>
          <MainContent />
        </TrackScroll>
      </TrackTime>
    </SessionMonitor>
  );
}

Build docs developers (and LLMs) love