Published on August 10, 2022

Monitor when a user exceeds the usage limit for your JavaScript service

Monitor when a user exceeds the usage limit for your JavaScript service

These days, a lot of services are moving to a pay-as-you-go model. This model is either based on a monthly usage limit or metered usage. This is especially common for cloud, software, and other online services. So, chances are that if you're building a service with JavaScript, you'll have to roll your usage model and limits.

No matter your implementation, you will be required to set up an internal system to track usage and notify yourself and your team when a user has reached their limit. This is a common enough problem as it helps you understand how your users use your service, and you can improve your product based on that.

LogSnag is a service that helps you monitor your important events in real-time. It's an excellent tool for this problem and works seamlessly with JavaScript. In addition, LogSnag makes it trivial to send events to your dashboard and receive push notifications when something important happens.

For example, let's say you're building a service with JavaScript that allows users to upload files. However, you want to limit the number of files a user can upload to 10. You can use LogSnag to send an event to your dashboard when a user uploads a file. You can then set up a rule to notify you when a user has uploaded ten files. This way, you will know when a user has reached their limit, allowing you to take further action if needed.


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

Copy the following code snippet to your JavaScript project. Please note that you will need to replace the API token with your own.

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": "limits",
"event": "Usage Limit Exceeded",
"description": "The user has exceeded the usage limit for the service.",
"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": "limits",
"event": "Usage Limit Exceeded",
"description": "The user has exceeded the usage limit for the service.",
"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": "limits",
"event": "Usage Limit Exceeded",
"description": "The user has exceeded the usage limit for the service.",
"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 flexible and easy-to-use event tracking service that works excellently with JavaScript. In addition to real-time event tracking and cross-platform push notifications, LogSnag provides powerful user journey tracking, simple event filtering, search, and analytic tools such as charts.

In addition to tracking usage events, you can also use LogSnag to track other important events such as errors, user sign-ups, user logins, payments, or anything else you can think of.

Setting up LogSnag with your JavaScript application takes a few minutes, and you can start tracking events in no time.

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 when a new feature is used in your JavaScript application
  11. Monitor your Postgres downtime in your JavaScript application
  12. Monitor Redis downtime in your JavaScript application
  13. Monitor suspicious activity in your JavaScript application
  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