Implement log aggregation in React
React Log Stream Aggregation
You are tasked with building a React feature that displays real-time statistics derived from a continuous log stream.
Log Event Format
Each incoming log event is an object with the following structure:
category: A string representing the event's category (e.g.,"auth","payments").timestamp: An ISO-8601 formatted string or epoch milliseconds, indicating when the event occurred.
Example event:
{ "category": "auth", "timestamp": "2025-12-15T10:15:30Z" }
Requirements
Implement a React component (or a small set of components) that fulfills the following:
- Event Consumption: Consume a stream of log events. Assume events are received one-by-one, either through a callback function like
onEvent(event)or via a mocked interval. - In-Memory Aggregation: Maintain an in-memory aggregation of statistics, keyed by
category. - Display Statistics: For each unique category, display two key statistics:
- Frequency: The total number of events observed for that specific category.
- Last Update Time: The most recent
timestampencountered for that category.
- Live Rendering: Render the aggregated statistics as a table or list that updates in real-time as new events arrive.
Constraints and Notes
- You must use a
Mapto store the per-category statistics, or provide a clear justification for using an alternative data structure. - The system must gracefully handle new categories appearing in the event stream at any point.
- You should clarify your approach to handling timestamps (e.g., parsing, comparison logic) and specify what should be displayed if no events have been received for a particular category.
AI interview prep
Core dilemma
Efficiently managing and updating React component state in response to a continuous, potentially high-frequency external data stream, while maintaining UI responsiveness and data integrity.
3 tradeoffs and 3 stress tests locked
Interview prep
Unlock the interviewer X-Ray rubric, tradeoff matrix, stress tests, clarifying questions, and key concepts.
Implement log aggregation in React
React Log Stream Aggregation
You are tasked with building a React feature that displays real-time statistics derived from a continuous log stream.
Log Event Format
Each incoming log event is an object with the following structure:
category: A string representing the event's category (e.g.,"auth","payments").timestamp: An ISO-8601 formatted string or epoch milliseconds, indicating when the event occurred.
Example event:
{ "category": "auth", "timestamp": "2025-12-15T10:15:30Z" }
Requirements
Implement a React component (or a small set of components) that fulfills the following:
- Event Consumption: Consume a stream of log events. Assume events are received one-by-one, either through a callback function like
onEvent(event)or via a mocked interval. - In-Memory Aggregation: Maintain an in-memory aggregation of statistics, keyed by
category. - Display Statistics: For each unique category, display two key statistics:
- Frequency: The total number of events observed for that specific category.
- Last Update Time: The most recent
timestampencountered for that category.
- Live Rendering: Render the aggregated statistics as a table or list that updates in real-time as new events arrive.
Constraints and Notes
- You must use a
Mapto store the per-category statistics, or provide a clear justification for using an alternative data structure. - The system must gracefully handle new categories appearing in the event stream at any point.
- You should clarify your approach to handling timestamps (e.g., parsing, comparison logic) and specify what should be displayed if no events have been received for a particular category.