Sending Front-end Performance metrics from Atatus to StatusPage.io

StatusPage.io makes it simple to create a beautiful status page for your app, web service or developer API. In this article, we will see how we can send front-end performance metrics from Atatus to StatusPage.io for every 5 minutes.

Setting up StatusPage.io

If you don’t have an account with StatusPage.io, create an Account at https://www.statuspage.io.

To display a custom metrics in StatusPage.io, First Login and navigate to Public Metrics page and then click Add a Metric button. In the popup, select the “Data Source” as I’ll submit my own data for this metric and enter the display name as Page Load Time and suffix as ms (millisecond).

After submitting, you will see the code to send custom metrics. Here we are going to use PHP as the Language so choose that from the drop down which will generate some code to get us started.

Then we have to replace the generated code from line 16 to 31 with below code. The below code will get the page load time using Atatus REST API. Please remember to change the YOUR_ADMIN_API_KEY to your own!.

<?php

// Following code should replace the StatusPage.io PHP code from line 16 to 31.

// Atatus REST call here
// Admin API Key of the project.
$admin_api_key = 'YOUR_ADMIN_API_KEY';

// Setup the HTTP call to the REST API
$service_url = "https://api.atatus.com/api/browser/reports?timeDur=30m&admin_api_key=".$admin_api_key;
$curl = curl_init($service_url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

// Set the Authorization and other HTTP headers
$headers = array();
$headers[] = 'Content-type: application/json';
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);

// Make the HTTP call
$curl_response = curl_exec($curl);
if ($curl_response === false) {
    $info = curl_getinfo($curl);
    curl_close($curl);
    die('Unable to get the metrics from Atatus. Reason: ' . var_export($info));
}
curl_close($curl);

// Decode the JSON reponse
// print_r($curl_response);
$decoded_obj = json_decode($curl_response);

$value = $decoded_obj->pages->page->{'loadTime'};

// Send the load time metrics to StatusPage.io
$ts = time();
$postparams = array(
    "data[timestamp]" => $ts,
    "data[value]" => $value
);
curl_setopt($ch, CURLOPT_POSTFIELDS, $postparams);
curl_exec($ch);

printf("Average Page Load Time: $value");

Scheduling the script

The completed script can now be scheduled to run every 5 minutes and send the Atatus data to StatusPage.io using your favorite scheduler such as cron on Linux.

Cron Example:

*/5 * * * * php /home/ubuntu/atatus_status_page.php

In cron job, we assume that above script is stored under “/home/ubuntu/atatus_status_page.php”. You can place the file wherever you want.

Monitor Front-end Apps with free 14 day trial – no credit card required. Questions? - get in touch with us.