buggregator / frontend

Buggregator UI
https://buggregator.dev/
14 stars 8 forks source link

Optimize WebSocket Data Transfer for Enhanced Efficiency and Reduced Browser Memory Usage #128

Open butschster opened 4 months ago

butschster commented 4 months ago

Currently, our system sends complete event bodies through websockets to clients. These event bodies can be over 1MB in size, leading to inefficient data transmission and high memory consumption in browsers. This issue is particularly notable in components like Sentry, profiler, inspectors, HTTP dumps, and SMTP monitoring.

Proposed Changes:

  1. WebSocket Optimization:
  1. On-Demand HTTP Requests:

    • Implement API endpoints to fetch complete event details when requested by the client. This should be done only when the user opens an event page.
    • Design the API to ensure it supports efficient querying and data retrieval to handle potentially large data sizes effectively.
  2. Frontend Adjustments:

    • Update the frontend application to handle the new websocket data format and integrate seamlessly with the new HTTP endpoints for fetching detailed event data.
    • Ensure that the UI dynamically updates and displays the detailed event data when fetched without full page reloads.

Expected Benefits:

Kreezag commented 2 weeks ago

@butschster could you please describe do we still need the extra work here? I hope we completed all work around reducing event sizes.