Skip to content
Petkir Blog
XLinkedinBluesky

Azure Application Insights for React PWA Apps

— Azure, Code, React — 3 min read

How to Start with Azure Application Insights in a React PWA App

Introduction

In today's fast-paced development environment, monitoring and maintaining application performance and availability is crucial. Azure Application Insights, a feature of Azure Monitor, helps you gain insights into your application’s health, performance, and usage. This post will guide you through the process of setting up Azure Application Insights for a React Progressive Web App (PWA) using TypeScript. We'll also cover how to automate the setup using Bicep.

What is Azure Application Insights?

Azure Application Insights is an extensible Application Performance Management (APM) service for web developers on multiple platforms. It helps you understand how your app is performing and how it’s being used by collecting telemetry data from your application. This includes metrics such as request rates, response times, dependency rates, and exception rates. It also provides powerful analytics tools to help you diagnose issues and understand usage patterns.

Key Features of Azure Application Insights

  • Automatic Collection of Data: Collects telemetry data automatically from your application.
  • Powerful Analytics: Provides tools for querying and analyzing the collected data.
  • Integration with DevOps: Integrates seamlessly with your existing DevOps pipeline, aiding in continuous integration and delivery.
  • Alerts and Notifications: Allows setting up alerts for critical issues to keep you informed in real-time.

Setting up Azure Application Insights with Bicep

Bicep is a domain-specific language (DSL) for deploying Azure resources declaratively. It simplifies the process of managing Azure resources by providing a more readable and maintainable syntax compared to traditional ARM templates.

Install Bicep

First, ensure you have the Azure CLI installed. Then, install Bicep using the following command:

az bicep install

Create a Bicep File

Create a Bicep file named main.bicep to define the resources needed for Azure Application Insights.

resource appInsights 'Microsoft.Insights/components@2020-02-02' = {
  name: 'myAppInsights'
  location: 'West Europe'
  kind: 'web'
  properties: {
    Application_Type: 'web',
    DisableIpMasking: true
  }
}

!!! Attention: The above Bicep file creates an Azure Application Insights with disabled IP masking !!! Learn more

Deploy the Bicep File

Deploy the Bicep file to create the Azure Application Insights resource:

az deployment group create --resource-group myResourceGroup --template-file main.bicep

Integrating Azure Application Insights in a React App with TypeScript

Once you have set up Azure Application Insights in your Azure environment, the next step is to integrate it into your React PWA.

Install the Application Insights SDK

Install the Application Insights JavaScript SDK:

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

Initialize Application Insights

Create a new file, AppInsights.ts, to initialize and configure Application Insights.

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


const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
  config: {
    connectionString: 'YOUR_INSTRUMENTATION_CONNECTION_STRING',
    extensions: [reactPlugin],
    extensionConfig: {
      [reactPlugin.identifier]: { history: window.history }
    }
  }
});


appInsights.loadAppInsights();


export { reactPlugin, appInsights };

Integrate with React Components

Wrap your main App component with the AppInsightsContextProvider to enable tracking of component renders and navigation.

import React from 'react';
import ReactDOM from 'react-dom';
import { AppInsightsContext, withAITracking } from '@microsoft/applicationinsights-react-js';
import { reactPlugin, appInsights } from './AppInsights';
import App from './App';


const AppWithTracking = withAITracking(reactPlugin, App);


ReactDOM.render(
  <AppInsightsContext.Provider value={reactPlugin}>
    <AppWithTracking />
  </AppInsightsContext.Provider>,
  document.getElementById('root')
);

Track Custom Events and Metrics

You can also track custom events and metrics by using the appInsights instance.

import { appInsights } from './AppInsights';


// Track a custom event
appInsights.trackEvent({ name: 'custom_event' });


// Track a custom metric
appInsights.trackMetric({ name: 'custom_metric', average: 42 });

Conclusion

By following these steps, you have successfully set up Azure Application Insights for your React PWA app. With Application Insights, you can now monitor your app's performance, diagnose issues, and gain insights into user behavior, which can help you improve the overall user experience.

Feel free to try it and happy coding!