Description

The application is experiencing crashes when processing large datasets of incident alerts (specifically scenarios involving 80+ alerts with ~300,000 timestamp values).

The root cause is the use of the spread operator (...) within Math.max and Math.min. When applied to large arrays, JavaScript attempts to push all array elements onto the call stack as arguments, exceeding the browser's stack limit.

Impact

• Error Thrown: RangeError: Maximum call stack size exceeded
• User Experience: The application crashes or fails to render the Incidents view when data volume is high.
• Location: /web/src/components/Incidents/

Problematic Code Pattern

The following pattern causes the stack overflow when timestamps contains >100k items:

// CRASHES with large arrays
const incidentFirstTimestamp = Math.min(...timestamps);
const incidentLastTimestamp = Math.max(...timestamps);

// Also seen as:
Math.max(...incident.values.map((v) => v[0]));

Proposed Solution

Refactor the code to use .reduce(). This approach runs in the heap rather than the call stack, using O(1) stack space regardless of array size.

Replace the spread syntax with:

// Find Max
const max = values.reduce((m, v) => (v[0] > m ? v[0] : m), -Infinity);

// Find Min
const min = values.reduce((m, v) => (v[0] < m ? v[0] : m), Infinity);

Scope of Changes

The following files in /web/src/components/Incidents/ require refactoring:

• processAlerts.ts
  • convertToAlerts()
  • mergeIncidentsByKey()
• processIncidents.ts
  • getIncidents()
• utils.ts
  • sortByEarliestTimestamp()
• IncidentsTable.tsx
  • getMinStartDate()