Logging client actions near page Unload

I had an interesting problem; we wanted to log stuff that was happening on a client’s browser. Fair enough, we can use AJAX to do that. However, this had a twist – we wanted to log events that were happening immediately before the page might be redirected to a new location. In other words, the page might unload, and a new page load. What I found was the messages from just before the page unloaded might not be sent to the server; as the page was unloading, the AJAX requests were not being performed. I wondered what I could do about this.

I did consider some kind of logic for “waiting until all AJAX calls have finished”, but that started to look quite complicated for what I was trying to do. Instead, I started to look into other options – and I found one.

Navigator.SendBeacon guarantees that the data is sent, even if the page is unloaded, and that it won’t affect the loading of the next page. Perfect. Available in most browsers.

if (navigator.sendBeacon) {
var postData = {
code: "...",
level: level,
message: message
};
var data = JSON.stringify(postData);

// Uses Navigator.SendBeacon as this is guaranteed to be send before
// page unload is complete and it doesn't handle a response.
// Can't send JSON as it's a security hazard and blocked by
// browsers, but we can stringify it and deserialize on the server end.
var blob = new Blob([data], { type: 'text/plain; charset=UTF-8' });
navigator.sendBeacon("/api/sage/stringlog", blob);
}

One quirk is that you can’t send JSON – apparently you used to be able to, but that was removed as it was a security hazard. But you can send your JSON as a plain text payload, and then just deserialize it at the other end:

public ActionResult StringLog(string value)
{
using (var reader = new StreamReader(this.Request.InputStream))
{
var data = reader.ReadToEnd();
var logMessage = JsonConvert.DeserializeObject<StringLogMessage>(data);
// do stuff.
}
}

So, it was a new problem for me, but there’s a good feature to support what I was trying to do – and it works just perfectly.

Logging client actions near page Unload

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.