Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: React Geiger – performance profiling using sound (github.com/kristiandupont)
164 points by kristiandupont 10 months ago | hide | past | favorite | 36 comments



Cool idea.

This makes me wonder if there's something similar for log files. I sometimes find myself doing adhoc analysis of live logs using visual cues, but auditory ones are really powerful - just never think of using sound for diagnosis/debugging purposes.


A plugin for graphana or datadog/similar would be amazing. a ping at one frequency for a request hitting the load balancer, a ping at a different frequencies for a request hitting a given endpoint, a bloop for a request hitting Kafka/the queue, a tone that lasts for as long as the job takes to process the job. a bong for a request hitting the db lasting as long as the query takes. the combined cacofony of sound would grow to feel comfortable when the site is properly operational. and then, with it just sitting open in the background, if something is off, someone could immediately tell without sitting there watching graphs when their brain subconsciously says something happened to the usual pitter patter of the machine operating.



we had one hackathon project a couple years ago at Grafana that used audio for tracing trendlines for a11y :)


Yes, for network related activity. Peep.

https://github.com/the-real-neil/peep

Previously discussed on HN

https://news.ycombinator.com/item?id=33017337


Relevant to the auditory monitoring is my project called sysm: https://github.com/jafarlihi/sysm

It gives you a framework for configuring such audio pieces.


> Geiger: AudioContext did not start. To enable Geiger, you need to give permission to play audio on this page.

anyone know how to do this in chrome?


There's a small "settings" button to the left of the URL. Click it, and if it shows Sound already, enable it. Otherwise, click "Site settings" and enable it from that list.


Is there a way to do this in Firefox?


I am having trouble making it work on Firefox. I guess I could add an option to show a little button. Playing audio is allowed, it's the autoplay aspect that isn't.


Most browsers will accept a mouse click or screen tap as user action which allows audio playback. I've used overlays to solve this problem, for example on https://cafegoblin.com (shameless plug for my friend's zine)


I couldn't get it working in Edge, Firefox, or Safari. Eventually got it working in Chrome following the instructions already provided


There is a Geiger malloc implementation too, discussed here previously: https://news.ycombinator.com/item?id=24303832


There's also https://github.com/tomhicks/react-audible-debug which has been around for some time, I think it has a clearer sound for identifying excessive re-renders, but it's definitely a little more annoying :)

https://stackblitz.com/edit/react-9vb6xn?file=src%2FApp.js


This is a pretty funny idea. Love seeing this kind of creativity.



So what?


No "so what". I read the comment as purely informational.


indeed


works like a dream, also surprisingly bearable to just leave it running during development not just when debugging.

Great work!


Thank you! The only concern is that it adds overhead as well, but it doesn't seem to be too bad.


A more pleasant sound (not replicating a literal Geiger counter) would be more useful imo.


Maybe the unpleasant sound is a feature, not a bug.


I wonder if you can make a song out of it by using juuuuuust the right performance profile, tailoring your async loops and such just right.


Like Kraftwerk? https://www.youtube.com/watch?v=pyuxz9R2XiY

(It's actually the build-up to Radioactivity, but it's often listed as a separate track for some reason.)


Going to install this and see how much faster we get


Hacked up this python script that lets you hear any log file or anything else that outputs lines to stdout.

https://gist.github.com/perryizgr8/c795b74ac7cb59fd34b269b7d...


Back in the day when computers were slow (like, megahertz slow) you could do this with code execution to help with debugging. If you played with a piece of code long enough you'd get very familiar with the patterns (they were tones, not just ticks) and it was easy to tell when something was off / different.


And later, when computers weren't so slow but still required multiple fans and HDDs (using real metal discs!) you got an auditory indication of resource utilisation. I do wonder what we'll say in the future when we look back at computers from this time - perhaps it won't be so much an auditory clue, but the subtle feel of one's phone getting warm in your hand when it is running all cores at full clock?


With my speaker setup I always had slight gpu coil whine from gpu usage.

This has helped me a few times to figure out if the gpu is doing any work at all when trying to figure out why something in ie pytorch is slow.


I had a similar idea for Linux inspired by my longing for the sound of mechanical hard drives:

https://github.com/Zetaphor/SysTone


I had something like this going for L2 cache misses a while ago


That's pretty cool! Do you still happen to have it somewhere? How did you do the detection?


Hilarious/great. How did you think of this?


Thank you! It was just thinking of ways to get notified of unnecessary re-renders in a way that would be tolerable to have enabled most of the time. Polluting the console or showing visual cues didn't really fit that, so this came up.


Nice :) I built the same thing a few years back for RxJS debugging. Turned out to be really useful!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: