MemoryMonitor

ComponentsMemory devtool

React component for real-time browser memory monitoring

Live demo

Install

$ npm install @usefy/memory-monitor

Quick start

MemoryMonitor.tsx

import { MemoryMonitor } from "@usefy/memory-monitor";

function App() {
  return (
    <div>
      <YourApp />
      {/* Add at the root of your app */}
      <MemoryMonitor />
    </div>
  );
}

API reference

Props

Core Configuration

Prop	Type	Default	Description
`mode`	`'development' \| 'production' \| 'always' \| 'headless' \| 'never'`	`'development'`	When to render the panel. See Mode Options below
`defaultOpen`	`boolean`	`false`	Initial open state
`position`	`'left' \| 'right'`	`'right'`	Panel slide-in position
`zIndex`	`number`	`9999`	Panel z-index
`disableInProduction`	`boolean`	`false`	Disable all features in production

Mode Options

The mode prop controls when the Memory Monitor UI is rendered:

Mode	Development	Production	Use Case
`'development'`	UI visible	UI hidden	Default. Debug during development only
`'production'`	UI hidden	UI visible	Show only in production (rare)
`'always'`	UI visible	UI visible	Always show regardless of environment
`'headless'`	UI hidden	UI hidden	No UI, but monitoring + callbacks still run
`'never'`	UI hidden	UI hidden	Completely disabled (no monitoring)

Note: Environment detection uses process.env.NODE_ENV. If unavailable, it falls back to hostname check (localhost, 127.0.0.1, etc.).

Common patterns:

// Default: Only visible during local development
<MemoryMonitor />

// Always visible (e.g., for internal tools or debugging pages)
<MemoryMonitor mode="always" />

// Production monitoring with callbacks, no UI
<MemoryMonitor
  mode="headless"
  onWarning={(data) => analytics.track('memory_warning', data)}
  onCritical={(data) => errorReporter.capture(data)}
/>

// Environment-based switching
<MemoryMonitor
  mode={process.env.NODE_ENV === 'development' ? 'always' : 'headless'}
/>

Monitoring Options

Prop	Type	Default	Description
`interval`	`number`	`1000`	Polling interval in milliseconds
`enableHistory`	`boolean`	`true`	Enable memory history tracking
`historySize`	`number`	`50`	Maximum history entries
`trackDOMNodes`	`boolean`	`true`	Track DOM node count
`trackEventListeners`	`boolean`	`true`	Track event listener count

Threshold Configuration

Prop	Type	Default	Description
`warningThreshold`	`number`	`70`	Warning threshold percentage (0-100)
`criticalThreshold`	`number`	`90`	Critical threshold percentage (0-100)
`autoGCThreshold`	`number \| null`	`null`	Auto-GC trigger threshold (null to disable)
`enableAutoGC`	`boolean`	`false`	Enable automatic GC trigger

Leak Detection

Prop	Type	Default	Description
`enableLeakDetection`	`boolean`	`true`	Enable memory leak detection
`leakSensitivity`	`'low' \| 'medium' \| 'high'`	`'medium'`	Leak detection sensitivity

UI Customization

Prop	Type	Default	Description
`triggerContent`	`ReactNode`	-	Custom trigger button content
`triggerPosition`	`{ top?: number; right?: number; bottom?: number; left?: number }`	`{ bottom: 20, right: 20 }`	Trigger button position
`defaultWidth`	`number`	`420`	Initial panel width (px)
`minWidth`	`number`	`320`	Minimum panel width (px)
`maxWidth`	`number`	`600`	Maximum panel width (px)
`theme`	`'system' \| 'light' \| 'dark'`	`'system'`	Theme setting
`className`	`string`	-	Additional CSS class
`showTrigger`	`boolean`	`true`	Show floating trigger button

Callbacks

Prop	Type	Description
`onOpenChange`	`(open: boolean) => void`	Called when panel opens/closes
`onWarning`	`(data: MemoryWarningData) => void`	Called when warning threshold exceeded
`onCritical`	`(data: MemoryCriticalData) => void`	Called when critical threshold exceeded
`onLeakDetected`	`(analysis: LeakAnalysis) => void`	Called when leak is detected
`onAutoGC`	`(event: AutoGCEventData) => void`	Called when auto-GC triggers
`onUpdate`	`(memory: MemoryInfo) => void`	Called on each memory update

Advanced

Prop	Type	Default	Description
`shortcut`	`string`	`'ctrl+shift+m'`	Keyboard shortcut to toggle
`persistSettings`	`boolean`	`true`	Persist settings to LocalStorage
`storageKey`	`string`	`'memory-monitor-panel-settings'`	LocalStorage key

Types

// Severity levels
type Severity = "normal" | "warning" | "critical";

// Theme settings
type ThemeSetting = "system" | "light" | "dark";

// Leak sensitivity
type LeakSensitivity = "low" | "medium" | "high";

// Memory trend
type Trend = "stable" | "increasing" | "decreasing";

// Panel snapshot
interface PanelSnapshot {
  id: string;
  label: string;
  timestamp: number;
  heapUsed: number;
  heapTotal: number;
  heapLimit: number;
  domNodes?: number;
  eventListeners?: number;
  isAuto?: boolean;
  analysisContext?: SnapshotAnalysisContext;
}

// Snapshot analysis context
interface SnapshotAnalysisContext {
  trend: Trend;
  leakProbability: number;
  severity: Severity;
  usagePercentage: number;
}

// Leak analysis result
interface LeakAnalysis {
  isLeaking: boolean;
  probability: number;
  trend: Trend;
  recommendation?: string;
}

// Memory warning data
interface MemoryWarningData {
  memory: MemoryInfo;
  usagePercentage: number;
  threshold: number;
  timestamp: number;
}

// Auto-GC event data
interface AutoGCEventData {
  threshold: number;
  usage: number;
  timestamp: number;
}

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

Full README →Open in Storybook →