Why is time-on-site data not getting saved in DB when accessed from Firefox browser?

We included the timeonsite library timeonsitetracker in our website as per the instructions in doc

<script type="text/javascript">
var Tos;
(function(d, s, id, file) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.onload = function() {
        // save with XMLHttpRequest or sendBeacon
    var config = {
        trackBy: 'seconds',
        developerMode: true,
        callback: function(data) {
            console.log('***');  
            console.log(data);

            // give your endpoint URL/ server-side URL that is going to handle your TOS data which is of POST method. Eg. PHP, nodejs or python URL which saves this data to your DB

            var endPointUrl = 'http://localhost:4500/tos'; // replace with your endpoint URL

            if (data && data.trackingType) {
                if (data.trackingType == 'tos') {
                    if (Tos.verifyData(data) != 'valid') {
                        console.log('Data abolished!');
                        return; 
                    }
                }
                
                if (navigator && typeof navigator.sendBeacon === 'function') {
                    data.trasferredWith = 'sendBeacon';
                    var blob = new Blob([JSON.stringify(data)], {type : 'application/json'});
                    navigator.sendBeacon(endPointUrl, blob);
                }
                
            }    
        }};


        if(TimeOnSiteTracker) {
            Tos = new TimeOnSiteTracker(config);
        }
    };
    js.src = file;fjs.parentNode.insertBefore(js, fjs);
 } (document, 'script', 'TimeOnSiteTracker', '//cdn.jsdelivr.net/gh/saleemkce/timeonsite@1.1.0/timeonsitetracker.min.js'));
</script>

After refreshing the browser, I see the data logged (enabled log persistence otherwise log is cleared on each refresh) in Firefox web console correctly.

***
{
    TOSId: 14650383319214848
    TOSSessionKey: "8808159448467693499978"
    TOSUserId: "anonymous"
    URL: "https://localhost/index.html"
    currentTime: "2021-03-30 16:25:17.908"
    entryTime: "2021-03-30 16:24:36.911"
    timeOnPage: 41
    timeOnPageByDuration: "0d 00h 00m 41s"
    timeOnPageTrackedBy: "second"
    timeOnSite: 41
    timeOnSiteByDuration: "0d 00h 00m 41s"
    title: "home page - rental crown"
    trackingType: "tos"
}

But this session data is not stored in MariaDB. There is no clue where the data goes. On refreshing second page, again I see the updated data object in Firefox web console but no data captured in MariaDB. It worked in Chrome but doesn't seem to store the data properly in DB. Any idea how to fix the issue in Firefox?

I followed the documentation here. And help is greatly appreciated.

Solution

I tested this again today. It seems that sendBeacon was not working for sometime on many browsers like Chrome, Firefox and others. There were some open issues in both Chrome & Firefox for this.

But today, I tested it again for with timeOnSite tracker JS on both Chrome & Firefox. It seems that it posts the data successfully to database on page refresh, tab close or browser close scenarios.

Updates as on: 13th Nov 2021

Browsers working successfully with version:

Chrome: 95.0.4638.69

Firefox: 94.0.1

But be informed that this may not work in old browsers or browsers that don't support sendBeacon fully. So in case of not getting real-time time on site data on such browsers, fallback to localstorage option with request object.

var config = {
    trackBy: 'seconds',
    
    request: { // presence of request object denotes that data is to be saved in local storage
        url: 'http://localhost:4500/tos'
    }
}