DEV Community

Cover image for Implement Azure Application Insights with React
Shubham
Shubham

Posted on

7 1

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 };
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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 });
}
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay