Azure Application Insights Role Name in web page


We discussed using Role Name to separate telemetries from different applications in a previous article.

We discuss the Nuget package I developed to set the role name for each telemetry in a backend application.

In this article I wanted to cover another element that receives little coverage: how to do that for the HTML / JavaScript part of an application.

This is short and sweat but hopefully useful to better manage telemetry.

How to setup Application Insights for web apps

This part is well documented online.

Basically, it boils down to adding a piece of JavaScript to our web pages. That code should contain the Instrumentation Key of Azure Application Insight.

By default, this doesn’t provide a role name. So, all apps will log against the same (empty) role name.

How to setup role name

Similarly to what we did for back-end applications, the JavaScript SDK exposes telemetry initializers.

We can therefore easily set the role name for each telemetry with:

...
window.appInsights = appInsights;

appInsights.queue.push(function () {
    appInsights.context.addTelemetryInitializer(function (envelope) {
        envelope.tags["ai.cloud.role"] = "PasWorkbench-html";
    });
});

Doing this in each web page will ensure telemetries will be logged against that role name.

Summary

We just saw how to adapt the role name to the html / JavaScript code.

This is good for all telemetries originating from the front-end, i.e. either page views or API calls.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s