opening Query Log freezes browser

[BulldozerPete]

Versions

Core version is v6.0.5 (Latest: v6.0.5)
Web version is v6.0.2 (Latest: v6.0.2)
FTL version is v6.0.4 (Latest: v6.0.4)

Platform

• OS and version: Debian 12

• Platform: Raspberry Pi 4

Expected behavior

I click on query log an no entries visible, browser freezes

Actual behavior / bug

A clear and concise description of what the bug is.

Steps to reproduce

Steps to reproduce the behavior:

1. Go to pi-hole webpage
2. Click on query list

Debug Token

• URL: https://tricorder.pi-hole.net/8gUgfrAT/

Screenshots

Additional context

[yubiuser]

Do you see any errors in your browser's dev console (open it with F12)when the freezing happens?

[mbleichner]

I had the same problem. The cause was that pi-hole remembers the "show all entries" setting (which I must have used at some point, but don't remember when or why).
This caused pi-hole to try to render a table with 26k rows, effectively killing my browser.

Maybe it would be better to not persist this setting? Or cap it at 1000 entries? Or use row virtualization?

[mwoolweaver]

The cause was that pi-hole remembers the "show all entries" setting (which I must have used at some point, but don't remember when or why).

I have noticed this as well.

In order to fix it I must go to a page that has a shorter list and the select a number instead of all.

Maybe it would be better to not persist this setting?

I definitely think this should not be remembered and used on every page.

[mbleichner]

Looks like the setting is persisted in the localStorage.query_log_table.length field, along with a bunch of other table settings such as filters and sorting.

As a quick solution, sessionStorage could be used instead of localStorage, so the settings are persisted only inside the current browser tab. When opening a new tab, the table settings would be reset to defaults.

[rdwebdesign]

The cause was that pi-hole remembers the "show all entries" setting (which I must have used at some point, but don't remember when or why).

As a quick solution, sessionStorage could be used instead of localStorage

This is not directly set or changed by Pi-hole.

The number of items is stored in localStorage by the datatables.js plugin. The localStorage is also used to store the column sort order and other datatables options.

We probably won't change the external plugin code to use a different store method.

I definitely think this should not be remembered and used on every page.

I understand your point of view, but other users think exactly the opposite and they will request to restore this functionality if we remove it.
We will probably need to find a different solution.

[mwoolweaver]

We will probably need to find a different solution.

Could the Query Log page be adjusted so that on first page load it doesn't use ALL?

I understand this could inconvenience some users but most probably aren't wanting 26k+ query's to load either.

[mbleichner]

We probably won't change the external plugin code to use a different store method.

The values are stored using the utils.stateSaveCallback() function - it would be possible to split up the data inside that function, write it to different storages (filters/sorting go to localStorage; row count goes to sessionStorage) and reassemble them in utils.stateLoadCallback(). But admittedly, it would be kind of ugly.

[rdwebdesign]

Could the Query Log page be adjusted so that on first page load it doesn't use ALL?

We probably can do it, but we really can't say how many users want to limit this and how many want to show ALL...

... and please, no ugly solutions 😄.

I understand this could inconvenience some users but most probably aren't wanting 26k+ query's to load either.

The same logic can be applied to the other side. Some users might say "I want the ALL option on the page. I understand this could inconvenience for some users, but most probably don't have this kind of issue."

I'm not saying no to any idea, but I think this kind of change needs to be well thought out and only made after discussion, without rushing.

This issue can be used as a place for the discussion.

[mbleichner]

Maybe check out Scroller as a row virtualization solution: https://datatables.net/extensions/scroller/

Row virtualization would probably be the optimal solution, because it would retain all the current functionality while fixing the browser performance issues.

(I don't know any of the pi-hole codebase though, so I can't give a guess on how easy or hard it would be to implement)

[PromoFaux]

Or cap it at 1000 entries?

To be honest, (personally speaking) this is what we should be doing in my opinion. I'm not even sure why the all option is there....

[yubiuser]

Fix released with https://github.com/pi-hole/web/releases/tag/v6.1