Create a Simple App Status Indicator Using Oh Dear!

Show the server status of your app right on your landing page

profile
By Janis
March 23, 2023
Create a Simple App Status Indicator Using Oh Dear!

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.

HelpSpace Status Page powered by OhDear

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:

HelpSpace_status_indicator.png

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.