Lifecycle Management

Generic patterns for managing application lifecycle, specifically for web applications to prevent memory leaks and handle global errors.

When to Use

• User asks to handle startup/shutdown sequences or manage resource pools
• Need to implement error boundaries or prevent memory leaks
• Even if they just say "clean up resources" or "fix the memory leak"

Patterns

Global Error Handler

initGlobalErrorHandling() MUST be called to catch uncaught exceptions and unhandled rejections.

function initGlobalErrorHandling() {
  window.addEventListener('error', (event) => {
    console.error('Uncaught exception:', event.error);
    // Add telemetry/reporting here
  });

  window.addEventListener('unhandledrejection', (event) => {
    console.error('Unhandled rejection:', event.reason);
    // Add telemetry/reporting here
  });
}

Route Cleanup

Call lifecycle.cleanupRoute() before navigating to cancel in-flight fetch requests via a global AbortController.

const lifecycle = {
  controller: new AbortController(),
  cleanupRoute() {
    this.controller.abort();
    this.controller = new AbortController();
  }
};

Event Listeners

Use AbortController signal for all addEventListener calls where possible to automate cleanup.

const controller = new AbortController();
const { signal } = controller;

// handleResize must be defined in your component or module
window.addEventListener('resize', handleResize, { signal });

// Later, to remove all listeners associated with this controller:
controller.abort();

See Also

• security-code-auditor — Security audits
• pwa-offline-sync — Service workers and caching

Rationalizations

Red Flags

• addEventListener used without a corresponding removeEventListener or signal.
• No global error handling implementation.
• In-flight requests not cancelled during navigation or component unmounting.

Voice & Context

• Default: professional + blog
• Reference: voice-profiles skill for definitions and auto-detection.