Identifying and Fixing Memory Leaks

Memory leaks occur when a program fails to release memory that is no longer needed, leading to degraded performance and potential crashes. In JavaScript, memory leaks are particularly common in long-running applications like web apps and Node.js servers.

Common Memory Leak Patterns

1. Forgotten Event Listeners

function setupHandler() {
  const button = document.getElementById('myButton');
  
  // Problem: Event listener remains even if component is removed
  button.addEventListener('click', () => {
    // Do something with data
    heavyOperation();
  });
}

// Solution: Remove event listener when no longer needed
function setupHandlerFixed() {
  const button = document.getElementById('myButton');
  
  const handler = () => {
    heavyOperation();
  };
  
  button.addEventListener('click', handler);
  
  // Return cleanup function
  return () => {
    button.removeEventListener('click', handler);
  };
}

2. Closures Holding References

// Problem: Cache holds references indefinitely
const cache = new Map();

function processData(data) {
  // Closure captures 'data' in the cache
  cache.set(data.id, () => {
    return heavyComputation(data);
  });
}

// Solution: Implement cache cleanup
const cache = new Map();
const MAX_CACHE_SIZE = 1000;

function processDataFixed(data) {
  // Implement cache size limits
  if (cache.size >= MAX_CACHE_SIZE) {
    const oldestKey = cache.keys().next().value;
    cache.delete(oldestKey);
  }
  
  cache.set(data.id, () => {
    return heavyComputation(data);
  });
  
  // Optional: Set expiration
  setTimeout(() => {
    cache.delete(data.id);
  }, 3600000); // 1 hour
}

3. Circular References

// Problem: Circular reference prevents garbage collection
function createCircularReference() {
  let obj1 = {};
  let obj2 = {};
  
  obj1.ref = obj2;
  obj2.ref = obj1;
  
  return obj1;
}

// Solution: Use WeakRef or manually break the reference
function createWeakReference() {
  let obj1 = {};
  let obj2 = {};
  
  obj1.ref = new WeakRef(obj2);
  obj2.ref = new WeakRef(obj1);
  
  return obj1;
}

Detection Tools and Techniques

1. Chrome DevTools Memory Profiler

// Take heap snapshot before operation
// Perform suspected leaking operation
// Take heap snapshot after operation
// Compare snapshots to identify retained objects

// Example of triggering heap snapshots programmatically
function debugMemoryLeak() {
  console.log('Before operation');
  // DevTools: Take heap snapshot
  
  performSuspectedLeakingOperation();
  
  console.log('After operation');
  // DevTools: Take heap snapshot and compare
}

2. Memory Usage Monitoring

function monitorMemoryUsage() {
  if (process.memoryUsage) {
    const used = process.memoryUsage();
    
    console.log({
      heapTotal: `${Math.round(used.heapTotal / 1024 / 1024)} MB`,
      heapUsed: `${Math.round(used.heapUsed / 1024 / 1024)} MB`,
      external: `${Math.round(used.external / 1024 / 1024)} MB`,
      rss: `${Math.round(used.rss / 1024 / 1024)} MB`
    });
  }
}

// Monitor at intervals
setInterval(monitorMemoryUsage, 1000);

Prevention Strategies

1. Use WeakMap and WeakSet

// Problem: Strong references prevent garbage collection
const cache = new Map();
cache.set(largeObject, computedData);

// Solution: Use WeakMap to allow garbage collection
const cache = new WeakMap();
cache.set(largeObject, computedData);
// largeObject can be garbage collected when no other references exist

2. Implement Cleanup in Components

class Component {
  constructor() {
    this.listeners = new Set();
    this.intervalIds = new Set();
  }
  
  addEventListener(element, type, handler) {
    element.addEventListener(type, handler);
    this.listeners.add({ element, type, handler });
  }
  
  setInterval(callback, delay) {
    const id = setInterval(callback, delay);
    this.intervalIds.add(id);
    return id;
  }
  
  cleanup() {
    // Remove all event listeners
    for (const { element, type, handler } of this.listeners) {
      element.removeEventListener(type, handler);
    }
    this.listeners.clear();
    
    // Clear all intervals
    for (const id of this.intervalIds) {
      clearInterval(id);
    }
    this.intervalIds.clear();
  }
}

3. Resource Pooling

class ResourcePool {
  constructor(createResource, maxSize = 10) {
    this.createResource = createResource;
    this.maxSize = maxSize;
    this.available = [];
    this.inUse = new Set();
  }
  
  async acquire() {
    if (this.available.length > 0) {
      const resource = this.available.pop();
      this.inUse.add(resource);
      return resource;
    }
    
    if (this.inUse.size < this.maxSize) {
      const resource = await this.createResource();
      this.inUse.add(resource);
      return resource;
    }
    
    throw new Error('Resource pool exhausted');
  }
  
  release(resource) {
    if (this.inUse.has(resource)) {
      this.inUse.delete(resource);
      this.available.push(resource);
    }
  }
}

Testing for Memory Leaks

describe('Memory Leak Tests', () => {
  it('should not leak memory when creating and destroying components', async () => {
    const initialMemory = process.memoryUsage().heapUsed;
    
    // Perform operations multiple times
    for (let i = 0; i < 1000; i++) {
      const component = new Component();
      component.doSomething();
      component.cleanup();
    }
    
    // Force garbage collection if available
    if (global.gc) {
      global.gc();
    }
    
    const finalMemory = process.memoryUsage().heapUsed;
    const diff = finalMemory - initialMemory;
    
    // Allow for some small increase
    expect(diff).toBeLessThan(1024 * 1024); // Less than 1MB growth
  });
});

Best Practices

1. Use Cleanup Patterns

   class Disposable {
     dispose() {
       // Cleanup resources
     }
   }

2. Implement Resource Limits

   const LIMITED_CACHE = {
     maxSize: 1000,
     items: new Map(),
     
     set(key, value) {
       if (this.items.size >= this.maxSize) {
         const oldestKey = this.items.keys().next().value;
         this.items.delete(oldestKey);
       }
       this.items.set(key, value);
     }
   };

3. Monitor Memory Usage

   class MemoryMonitor {
     static warn(threshold = 500) {
       const used = process.memoryUsage().heapUsed / 1024 / 1024;
       if (used > threshold) {
         console.warn(`High memory usage: ${Math.round(used)}MB`);
       }
     }
   }

Tools for Memory Analysis

1. Node.js --inspect

   node --inspect app.js
   # Connect Chrome DevTools for memory analysis

2. Heap Dump Analysis

   const heapdump = require('heapdump');
   
   // Create heap snapshot
   heapdump.writeSnapshot(`./heap-${Date.now()}.heapsnapshot`);

3. Automated Memory Monitoring

   class MemoryGuard {
     static startMonitoring(threshold = 100, interval = 1000) {
       return setInterval(() => {
         const used = process.memoryUsage().heapUsed / 1024 / 1024;
         if (used > threshold) {
           console.warn(`Memory threshold exceeded: ${Math.round(used)}MB`);
           // Optional: take heap snapshot or alert
         }
       }, interval);
     }
   }