Best (performant) way to handle event tracking in web apps

Question

Current Scenario

In one of our SPA web app, we are tracking various user actions like cta clicks, page navigations etc using our custom tracker request which passes some information to the backend using POST request.

Problem Now because these tracking request our instant (though in async manner but running on same thread), these requests will be fighting against any other events happening on the same page thread.

Desired effect Ideally, if these tracking data could be collected & a single request be sent at a fix interval of time (maybe every minute), that would hugely improve, both the client side performance & will also reduce the load on server where tracking request is sent.

Solutions

• Using Localstorage - One immediate solution that came to my mind was to use the LocalStorage to keep the tracking data which will be preserved even if user leaves the page immediately before the call is fired. But the problem is that, due to x seconds timeout, if the user closes the tab & never comes back, the data will be in the localStorage but it will never be sent.

Are there any proper solutions out there that could help in achieving this desired effect? Maybe backgroundSync API?

Answer 1

I'm sort of wondering if you really need to solve this problem, but here's an example of offline analytics that might help.

There's not much information on Background Sync (available since Chrome M49) but this introduction is a starting point.