Published on August 20, 2022

Monitor when a new feature is used in your JavaScript application

Monitor when a new feature is used in your JavaScript application

As developers, we always look for ways to improve our JavaScript products. To do so, we are constantly looking for ways to provide more value to our users and improve their experience.

For example, I am sure you have heard of the term "feature flag" before. A feature flag is a way to enable or disable a feature in your application. This is a great way to test new features and ensure they work as expected before releasing them to your users.

However, adding a new feature is just the first step. Once we have released the feature, we must ensure that our users are using it. We must confirm whether the feature is useful and whether our users are using and benefiting from it.

LogSnag is an excellent tool for this problem as it trivializes integrating with your JavaScript application and tracking events. With LogSnag, we can easily track any critical event in our application and monitor user activity when a new feature is released, all in real-time.

For example, let's say we're building a JavaScript application that allows our users to upload files, and we want to add a new feature that allows users to share these files with other users directly. We can use LogSnag to track an event when a user shares a file with another user. We can then use this to monitor how often this feature is being used and even go further and track user journeys to see how they use it.


Setting up LogSnag

  1. Sign up for a free LogSnag account.
  2. Create your first project from the dashboard.
  3. Head to settings and copy your API token.

JavaScript code snippets

Simply use the following code snippets to monitor your new features using LogSnag. Make sure to replace the YOUR_API_TOKEN with your API token and update the project and channel names.

Using JavaScript with Fetch
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", "Bearer YOUR_API_TOKEN");

var raw = JSON.stringify({
"project": "my-saas",
"channel": "features",
"event": "User Shared File",
"description": "User shared a file with another user",
"icon": "📩",
"notify": true
});

var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};

fetch("https://api.logsnag.com/v1/log", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
Using JavaScript with jQuery
var settings = {
"url": "https://api.logsnag.com/v1/log",
"method": "POST",
"timeout": 0,
"headers": {
"Content-Type": "application/json",
"Authorization": "Bearer YOUR_API_TOKEN"
},
"data": JSON.stringify({
"project": "my-saas",
"channel": "features",
"event": "User Shared File",
"description": "User shared a file with another user",
"icon": "📩",
"notify": true
}),
};

$.ajax(settings).done(function (response) {
console.log(response);
});
Using JavaScript with XHR
// WARNING: For POST requests, body is set to null by browsers.
var data = JSON.stringify({
"project": "my-saas",
"channel": "features",
"event": "User Shared File",
"description": "User shared a file with another user",
"icon": "📩",
"notify": true
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
console.log(this.responseText);
}
});

xhr.open("POST", "https://api.logsnag.com/v1/log");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer YOUR_API_TOKEN");

xhr.send(data);

JavaScript integration details

LogSnag is a use-case agnostic event tracking tool that easily integrates with any JavaScript application. It provides powerful features such as real-time event tracking, cross-platform push notifications, event filtering, user and product journeys, charts and analytics, and much more.

Here at LogSnag, we believe that event tracking should be easy and accessible to everyone, and that's why we have made it trivial to integrate with your JavaScript application. It only takes a few minutes to set up LogSnag, and you can start tracking events in no time.

We provide a generous free plan to get you started with event tracking! You can also check out our pricing page to see our paid plans. So please give us a try and let us know what you think!

Other use-cases for LogSnag

  1. Monitor your CI/CD build status for your JavaScript application
  2. Monitor your CPU usage in your JavaScript application
  3. Monitor when database goes down in your JavaScript application
  4. Monitor high disk usage in your JavaScript application
  5. Monitor when a user changes their email address in your JavaScript application
  6. Monitor failed logins in your JavaScript application
  7. Monitor failed payments for your JavaScript application
  8. Monitor memory usage in your JavaScript application
  9. Monitor MySQL downtime in your JavaScript application
  10. Monitor your Postgres downtime in your JavaScript application
  11. Monitor Redis downtime in your JavaScript application
  12. Monitor suspicious activity in your JavaScript application
  13. Monitor when a user exceeds the usage limit for your JavaScript service
  14. Monitor when a user is being rate limited in your JavaScript application
  15. Get a notification when your JavaScript code is done executing
  16. Send push notifications to your phone or desktop using JavaScript
  17. Track canceled subscriptions in your JavaScript application
  18. Track your JavaScript cron jobs
  19. Track when a file is uploaded to your JavaScript application
  20. Track when a form is submitted to your JavaScript application
  21. Track payment events via JavaScript
  22. Track user sign in events in JavaScript
  23. Track user signup events via JavaScript
  24. Track waitlist signup events via JavaScript
View all common use-cases with JavaScript