O11y Synthetic Monitoring for Website Metadata and Form Validation

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

Here are some common use cases for synthetic monitoring:

• 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.
• 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 blog, I would like to explore an uncommon use case for your observability 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 (i.e., 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 (i.e., 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

1. Enter the test URL

2. Create custom JavaScript

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

^{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  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 a JS expert.)

In the above code snippet, you can see an error being thrown in case of a mismatch between expected and actual metadata. 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.

^{Value out of bound error}

Here is my entire synthetic test to verify the metadata of a page:

^{Synthetic test : Metadata}

2. Form Validation 

Many websites have forms to gather customer interest and profile information for targeting email/content. Since forms contribute to your marketing leads, they are a critical part of your site's business flow. 

Synthetic monitoring comes in handy to identify such issues during your deployment process or on a live site after code deployment.

^{Long Form}

Forms often come with loads of client-side validation and complex flow logic. I've put together a quick synthetic script to monitor form submissions for desktop/mobile and shorter/longer versions of the form as part of a new feature launch. This ensures that we won't lose any customer leads from day one.

Here is my entire synthetic test to verify the form user flow.

^{Synthetic test : Form} 

Synthetic allows you to configure a private location for running the synthetic script on lower environments (QA/staging). This is a great way to validate your code changes before they make it to production.

Conclusion

In my opinion, synthetic monitoring fits well in the QA automation processes and strategies.

This is a great tool to monitor your site pages and API performance/uptime. 

Because of its ability to run JavaScript, it can be utilized for other not-so-common use cases such as checking the integrity of a page/website and maximizing your investment.