Azure Application Insights Role Name in web page
Solution ·
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.