Shivamyadav's avatar

Tracking transferred bytes on the client side?

I'm tracking actual data transferred to users (videos, images, JS, CSS, fonts, etc.) and need to store usage statistics per learner/client.

What's the recommended approach to avoid losing usage data when users:

  • Refresh or close the tab
  • Navigate away
  • Lose internet connectivity
  • Experience browser crashes

Would periodic syncing + navigator.sendBeacon() + local storage retries be sufficient, or is there a better pattern?

0 likes
3 replies
JussiMannisto's avatar

It's not straightforward.

  1. There's no native browser API for monitoring traffic or gettings statistics.
  2. To trigger any kind of monitoring through JS, all of the JS code itself would have to be downloaded and executed. And at that point, the HTML is already loaded, as are many other assets.

For the initial page load, I don't think there's anything you can do on the client.

After that, you might be able to monitor same-origin requests by rolling out your own service worker. Intercept fetch requests, perform the fetch yourself and calculate the response bytes before passing it to the event caller.

What is the use case for this? Is it purely for analytics? You can't use it reliably to enforce any kind of quota. For one, ad blockers may block navigator signals altogether.

The syncing part should be easy if you get everything else working. Send the data with an appropriate retry strategy and use an idempotency key to avoid processing the same report multiple times on the backend.

martinbean's avatar

@shivamyadav This sounds like something you’d be able to do with server logs. But, as with most of your questions, my question is: why? Are you really going to be billing users for say, downloading style sheets? 😕

Shivamyadav's avatar

I have tried using the browser performance api and it's working fine now.

It's a client's requirements for the all types of the data transferred to be charged from the users based on the particular organization according to the aws.

So I have created a cron job to get the usd price list accordingly to the AWS price tier based on the GB, TB and store all the browsers client side data transfer to the seperate log table but my concern was how long and when should I store the data transferred form the browser to the db like hitting the api endpoint.

Please or to participate in this conversation.