Monitoring, Logging and Instrumentation for React Apps with Azure Application Insights

5 min readJul 4, 2021

Context

Every application needs to be monitored, and this need for customer facing applications is more critical, to understand its needs and improve it based on their usage patterns and feedback.

To achieve that though, we need to collect data, technical and behavioural logs, to analyse and understand patterns. It’s then that we can make meaningful and strategic changes to scale, improve and grow the software base.

There are two approaches to log collection;

Manual: One involves active actions in which you call specific services manually at specific locations and collect some data.
Automated: You enable it for components in your app to collect pre-determined set of logs and stats and it happens automatically.

We will cover both scenarios in this post.

By the way, this topic belongs to the series to set up a Single Page Application using React, Redux and Asp.NET 5.0.

End Result

Here is what you should expect by following this post. The stats and logs from your React application posted to Azure Application Insights.

Libraries

I’ll be using the below libraries to connect my app to Azure Application Insights:

Monitoring for Backend APIs

In case you needed to implement monitoring for backend Asp.NET APIs, refer to Step by Step Guide to Set Up Monitoring for ASP.Net 5.0 Web APIs with NLog, Azure, and Application Insights.

1. Manual: Log Service

1.1 Logging in Dev Environment

Starting with the simple manual logging, I need to have a LogService, some abstraction over the logging function which I can call whenever I had a need to log things manually. The interface could be as simple as below:

Looking inside, it is saying, on my development machine, write my logs to console. For any other higher environment, we need to build it in a way that would push the logs to Azure Application Insights.

1.2 Log in Production

If you look at the above code, for production, all I am doing is to create an instance of Application Insights to talk to Azure (getAppInsights), and call the relevant functions.

getAppInsights: In order to get an instance of Application Insights, I use the below Telemetry Service to instantiate Application Insights for my application.

Looking at the above code, it simply creates an object of Application Insights, pass two parameters of browser history, and instrumentation key and instantiate an object. I will cover shortly how I am passing these two values to this construct.

However for now, let’s assume that from the code point of view, I have all the building blocks to have a logService for manual logging.

Note
Configuration, plumbing and troubleshooting your software foundation take a considerable amount of time in your product development. Consider using Pellerex which is a complete foundation for your enterprise software products, providing source-included Identity and Payment functions across UI (React), API (.NET), Pipeline (Azure DevOps) and Infrastructure (Kubernetes).

2. Automated: Application Telemetry Data

Next we need to enable our application to pass telemetry data such as page load information and stats to Azure Application Insights. However I am not going to enable that for my components one by one. I do that for all my components in a central place.

For that purpose, I create a TelemetryProvider react component, and then I wrap that as a parent component at the root of my application. That would in turn enable the Telemetry function for all its children.

Here is how the final component will look like in action:

Remember I mentioned about providing the instrumentation key and history objects, here they are. As you can see in the above code, I am providing Application Insights instrumentation key from .env file, and injecting the browser history through the Router.

And last but not least, the actual TelemetryProvider component:

And here it is the end result, having the stats and telemetry data about your React application published to Application Insights.

Troubleshooting

There are two possible problems you might face when enabling client side monitoring for your applications.

1. Failed Requests with 400 Status Code

The below error might happen when you have the wrong Instrumentation Key (from Azure Application Insights) inserted into your app. Entering the correct key would fix the problem.

2. Failed Requests with Network Errors

Here are the two common network errors you might face: ConnectionRefused, and Name Not Resolved. The solution to these two problems could be with your Firewall, or VPN. I used to get the ConnectionRefused problem, and once I disabled my VPN all the logs started publishing to Azure Application Insights.

Pellerex Foundation: For Your Next Enterprise Software

How are you building your current software today? Build everything from scratch or use a foundation to save on development time, budget and resources? For an enterprise software MVP, which might take 8–12 months with a small team, you might indeed spend 6 months on your foundation. Things like Identity, Payment, Infrastructure, DevOps, etc. they all take time, while contributing not much to your actual product. These features are needed, but they are not your differentiators.

Pellerex does just that. It provides a foundation that save you a lot development time and effort at a fraction of the cost. It gives you source-included Identity, Payment, Infrastructure, and DevOps to build Web, Api and Mobile apps all-integrated and ready-to-go on day 1.

Check out Pellerex and talk to our team today to start building your next enterprise software fast.