Having a status page is kind of mandatory these days and luckily, there are a bunch of good services out there which can monitor your Application health and notify you if something is down.
We at HelpSpace use Oh Dear! for our website and API monitoring. It comes with tons of features (especially for Laravel Applications) and it also provides you with a nice status page that you can use right out of the box.
A kind of hidden feature is the JSON endpoint the status page exposes using https://status.yoursite.com/json.
It returns an object with all details about your domain's and an attribute called summarizedStatus which can be used to display a small indicator on your website to show your customers if there are issues or if everything is running smoothly.
Here is a code snippet that uses tailwindcss and alpine.js which you can copy and paste into your site right away. Just change the domain and it should work out of the box:
<div x-cloak
x-show="!isLoading"
x-data="{
status: {},
isLoading: true,
async retrieveStatus() {
this.status = await (await fetch('https://status.yoursite.com/json')).json();
this.isLoading = false;
}
}"
x-init="retrieveStatus"
>
<span class="inline-block h-2 w-2 rounded-full mr-1"
x-bind:class="status.summarizedStatus == 'up' ? 'bg-green-500' : 'bg-red-500'"></span>
<a href="https://status.yoursite.com"
x-text="status.summarizedStatus == 'up' ? 'All systems operational!' : 'Oh dear!'"></a>
</div> And this is what it will look like:
Pretty cool, right? Of course, you can go totally crazy and build your own status page or get an even more detailed message when some domain or service is down.
