Browser memory usage increases continuously

Hi,
I have a small issue with using Grafana. We use it for monitoring a laser lab, so we’re continuously monitoring the laser intensity, the vacuum chamber pressure, high voltage systems, temperature of crystals etc… and dump it all into timescaledb (postgresql 17). We use Grafana (version 12.0.1) so that anyone can have it open and check remotely if the system is behaving properly.

We mostly have time series plots (line graphs). A few of them use a variable to iterate over the detectors (since we want separate plots). So we have 3 laser pumps so a variable LaserPumps with three values corresponding to the names of the pumps. And we have 4 other measurement points so we have a second variable Laser with 4 values. So total of 7 values.
The line plots mostly receive a reasonable amount of data rows, about 500 each. We have maybe 15 plots total We also have a couple of state history plots using the same data. We refresh the dashboard about every 5 seconds to have a somewhat up to date view. Takes maybe a second or so to run all the queries.

The issue is that over time the memory usage of the browser window increases. After a few hours on my laptop for instance, Firefox was using 35 GB of RAM. Chrome fares no better. It happens on computers running both windows or linux, using Firefox or Chrome.

I can provide a gist to my json but it might be easier if someone has some idea of where to look.

Sorry for the vague question. I can provide more info, just honestly not sure what is important to specify in this case.

I would say browser stats (e.g. Firefox has about:processes/about:memory) are good start for debugging - e.g. prove that Grafana is a problem and not any extension, …

What are the stats when running the dashboard queries outside of grafana vs inside

@jangaraj I checked, Grafana is the larger contributor. Today we weren’t using it intensively so I didn’t have the opportunity to record it actually becoming very large but it was over 500 MB and it was specifically the Grafana page. Also the computers are all different OS, browser and everything. Extensions are all different too. I attach an example of a screenshot.

@yosiasz Do you mean to just run the same query and check the timing? Then it’s about 200ms for Grafana and about 5ms from psql on the database server. But grafana runs on a separate computer (a raspberry pi). So some latency is to be expected I guess. If I check with the browser, every update we download at most 40kB of data. Updates every 5 seconds, so that’s maybe 300 MB in 10 hours if I’m not mistaken.

We also had some dashboards that seem to display all the same symptoms of causing the browser to eat up RAM for various browser and operating system setups (Chrome/Firefox, Windows/Linux), but in our case this was happening much faster (gigabytes within minutes) which helped narrow it down a bit.

In our case the issue seems to happen when a Timeseries panel is plotting boolean fields with a fast refresh rate (e.g. 1 second). I was able to replicate the issue with by using a Grafana Test Datasource and adding a transform to make its value’s type boolean. I then also duplicated that panel multiple times to make the issue more obvious.

I wanted to attach the JSON for that dashboard that replicates the issue, but since I’m a new user I can’t add attachments. We’re using Grafana v12.1.0

I also couldn’t paste the whole JSON in this message since it’s too much text (120kb), but here’s the JSON for only the panel (I recommend duplicating the panel about 30+ times):

Panel JSON

{ "datasource": { "type": "grafana-testdata-datasource", "uid": "ber7exy0mfy0wb" }, "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "barWidthFactor": 0.6, "drawStyle": "line", "fillOpacity": 0, "gradientMode": "none", "hideFrom": { "legend": false, "tooltip": false, "viz": false }, "insertNulls": false, "lineInterpolation": "linear", "lineWidth": 1, "pointSize": 5, "scaleDistribution": { "type": "linear" }, "showPoints": "auto", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": 0 }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 8, "w": 12, "x": 12, "y": 0 }, "id": 1, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": true }, "tooltip": { "hideZeros": false, "mode": "single", "sort": "none" } }, "pluginVersion": "12.1.0", "targets": [ { "datasource": { "type": "grafana-testdata-datasource", "uid": "ber7exy0mfy0wb" }, "hide": false, "max": 1, "min": 0, "refId": "A", "scenarioId": "random_walk", "seriesCount": 1 } ], "title": "Panel with boolean", "transformations": [ { "id": "convertFieldType", "options": { "conversions": [ { "destinationType": "boolean", "targetField": "A-series" } ], "fields": {} } } ], "type": "timeseries" },

Edit: logged as an issue at Dashboards: Browser out of memory when plotting boolean values in Timeseries panel · Issue #112194 · grafana/grafana · GitHub