How To Monitor Static Websites on Azure (With Rod Stewart)

July 17, 2019 ยท 4 minute read

Here’s How I Setup Monitoring on My Site

I recently changed this website from an App Service to a static site hosted in Azure Blob storage. So, the Application Insights (part of Azure Monitor) that I was previously using wasn’t going to work any more.

Rather than try to reconfigure my existing instance, I decided a green field would be more interesting. And maybe even more challenging.

It was actually way simpler than I thought it would be.

I don’t know why I’d been putting it off for so long.

With help from Rod Stewart (circa 1973) and following instructions found here, I wired my site up in less time than it takes to listen to “Every Picture Tells A Story”.

Watch the video above if you haven’t.

Steps:

(Everything below assumes you are hosting on Azure. If not, grab a free account and follow along)

Create Application Insights Instance

In the same Resource Group as your static site storage, create a new “Application Insights” resource.

Copy Your Instrumentation Key

Once the Application Insights resource is ready and you can view the Overview screen, grab the instrumentation key.

You’ll paste it in the script provided here.

Replace the xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx with your instrumentation key copied from the overview screen.

<script type="text/javascript">
   var sdkInstance="appInsightsSDK";window[sdkInstance]="appInsights";var aiName=window[sdkInstance],aisdk=window[aiName]||function(e){
      function n(e){t[e]=function(){var n=arguments;t.queue.push(function(){t[e].apply(t,n)})}}var t={config:e};t.initialize=!0;var i=document,a=window;setTimeout(function(){var n=i.createElement("script");n.src=e.url||"https://az416426.vo.msecnd.net/next/ai.2.min.js",i.getElementsByTagName("script")[0].parentNode.appendChild(n)});try{t.cookie=i.cookie}catch(e){}t.queue=[],t.version=2;for(var r=["Event","PageView","Exception","Trace","DependencyData","Metric","PageViewPerformance"];r.length;)n("track"+r.pop());n("startTrackPage"),n("stopTrackPage");var s="Track"+r[0];if(n("start"+s),n("stop"+s),n("setAuthenticatedUserContext"),n("clearAuthenticatedUserContext"),n("flush"),!(!0===e.disableExceptionTracking||e.extensionConfig&&e.extensionConfig.ApplicationInsightsAnalytics&&!0===e.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)){n("_"+(r="onerror"));var o=a[r];a[r]=function(e,n,i,a,s){var c=o&&o(e,n,i,a,s);return!0!==c&&t["_"+r]({message:e,url:n,lineNumber:i,columnNumber:a,error:s}),c},e.autoExceptionInstrumented=!0}return t
   }({
      instrumentationKey:"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"
   });

   window[aiName]=aisdk,aisdk.queue&&0===aisdk.queue.length&&aisdk.trackPageView({});
</script>

Add The Script To All HTML Files

Now that you have a script with your own instrumentation key, we’ll need to place that in each HTML file you wish to monitor.

NOTE: In my case, I use Hugo to build my site so it was as simple as adding the script to the section of my master HTML template. Then, each time I rebuild the site, it automatically adds the javascript snippet to any new HTML files that may have been newly built. That saves me from having to copy and paste it on each new blog post not to mention everything I’ve already written.

We in the SRE biz call that toil!

Toil is bad. ;)

Deploy Your Site

Once you’ve added your javascript snippet to all of the HTML you’d like to monitor, it’s time to upload your site to Azure.

In the video, I do this using Visual Studio Code by deploying from a dropdown command in seconds.

Alternatively, I could use Azure Storage Explorer and upload my files FTP style.

NOTE: In the video, I show you an even easier way to do it through the portal when you only have one or two files.

Exercise Your Site

Alright, now that you’ve uploaded all of the HTML with their new monitoring scripts we need to get them to start collecting data. This means going to your site and browsing around.

I suggest using a couple of different browsers and maybe even some of your friends or coworkers, just to get as much activity on your site as possible.

Verify Monitoring Is Collecting Data

Return to the overview screen in the Azure portal. It’s unlikely that you’ll see any data show up on the provided charts.

However, if we use Log Analytics, we can run a Kusto query that will verify if we are getting data.

Go to Log Analytics…

The following query will give us an average duration of Page Views for the last 15 minutes, as reported by the browser.

// average pageView duration by name
let timeGrain=1s;
let dataset=pageViews
// additional filters can be applied here
| where timestamp > ago(15m)
| where client_Type == "Browser" ;
// calculate average pageView duration for all pageViews
dataset
| summarize avg(duration) by bin(timestamp, timeGrain)
| extend pageView='Overall'
// render result in a chart
| render timechart

It then renders a chart for us to view.

If our javascript is working we should see something in the chart.

Bask In Your Technical Savviness

You’re all set. I’m planning to come back and check on mine each day for the next week or two just to make sure it’s working as expected.

If you host a static website on Azure, let me know if you are using any monitoring and what you find interesting about the data you are seeing.

Additional Resources:

-FREE Azure Account

-Static Website Hosting

-App Service

-Azure Monitor

-Application Insights

-Log Analytics

-Kusto Query Language

-Static Website Hosting

-Monitoring User Flow

-Azure Storage Explorer

-Static website hosting in Azure Storage

-SRE on MS Learn

-Visual Studio Code

-Rod Stewart on Discogs