Implement Azure Application Insights with React

When we talk about monitoring/logging option on the UI application side we don't have much option which gives picture perfect dashboard, one way could be passing all the data to the server via some endpoints and creating our own dashboard.

Today we are going to talk about Application Insights which can be used in applications from web to mobile.

In web applications like ecommerce we want to capture specific event, page views, track exception, API calls and much more. We can implement Application Insights in the backend code as well so that team can club all the data if required.

Let's start Configuring AppInsights

First we need to create the Azure account if you don't have, then create the resource in Azure and have an AppInsights instance so that we can get the instrumentation key.

Now install npm packages so that we can start integrating AppInsights.

npm install @microsoft/applicationinsights-react-js
npm install @microsoft/applicationinsights-web

Let's create the file that will setup the instrumentation for us.

// appInsights.js

import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import { createBrowserHistory } from 'history';

const browserHistory = createBrowserHistory({ basename: '' });
const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey: process.env.REACT_APP_APPINSIGHTS_KEY,
    extensions: [reactPlugin],
    extensionConfig: {
      [reactPlugin.identifier]: { history: browserHistory },
    },
  },
});
appInsights.loadAppInsights();
export { reactPlugin, appInsights };

This file will setup the connection using the key (instrumentation key) which I have kept in environment file. Let's create one .env file for development.

// .env.development

REACT_APP_APPINSIGHTS_KEY = <paste your instrumentation key here>

We are done with the initial setup & it's time to track some events.

trackException This event is handy when you want to log exception related to API or if the API itself gets fail.

import { appInsights } from 'appInsights';

const properties = {userId : personId}
try {
}
catch(err) {
 appInsights.trackException({ error: err, properties });
}

pass the data in properties object which you want to capture along with the error.

trackPageView In a device or webpage app, page view telemetry is sent by default when each screen or page is loaded. But you can change that to track page views at additional or different times.

appInsights.trackPageView("tab1");

So idea is to create a common method and just need to import where ever required and call different methods provided by Azure AppInsights.

For other methods please checkout this link
https://docs.microsoft.com/en-us/azure/azure-monitor/app/api-custom-events-metrics