Overview

The i-fixed-logging project is a high-performance Scalable Queue Journey Log Simulator. It is designed to simulate millions of log entries generated by a multi-stage user journey (e.g., entering a queue, WAF checks, BOT challenges) with high visual fidelity and performance.

---

Technical Architecture

1. High-Performance Simulation Engine

• Web Worker Implementation: The core simulation logic resides in simulation.worker.ts, offloading RNG, state transitions, and buffer management from the main UI thread.
• State Matrix: Uses Uint8Array, Int32Array, and Float64Array to track state for up to 100,000 concurrent users with minimal memory overhead.
• Zero-Copy Data Transfer: Batches of logs are sent to the main thread using Transferable Objects (ArrayBuffer), eliminating the cost of structured cloning.

2. State Management (LogStore)

• Columnar Storage: Instead of an array of objects, LogStore (log-store.ts) stores log attributes in separate TypedArrays (Columnar format). This significantly reduces memory usage and GC pressure, enabling the storage of up to 1.5 million logs.
• Ring Buffer Logic: The store implements a ring buffer to handle continuous ingestion once MAX_LOGS is reached.
• Reactive Updates: Synchronizes with React via useSyncExternalStore for flicker-free updates.

3. Log Details & Determinism

• Seeded RNG: Uses a custom SFC32 random number generator with a deterministic "stir" function (log-details.ts). This ensures that log details (trace IDs, IPs, message content) are consistent for a given journey ID and event.
• Sophisticated Severity Logic:
  • Bi-modal Latency: Simulates normal (~200ms) and slow (~2000ms) paths.
  • Dynamic Errors: Severity is determined by event type (e.g., security checks have a chance to block/CRITICAL) and latency (latency > 1500ms triggers WARN/ERROR).

4. Search and Filtering

• Incremental Asynchronous Search: The store implements a chunked search algorithm that runs in 20,000 entry increments, using setTimeout(resolve, 0) to allow the UI to remain responsive even during deep scans.
• Keyword Support: Supports space/comma-separated multi-keyword search across journey IDs, event names, severity, IPs, and full JSON metadata.

5. Frontend & UI

• Technology Stack: Next.js 16 (App Router), React 19, Framer Motion, and Sass.
• Virtualization: Powered by @tanstack/react-virtual, allowing smooth scrolling through the entire 1.5M log buffer.
• UX Features:
  • Intelligent auto-scroll (pauses if user scrolls up or expands a row).
  • Expandable rows with full JSON metadata inspection.
  • Simulation controls for user concurrency (1 to 100,000).

---

Domain Model

The simulator models a complex customer journey with 15 distinct events:

• CONNECT, TLS_HANDSHAKE, WAF_CHECK, GEO_CHECK, BOT_CHECK_START, JS_CHALLENGE, CAPTCHA_PRESENTED, CAPTCHA_SOLVED, INTEGRITY_PASSED, QUEUE_ENTER, QUEUE_POLL_1, QUEUE_POLL_2, QUEUE_NEXT, TOKEN_GRANT, ADMITTED.

Segments

• VIP Customer Alpha: 5-year tenure, priority routing.
• Standard Customer Beta: General traffic.
• Waiting Rooms: 10 distinct pools with segment-based distribution.

---

Key Performance Metrics

• Max Users: 100,000
• Log Buffer Capacity: 1,500,000 entries
• UI Responsiveness: 60fps even during high-velocity log ingestion.