I always wondered if it would be possible if I could build my own status of page but limited that status of page to simple JavaScript functions to check the status of websites, like this below:
I am fully aware that you can go to a monitoring services where you’ll get a bunch of free monitors and then, if you need more than your allocated amount, you have to pay some extortion monthly fee.
NOTE : The script outlined in this guide, will check the status of the services on the device you are checking the status of the website's on, unlike many of these other products, the code will run when you visit the website
Just a few more words on the note from above, many people see this as not being great because they would like an external monitor, but if you have sensitive company monitors, you’d like to keep an eye on, you can’t really make those public unless you go through all the security to keep them away from the prime guys of the public on the Internet - this type of monitor can be deployed internally on internal web servers, then, when you visit that site, it will automatically check the systems you’ve asked it to check.
The idea started when I found it convenient to run the curl command like this, this would essentially check for a HTTP 200 (which is the universal language code for connected) if this was returned, the site would return as “up”:
if curl -s --head --request GET https://a6n.co.uk | grep "200 OK" > /dev/null; then echo "a6n.co.uk is UP" else echo "a6n.co.uk is DOWN" fi
obviously, it goes without saying that anything other than a 200 would cause the site to be returned as “down” - this for the majority of websites will work, But if the arguments sake you’re going to the full web address and something in that address has changed from what your checking you will get a 404 - Which, based on this particular command, will return the site as being down, It’s not down it’s just the site you’ve tried to go to has given you a “page not found” which is HTTP 404 - from the servers point of view.
The first idea I had was to make the website use PHP, that looked a little bit like this:
<?php
$status = shell_exec('sitecheck.sh'); // Run your script and get the output
if (strpos($status, '200 OK') !== false) {
echo '<div class="status-dot green"></div>';
echo '<p>a6n.co.uk is UP</p>';
} else {
echo '<div class="status-dot red"></div>';
echo '<p>a6n.co.uk is DOWN</p>';
}
?>
I was immediately not happy with the idea that PHP was calling a bash script, this didn’t sit well with me from a security point of view, as allowing web servers to run scripts that sounds like a horrible case of code injection, and other various forms of bypass methodology and. I was not about to have a Web server get exploited by someone that found a vulnerability I didn’t think about.
I was, therefore thinking of other ways to do that after a little bit of googling, I came across the Javascript function called fetch() - The job of this function Is to fetch your response from the remote server, excellent that exactly is the plan with what I’m doing with it curl, that looks something like this:
// Perform a fetch to check the status of the website
fetch(website, { method: 'HEAD', mode: 'no-cors' })
.then(function () {
statusDot.classList.add('green');
statusText.textContent = website + ' is UP';
})
.catch(function () {
statusDot.classList.add('red');
statusText.textContent = website + ' is DOWN';
})
.finally(function () {
Then we obviously need to define our websites, here I will just use a single website, but you can have as many in this list as you wish:
document.addEventListener("DOMContentLoaded", function () {
var websites = [
'https://www.a6n.co.uk',
];
Then, if you wish to add the time, it takes to load the website into this script. You will need to use this.:
// Perform a fetch to check the status and loading time of the website
var start = performance.now();
fetch(website, { method: 'HEAD', mode: 'no-cors' })
.then(function (response) {
var end = performance.now();
var loadTime = end - start;
Then, As mentioned earlier, if you would like certain HTTP codes to return that the website is online and others return it off-line you can use this snippet of code:
// Check if the status code is acceptable (200 or 204)
if (response.status === 200 || response.status === 204) {
if (loadTime > 800) {
This will include HTTP 200 and 204 as “online” and then everything else as “down” - now this looks like it’s taking shape, All we now require is some basic HTML code for items like the title, the header categories and other graphical things:
</head>
<body>
<header class="bg-primary text-white text-center py-5">
<div class="container">
<h1>Website Monitoring : Quick Website check</h1>
</div>
</header>
<div class="container mt-4">
<h2 class="text-center mb-4">Website Status</h2>
<div id="summary-container" class="text-center mb-4"></div>
<div id="status-container" class="status-border py-4"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
Now for the graphical department, I have opted for a red flashing dot when the service is down, and when the service is operational, I have opted for green pulsating, glowing light, Which, luckily these days can all be done with CSS3 - If you are happy with this approach without further ado let’s get the CSS:
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
#status-container {
text-align: center;
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.status-border {
border: 2px solid #3498db; /* Border color */
border-radius: 10px; /* Border radius */
padding: 20px;
width: 100%; /* Full-width */
box-sizing: border-box; /* Include padding and border in the width */
}
.status-entry {
display: inline-block;
margin-right: 20px; /* Adjust as needed for spacing between monitors */
}
.status-dot {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
}
.green {
background-color: #2ecc71; /* Green */
animation: pulseGlow 2s infinite;
}
.red {
background-color: #e74c3c; /* Red */
animation: flash 1s infinite;
}
.slow {
background-color: #f39c12; /* Yellow/Orange for slow */
}
@keyframes pulseGlow {
0% {
transform: scale(1);
box-shadow: 0 0 10px rgba(46, 204, 113, 0.8);
}
50% {
transform: scale(1.2);
box-shadow: 0 0 20px rgba(46, 204, 113, 0.8);
}
100% {
transform: scale(1);
box-shadow: 0 0 10px rgba(46, 204, 113, 0.8);
}
}
@keyframes flash {
0%, 49%, 100% {
opacity: 1;
}
50%, 99% {
opacity: 0;
}
}
</style>
Finally we need to put all this together to form the website to actually looks visually professional you you have a couple of options with CSS - You can either put the CSS at the top of your HTML code, I will alternatively found in this you could link it to a separate file using a command like this:
<link rel="stylesheet" href="style.css">
Now, Let’s put all that together and see what it looks like, This is the results I’ve got from following this guide, this is the mobile view, yes it works on a mobile as well:
I have included a monitor that should be off-line for illustrative purposes, However, if you scroll further down on the website, you will see even more monitors that are all green, pulsing and blinking to say they’re online
I quite like this solution, because it runs from a web server that does not need to have executable permissions to run, scripts and other commands, and the checks run from the client you are using, this means if you put internal resource names In the check and you run them from outside of the company, These checks will be offline unless you have your VPN activated - or the other methods you used to access company resources went outside the company.
The absolute fantastic bonus here is you don’t have to pay for additional monitors, It’s all in a couple of lines of code then, if you want to split your status, based on lots of services, you could simply have a welcome page before the status page asks You to Select the service you wish to run checks on and then you can see the checks for that specific service only.