Get a notification when your JavaScript code is done executing

These days we can use JavaScript for almost anything, be it a simple function, a complex algorithm, or anything that comes to mind. Usually, what we want JavaScript to do happens very quickly, and we don't even have to wait for it to finish.

Long-running JavaScript tasks are a problem

However, sometimes you are writing a JavaScript code, process, or job that may take a long time to run. For example, you may decide to crawl a website or run a long-running parsing algorithm.

I'm sure almost every developer has, at some point, written a JavaScript code that takes a long time to run. They then had to continuously check the task, wait for it to finish running, and ensure the JavaScript code was working as expected. As you can see, this gets tedious very quickly and wastes time and effort.

Push notifications fix this problem

One common way to solve this is to track the status of our JavaScript code and send a push notification when the code is done running or when it fails. By doing so, we can leave and forget about the long-running JavaScript code and focus on the important things we need to do, and by the time something happens, we will instantly get a push notification to let us know.

To do so, we can use LogSnag to track the status of our JavaScript code. LogSnag is a simple, easy-to-use, robust event tracking and notification system that lets you track your JavaScript code and send push notifications when something happens.

Let's walk you through setting up and using LogSnag to track the status of our JavaScript code.

Setting up LogSnag

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

JavaScript code snippets

Now that we have our account and project setup, we can copy the following code snippet, update the values with your information, and paste it into your code.

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-project",
  "channel": "crawler",
  "event": "Crawling is complete",
  "description": "Successfully crawled 1,230 pages.",
  "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-project",
    "channel": "crawler",
    "event": "Crawling is complete",
    "description": "Successfully crawled 1,230 pages.",
    "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-project",
  "channel": "crawler",
  "event": "Crawling is complete",
  "description": "Successfully crawled 1,230 pages.",
  "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 provides several other features that can be used to simplify your job as a developer. For example, suppose you're working with a team. In that case, you can also add the rest of your team to your LogSnag project and allow them to see the status of your JavaScript code and receive push notifications when something important happens.

LogSang also keeps track of your previous events, so you can see what has happened in the past and search through previous events. We found this to be very powerful when we are working on larger projects and need to see what has happened in the past.

In addition, LogSnag allows you to create simple dashboards, charts, and graphs that give you more insight into your code and the events you track.

Other use-cases for LogSnag

View all common use-cases with JavaScript