> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/AslamSDM/mentiq-sdk/llms.txt
> Use this file to discover all available pages before exploring further.

# SessionMonitor

> Component that monitors user session activity and tracks inactivity

## 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

<ParamField path="children" type="ReactNode" required>
  The content to render while monitoring session activity.
</ParamField>

<ParamField path="trackInactivity" type="boolean" default={true}>
  Whether to track user inactivity. When enabled, monitors user interactions and triggers events after inactivity periods.
</ParamField>

<ParamField path="inactivityThreshold" type="number" default={60000}>
  Time in milliseconds before a user is considered inactive. Default is 60000ms (1 minute).
</ParamField>

## Usage

### Basic Session Monitoring

```tsx theme={null}
import { SessionMonitor } from 'mentiq-sdk';

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

### Custom Inactivity Threshold

```tsx theme={null}
// Track inactivity after 5 minutes
<SessionMonitor inactivityThreshold={300000}>
  <Application />
</SessionMonitor>
```

### Disable Inactivity Tracking

```tsx theme={null}
<SessionMonitor trackInactivity={false}>
  <PublicContent />
</SessionMonitor>
```

### E-commerce Application

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

### Dashboard with Short Timeout

```tsx theme={null}
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):

```typescript theme={null}
{
  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

```typescript theme={null}
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

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