highlight / highlight/highlight
High memory usage when using app.highlight.io
- Dominant language
- TypeScript
- Stars
- 9.4k
- Forks
- 675
- Avg merge
- 51m
- Merged PRs (30d)
- 3
Description
Hello,
We've been using highlight for a while now at customeros.ai and we're pretty happy with it.
One major problem I've encountered recently almost in every session that I open is the app freezing and after a while even crashing and falling back on the error boundary component (I guess).
This usually happens when I'm opening a list (i.e the devtools at the bottom to inspect logs, network requests or traces) and I scroll the list up and down several times looking for a specific request or when I use the right drawer to inspect a network request and see a payload. I must say the app will not always crash, it will just freeze for some moments and then unfreeze.
I've correlated that with a high memory usage by checking the total js heap size in browser's dev-tools. When the heap size is big(like over 1.5 Gigs) the freeze will happen. When the heap size goes down the app starts working again.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to any session view (live or completed)
2. Click on devtools or press Cmd + / to open the devtools view
3. Go to network tab
4. Scroll down and up to load more network requests
5. Open a few requests to inspect the payloads (Requests with bigger payloads are good candidates)
6. If the app does not freeze, try to shuffle between a few sessions and apply all the above steps
7. When the app starts freezing, open your browser's dev-tools and go to the Memory tab to inspect the total JS heap size.
8. Repeat steps 4 and 5 to make the app freeze and see the total js heap size increase or decrease.
**Expected behavior**
The app should not freeze.
**Screenshots**
**Additional context**
We've actually had the same problem in our app. Our app would freeze in the exact same way when too many objects were made observable. We're using Mobx for state management and if you try to make too many objects observable at the same time and you don't clean them up, the memory usage skyrockets. Normal JS objects don't have this problem because their footprint is very small but an observable object which is wrapped in a Proxy takes about 10 times more space in memory.
Given that majority of browsers have a max limit of 4GB memory allowed, you can end up hitting that limit pretty fast if you're making let's say 100K observables. If the objects themselves have a lot of nested properties, that's even worse. I went the route of benchmarking this and found out the hard way. Hope it helps. Kudos for the app and cheers to the team.
Contributor guide
Assessment
This issue has not been assessed yet.