Adding browser version tracking

[S-Makrod]

Description

Adds tracking of browser versions to Counterscale. The implementation updates the dashboard so that when a browser name is specified in the search filters we replace BrowserCard with BrowserVersionCard to list browser versions.

Main Changes

• collect.ts: adding browser version tracking
• query.ts: added query to count browser versions
• dashboard.tsx: conditional render of browser version card
• resources.browserversion.tsx: new card for displaying browser versions

Example deployed at https://dc458fa5.counterscale-7bi.pages.dev/dashboard?site=counterscale-dev&interval=today&browserName=Chrome&browserVersion=131.0.0.0

Images

Originally we see the dashboard:

After clicking on Chrome, we replace BrowserCard with BrowserVersionCard:

Note

I had an issue with testing dashboard.test.tsx where calls to async waitFor(...) would timeout. I resolved this on my end by adding a timeout of 5 seconds. These changes are not pushed since I believe it is just an issue with my machine. I thought I should leave a note in case testing fails for that suite.

Example of timeout call:

await waitFor(() => screen.findByText("Path"), { timeout: 5000 });

Issue

This closes #120

[benvinegar]

@S-Makrod First, thanks for contributing this.

But we should connect before you tackle some of these, because I don't know that it's desirable to collect and display browser version.

For a number of reasons:

1. Similar products don't provide this (e.g. Plausible, Fathom – but to be fair, Google Analytics does)
2. Counterscale is privacy-focused and browser version can be used to additionally fingerprint users
3. Overall, we're probably moving in a direction of "less detail" – for example [Feature Request] Device/Screen Sizes would be better than devices #119 proposes just saying "mobile" rather than the specific device. While device version is useful for some (developers, mostly), for 90% of people just knowing "Chrome" or "Safari" is enough, especially now that auto-updating is commonplace.

That being said I like how you made this as a detail item when you click into Chrome. I'll have to think about it. But there is a strong likelihood this may not land.

Open to discussion though from users.

EDIT: It appears Plausible does record and report browser version. That makes me feel better/more amenable to this change.

[S-Makrod]

@benvinegar Thanks for the feedback. No worries; in hindsight, I should have verified with you to check if this is a route you want to go down. I just assumed that since the issue was open, it was okay for me to tackle. Let me know if anything changes. I may take a look at #119 in the coming days, as you mentioned that it is better since it requires less detail.

[benvinegar]

I think it's still worth exploring. Here's my asks if you want to take this further:

1. Can you write something to intelligently strip version numbers so that only the major version is visible, e.g. 35.1.2b becomes 35.x.x. This I think helps with the privacy concerns. You'll need to see how browsers declare their versions and write some tests.
2. UI improvement: instead of "Browser Version" can you write "$currentBrowser Version". E.g. "Chrome Version", "Firefox Version", etc.

Also, open to community input here.

[S-Makrod]

@benvinegar I've added your suggested changes. One thing to note is that I placed the browser version masking function in lib/utils.ts. Is that okay? It can be moved to collect.ts if preferred.

[benvinegar]

Is that okay?

Yeah, ofc. Things like that can always change easily.

The biggest challenge now is that I merged a pretty big refactor (#132) which moves paths and other stuff around. You'll have to rebase and it will be messy. I can also lend a hand.

[S-Makrod]

@benvinegar rebase is complete