Skip to main content

Telemetry Correlation in Azure Application Insights

 Azure Application Insights is frequently being used by workloads running on Azure. The most simple and common example of this is a Web Application calling a RESTful API. In most enterprise-y scenario, one would find it to be a single page app commonly written in React/Angular talking to a .NET/Java Web API. However a surprising number of developers don't use or haven't heard of telemetry correlation in Application Insights.


Azure SDK provides a robust mechanism of enabling telemetry correlation for various languages and frameworks. For .NET Core, this is turned on by default and you don't have to do any thing except adding Microsoft.ApplicationInsights.AspNetCore nuget package and including the following line in your code:

builder.Services.AddApplicationInsightsTelemetry();

For other frameworks, it is not as simple. Here I am going to show an example for a React app. This app is bootstrapped using Create React App (CRA) tool. Next create a file AppInsights.js and add following lines of code:

The following settings are crucial to enable this:

enableCorsCorrelation: true,
enableRequestHeaderTracking: true,
enableResponseHeaderTracking: true,

In this sample, the React app calls the default template Weather API created using .NET Core 6 Minimal API.

Once everything is set up and running, you will see the following logs in Application Insights:


You can see request originating from UI and travelling through API in a neat timeline view. You can find the complete code here - mayankthebest/appinsightstracing: Sample Project to showcase Distributed Tracing in Azure Application Insights. (github.com)

Depending on the framework that you are using, you may need to do some digging around in Microsoft documentation but once done, this feature will save lots of trouble when your app is running in production.

Comments

Popular posts from this blog

Integrating React with SonarQube using Azure DevOps Pipelines

In the world of automation, code quality is of paramount importance. SonarQube and Azure DevOps are two tools which solve this problem in a continuous and automated way. They play well for a majority of languages and frameworks. However, to make the integration work for React applications still remains a challenge. In this post we will explore how we can integrate a React application to SonarQube using Azure DevOps pipelines to continuously build and assess code quality. Creating the React Application Let's start at the beginning. We will use npx to create a Typescript based React app. Why Typescript? I find it easier to work and more maintainable owing to its strongly-typed behavior. You can very well follow this guide for jsx based applications too. We will use the fantastic Create-React-App (CRA) tool to create a React application called ' sonar-azuredevops-app '. > npx create-react-app sonar-azuredevops-app --template typescript Once the project creation is done, we

Creating a Smart Playlist

A few days earlier I was thinking that wouldn't it be nice if I had something which will automatically generate a playlist for me with no artists repeated. Also, it would be nice if I could block those artists which I really hate (like Himesh Reshammiya!). Since I couldn't find anything already available, I decided to code it myself. Here is the outcome -  This application is created entirely in .NET Framework 4/WPF and uses Windows Media Player Library as its source of information. So you have to keep your Windows Media Player Library updated for this to work. It is tested only on Windows 7/Vista. You can download it from here . UPDATE : You can download the Windows XP version of the application here . Please provide your feedback!

Add Git Commit Hash and Build Number to a Static React Website using Azure DevOps

While working on a React based static website recently, there was a need to see exactly what was deployed in the Dev/Test environments to reduce confusion amongst teams. I wanted to show something like this: A quick look at the site's footer should show the Git Commit Hash and Build Number which was deployed and click through to actual commits and build results. Let's see how we achieved this using Azure DevOps. Git Commit Hash Azure DevOps exposes a variable called  $(Build.SourceVersion) which contains the hash of the commit. So I defined a variable in the Build Pipeline using it. Build Id and Build Number Azure DevOps also exposes two release time variables  $(Build.BuildId) and  $(Build.BuildNumber) which can be used to define custom variables in the pipeline. So we have a total of 3 variables defined: Next we use these variables in our React App. I created 3 global variables in index.html and assigned a token value to them. < script   type = "text/JavaScript&quo