Observability | Use Synthetic Monitoring for Website Metadata Verification

[yogesh-kulkarni]

If you are on Splunk Observability Cloud, you may already have Synthetic Monitoringin your observability toolkit.

Here are some common use cases for synthetic monitoring:

1. Website and Web Application Performance Monitoring: Synthetic monitoring can simulate user interactions with websites and web applications to monitor their performance from various locations and devices. This helps identify performance issues such as slow page load times, downtime, or errors.
2. API Monitoring: Synthetic monitoring can be used to monitor the performance and availability of APIs by simulating API calls and measuring response times. This is crucial for ensuring that APIs meet service level agreements (SLAs) and perform as expected.

In today's article, I would like to explore an uncommon use case for your O11y synthetic monitoring instance.

This is not uncommon to witness P0/P1 issues on your customer-facing website due to code deployment. In today's world of modern web applications, there may not be a direct correlation between the P0 issue and the code just deployed to production. Hence, it's easy for them to be missed by QA/dev teams during sanity/smoke testing.

And this is where I would like to show you how to harness the power of Synthetic monitoring. Since you already have Synthetic monitoring in place, you can expand its use to other areas of quality checks, such as functional testing!

I am in favor of getting the full value for your money.

Let's explore the use case.

1) Metadata validation

Any WebSite metadata (ie. og tags, canonical url) is as important as content on the page, and especially for the marketing site.

Metadata logic is managed in our core code/component/template. If that breaks, it's going to affect the entire site, and teams (SEO, Analytics) will immediately start noticing the downstream effects.

Let us see how Synthetic can help in catching and alerting the teams as soon as an issue occurs on your production.

Step 1: Create a simple script using Synthetic transaction

• Enter Url to test
• Create custom JavaScript

Execute JavaScript can be very powerful in scenarios where you want to verify attributes/values in the generated page source.

view-source:https://www.splunk.com/en_us/careers/search-jobs.html

Sample html page source

Using Javascript you can verify any/all of the metadata in Synthetic. Throw error if expected values do not match actual. ie.

// Get the content of the <meta> tag with property="og:type"
const ogTypeContent = document.querySelector('meta[property="og:type"]').content;

// Compare the content with the expected value
if (ogTypeContent === "website") {
    console.log("Condition met: og:type content is 'website'");
} else {
    console.error("Condition not met: og:type content is not 'website'");
    throw new Error("Condition not met: og:type content is not 'website'");
}

On every page splunkMeta gets populated. It's trivial to have the correct values set on the page. Using Synthetic Javascript we can confirm the same.

// Find the position of the start and end of the splunkMeta object
    var startIndex = scriptContent.indexOf('var splunkMeta');
    var endIndex = scriptContent.indexOf(';', startIndex);

// Extract the splunkMeta object substring
    var splunkMetaStr = scriptContent.substring(startIndex, endIndex + 1);

// Evaluate the splunkMeta object as JavaScript code
    eval(splunkMetaStr);

    var blogCategory = splunkMeta.page.blogCategory;
  
 // Compare the content with the expected value
    if (blogCategory === "Learn") {
            console.log("Condition blogCategory content is 'website'");
        } else {
            console.error("Condition not blogCategory content is not 'website'");
            throw new Error("Condition not blogCategory content is not 'website'");
        }

Note : I am not JS expert.

In the above code snippet, you can see an error being thrown in case of a miss match between expected and actual meta data. These errors can easily catch and trigger the alerts by setting up detectors.

Detectors

In case of any issues, email/slack message is set to prompt.