Skip to content

fix(performance): enforce batched GadgetDataBuffer to prevent massive array spreads - #103

Open
Utkarshpandey0001 wants to merge 1 commit into
inspektor-gadget:mainfrom
Utkarshpandey0001:fix-massive-data-spread
Open

fix(performance): enforce batched GadgetDataBuffer to prevent massive array spreads#103
Utkarshpandey0001 wants to merge 1 commit into
inspektor-gadget:mainfrom
Utkarshpandey0001:fix-massive-data-spread

Conversation

@Utkarshpandey0001

@Utkarshpandey0001 Utkarshpandey0001 commented Apr 17, 2026

Copy link
Copy Markdown
Contributor

The Inspektor Gadget plugin's data processing logic was previously suffering from severe CPU bottlenecks when monitoring high-frequency data streams (e.g., trace tcp). A legacy fallback logic path in src/gadgets/utility.tsx bypassed the newly introduced GadgetDataBuffer, falling back to updating the React component state individually for every single incoming WebSocket message.

Because massive arrays (up to 20,000 items) were being spread into state directly on the main thread continuously, it caused severe UI freezing and browser crashes ("Page Unresponsive" warnings) when inspecting high-frequency cluster events.

This PR removes the legacy unbatched fallback code from processGadgetData, strictly enforcing that all data processing flows through GadgetDataBuffer. This ensures that all incoming high-frequency events are heavily aggregated and then flushed to the React state optimally across a 300ms interval, completely eliminating the main thread CPU lockups.

Fixes #100

How to use

Reviewers can validate this PR by doing the following:

  1. Fire up the Headlamp UI with this plugin branch checked out and connect to a Kubernetes cluster.
  2. Select a target node and launch a high-frequency gadget such as trace tcp or trace open.
  3. Simulate continuous networking traffic or file operations inside the cluster to generate a firehose of events.
  4. Verify that the UI remains completely extremely smooth and interactive without any stuttering or "Page Unresponsive" browser warnings.

Testing done

All code formatting, linting, and TypeScript compilation CI workflows were successfully validated locally. Testing outputs are fully green.

npm run lint && npm run tsc && npm run test

@Utkarshpandey0001
Utkarshpandey0001 force-pushed the fix-massive-data-spread branch 2 times, most recently from b066f41 to cdec7a8 Compare April 17, 2026 13:40
@Utkarshpandey0001
Utkarshpandey0001 force-pushed the fix-massive-data-spread branch from cdec7a8 to fd80922 Compare April 17, 2026 13:46
@Utkarshpandey0001

Copy link
Copy Markdown
Contributor Author

@illume @ashu8912 Hi Could you please review this performance optimization? It directly addresses and resolves the UI freezing issue documented in #100. Let me know if you have any feedback or suggestions on the approach. Thank you.

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.

Bug: UI freezes due to unbatched state updates and massive array spreading in processGadgetData

1 participant