Skip to content

Fix memory leaks in dashboard components#225

Open
GazzyLee wants to merge 1 commit into
Open-audit-foundation:mainfrom
GazzyLee:fix/memory-leak-dashboard-cleanup
Open

Fix memory leaks in dashboard components#225
GazzyLee wants to merge 1 commit into
Open-audit-foundation:mainfrom
GazzyLee:fix/memory-leak-dashboard-cleanup

Conversation

@GazzyLee

@GazzyLee GazzyLee commented Jun 24, 2026

Copy link
Copy Markdown

Problem

Navigating away from the main dashboard stream view while active event listener timers or intervals are spinning leaks client heap memory, steadily slowing down the app context over time.

Root Cause

Several dashboard components were creating setTimeout calls without tracking or cleaning them up on component unmount, causing orphaned timers to accumulate in memory:

  • useLiveFeed hook: Event highlight animations (600ms timeouts) were not tracked
  • CopyButton: Copy feedback timeout (2000ms) was not tracked
  • ExportDataDialog: Export completion delay (400ms) was not tracked

Solution

Systematically added timeout tracking and cleanup logic to all affected components:

Changes Made

lib/hooks/useLiveFeed.ts

  • Added timeoutIdsRef to track all setTimeout IDs created for event highlight animations
  • Modified disconnect() function to clear all pending timeouts before cleanup
  • Updated both WebSocket message handler and pause buffer flush to track timeout IDs
  • Ensures all animation timers are cleared when component unmounts or live feed is stopped

components/dashboard/RawDataDialog.tsx

  • Added timeoutRef to CopyButton component
  • Added useEffect cleanup to clear timeout on component unmount
  • Clears existing timeout before setting a new one to prevent duplicates

components/dashboard/ExportDataDialog.tsx

  • Added timeoutRef to track export completion timeout
  • Added useEffect cleanup to clear timeout on component unmount
  • Clears existing timeout before setting a new one to prevent duplicates

components/dashboard/SecurityMetricsDashboard.tsx

  • Added clarifying comment for existing interval cleanup (already properly implemented)

Acceptance Criteria

  • Audited all active event streams, WebSockets, setInterval, and setTimeout processes in dashboard components
  • Added cleanup logic in component unmount lifecycles
  • All timers are now properly tracked and cleared on unmount
  • WebSocket connections properly closed via existing disconnect cleanup

Testing

  • Verified that all setTimeout calls now have corresponding clearTimeout calls
  • Confirmed that component unmount triggers proper cleanup via useEffect return functions
  • WebSocket cleanup was already properly implemented via existing disconnect pattern

Impact

This fix prevents memory leaks that occur when users navigate away from the dashboard while live feeds are active, improving application performance and stability over time.

##Closes #43

- Add timeout tracking and cleanup in useLiveFeed hook to prevent memory leaks from event highlight timeouts
- Add timeout tracking and cleanup in CopyButton component (RawDataDialog)
- Add timeout tracking and cleanup in ExportDataDialog
- Add clarifying comment for existing interval cleanup in SecurityMetricsDashboard
- All setTimeout calls now properly tracked and cleared on component unmount
- WebSocket connections properly closed on unmount via existing disconnect cleanup

Resolves: Navigating away from main dashboard stream view while active event listener timers or intervals are spinning leaks client heap memory
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[DeVops] Resolve Memory Leak in Event Listener Unmounting Processes

1 participant