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 ...

Use AI to build your house!

When a new housing society emerges, residents inevitably create chat groups to connect and share information using various chat apps like WhatsApp and Telegram. In India, Telegram seems to be the favorite as it provides generous group limits, admin tools, among other features. These virtual communities become treasure troves of invaluable insights. But whatever app you use, there is always a problem of finding the right information at right time. Sure, the apps have a "Search" button, but they are pretty much limited to keyword search and are useless when you have to search through thousands of messages. I found myself in this situation when it was my turn to start on an interior design project for my home. Despite being part of a vibrant Telegram group, where countless residents had shared their experiences with various interior designers and companies, I struggled to unearth the pearls of wisdom buried within the chat's depths. I remembered that I could take advantage o...

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/JavaScri...