FormidableLabs / FormidableLabs/envy

UI performance audit and fixes

Open
#191 0 comments 0 reactions 0 assignees View on GitHub
@envyjs/webui
Dominant language
TypeScript
Stars
144
Forks
5
PR merge metrics
No merged PRs in 30d

Description

So far, Envy has likely only be used is short bursts where the number of traces present in the list are small in number; rarely more than one or two hundred, for example.

As such the web viewer UI (and the skunkworks network viewer which preceeds it) has not be optimised for large quantities or traces, and would in all likelihood collapse under the weight of 5,000+ traces.

I raised an unrelated PR #190 which includes some tweaks to allow us to inject 1,300 traces. I had tried this with 13,000 traces and found the UI to be very unresponsive.

Therefore, we should:

- Provide a way to inject large numbers (10,000+) mock traces. See [this change](https://github.com/FormidableLabs/envy/pull/190/files#diff-3911705848f1fbc9a5f7fae490baace57a211e777d3117acb2705974e9968594R21-R28) for reference.
- Audit the UI performance and identify areas to improve.

One definite improvement would be to virtualise the trace list (so that only in-view traces are rendered in the DOM). Beyond that, we need to ensure that Envy can scale to this number of traces, even if just for the barmy cases where somebody in userland has it always running in the background whilst they work (or use) an application sending traces to it.

Another option to consider is that we cap the number of traces we list to a reasonable number.

Contributor guide

Open the contributing guide

Research direction

Start with PR #190 and the web viewer and skunkworks network viewer mentioned in the issue. Reproduce the reported responsiveness difference with roughly 1,300 and 13,000 traces, then audit rendering at 10,000+ traces. Done means the issue's chosen scaling approach is implemented and the viewer remains usable at that size.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
frontend, performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.