Photo by Zdeněk Macháček on Unsplash
Photo by Zdeněk Macháček on Unsplash

Integrating dynamic SaaS hosted uptime monitoring into your customer-served applications

Imagine you are rolling out your application to multiple customers, they even might use it on premise. Of course you want to know if your application is running fine and the customer is not experiencing any kind of trouble or downtime - surely you would not want to ship this validation in your own system, as that might also be prone to any kind of error at some point.

Which is why you decide to go for a third party uptime monitoring solution e.g. Uptime Monitoring.

uptime monitors integrated into applications

Indeed does iLert’s API allow you to dynamically create uptime monitors for your application’s installments as well as integrating their status or even monitor reports right into your UI.

This blog post will take you on a small journey of setting up and integrating monitors into your applications.

Staying vanilla

The following instructions and code are purposely kept as simple and lean as possible to ensure we stick to the actual questions:

  • How to create a monitor dynamically?
  • How to embed the created monitor reports into any UI?

Therefore we leave any kind of fancy UI setups aside and stick to plain HTML for the sake of this post.

About the code

We will quickly setup a server that acts as middleman between your customer’s app installments and iLert’s monitors. In the real world this would be your centralized application backend. And we will also setup a UI sample client in plain HTML that acts as your application which has been installed or is served to your customers.

To keep the project from becoming even more complex the creation of monitors also runs through the client. In a real-world szenario you might want to do this from the backoffice of your centralized application backend.

We are using iLert’s official Node.js client, of course you are free to use any other client or build your own HTTP calls for iLert’s Rest API.

Your monitor middle man aka “centralized application backend”

Lets get started by taking a look at our sample server.

Spinning up a simple http server

With the help of the npm packages express, cors and body-parser it is just a matter of a few lines of code to setup an HTTP server for our sample.

const express = require("express");
const bodyParser = require("body-parser");

const app = express();
app.use(bodyParser.json());

/* ... */

app.listen(3333, () => {
    console.log("Listening on http://localhost:3333");
});

Creating monitors

For our example we stick to only 2 dynamic variables the monitor’s name and check url. For the rest we fall back to the default HTTP check from a EU region running every 5 minutes. You will of course be able to adapt these parameters to your liking e.g. running a UDP check every minute with a short timeout of 50ms.

const { ILert } = require("ilert");
const ilert = new ILert({/* ... */});

await ilert.uptimeMonitor().create(
    req.body.name, // <- take from the sample customer ui
    ILert.REGIONS.EU,
    ILert.CHECK_TYPES.HTTP,
    ESCALATION_POLICY, // <- used to map between your customer and monitors in our sample
    {
        url: req.body.url,  // <- take from the sample customer ui
    },
    {
        intervalSec: 300,
        timeoutMs: 30000,
        createIncidentAfterFailedChecks: 1,
    }
);

Fetching and returning monitors

Since we wanted to keep this sample setup a bit leaner in terms of business logic the mapping between your “sample customers” and monitors is done very basic just using a fixed escalation policy. In a real world scenario you will most likely want to store the id of the created monitor in your backend and fetch the monitor(s) of a customer directly.

Fetching the monitor list, as shown below, is not enough, as we want to embed the shareable reports right into our sample UI. Which is why we additionally fetch the detailed monitor information including the generated embeddable report urls.

const { ILert } = require("ilert");
const ilert = new ILert({/* ... */});

const response = await ilert.uptimeMonitor().get();
const monitorsWithReports = await Promise.all(response.data
    .filter((monitor) => monitor.escalationPolicy.id === ESCALATION_POLICY) // <- used to map between your customer and monitors in our sample
    .map((monitor) => ilert.uptimeMonitor(monitor.id).get().then((res) => res.data)));

The sample ui aka “decentralized application front-end”

As stated before we kept the UI super simple, here we go: (Keep in mind that this could be any kind of UI e.g. a WPF or JSF application)

<body>
    <h1>Uptime monitor integration sample</h1>

    <div>
        <label for="new-name">Name:</label>
        <input type="text" id="new-name" /><br/>

        <div style="margin-top: 10px; margin-bottom: 10px;">
            <label for="new-url" style="padding-right: 17px;">Url:</label>
            <input type="text" id="new-url" style="width: 250px;"/>
        </div>

        <button id="new-monitor" type="button">
            Create new monitor
        </button>
    </div>

    <div id="monitors">
    </div>
</body>

Communicating with our sample server

For easy of use we are using axios to simplify the HTTP requests made to our sample server. However these could of course been vanilla JS ajax calls…

Creating a monitor

const createNewMonitor = (name, url) => {
    axios
        .post("/monitor-sample", { name, url})
        .then((response) => {
            if(response.status === 201) {
                getMonitors();
            }
        })
        .catch((error) => {
            console.error(error);
        })
};

It looks like this in action:

uptime monitors integrated into applications

Embedding monitor reports

const getMonitors = () => {
    axios
        .get("/monitor-sample")
        .then((response) => {
            if(response.status === 200) {
                _renderMonitors(response.data);
            }
        })
        .catch((error) => {
            console.error(error);
        });
};

Since our sample server fetches the monitors with detailed information we have access to the monitor’s embedUrl which we can use to embed the whole interactive report into our UI.

const iframe = document.createElement("iframe");
iframe.setAttribute("src", monitor.embedUrl);
base.appendChild(iframe);

You can see that all monitors render almost instantly and continue to load their content and graphs in the back, while the rest of our application renders or is already available to your customers.

uptime monitors integrated into applications

We are showing a very compact version of the reports graph in this sample, of course you can embed these to your liking e.g. full size:

uptime monitors integrated into applications

Alternative ways of embedding monitor status data

Embedding embedUrl as iframe reports directly is one way of doing it. You might also just use the other data fields that come with the monitor response like status or lastStatusChange as well as shareUrl to display your custom version.

There are also additional and more complex integration opertunities including delta and result logs of your monitors. Just reach out to us, if you are interested in using these for your integration.

Managing dynamically created monitors in iLert’s UI

Of course you will be able to manage and browse your created monitors in iLert’s UI.

uptime monitors integrated into applications

Grabbing the source code

You can always get the full source code that has been created for this post right here and take it for spin. All you need is an iLert account and 2 minutes of your time.

Have questions? Need help? Or customized APIs?

Just reach out to us, we are always glad to help you with any kind of integration questions. Take a look at the contact information e.g. email or chat in the footer of this page.

TL;DR

iLert’s API allows you to dynamically create uptime monitors for your application’s installments as well as integrating their status or even monitor reports right into your UI so that you can keep your customers informed.