@microsoft/applicationinsights-react-js

What is @microsoft/applicationinsights-react-js?

@microsoft/applicationinsights-react-js is a package that provides React-specific bindings for the Application Insights JavaScript SDK. It allows developers to easily integrate Azure Application Insights into their React applications for monitoring and telemetry purposes.

What are @microsoft/applicationinsights-react-js's main functionalities?

React Plugin Initialization

This code initializes the React plugin for Application Insights and configures it with the necessary instrumentation key and browser history.

const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey: 'YOUR_INSTRUMENTATION_KEY',
    extensions: [reactPlugin],
    extensionConfig: {
      [reactPlugin.identifier]: { history: browserHistory }
    }
  }
});
appInsights.loadAppInsights();

Tracking React Component Renders

This code demonstrates how to wrap a React component with the `withAITracking` higher-order component to automatically track its renders.

import { withAITracking } from '@microsoft/applicationinsights-react-js';

class MyComponent extends React.Component {
  render() {
    return <div>My Component</div>;
  }
}

export default withAITracking(reactPlugin, MyComponent);

Custom Event Tracking

This code shows how to track custom events using the Application Insights instance.

appInsights.trackEvent({ name: 'customEvent', properties: { customProperty: 'value' } });

Other packages similar to @microsoft/applicationinsights-react-js

react-ga

react-ga is a package for integrating Google Analytics with React applications. It provides similar functionality for tracking page views and events but is specific to Google Analytics rather than Azure Application Insights.

react-helmet

react-helmet is a package for managing changes to the document head in a React application. While it does not provide telemetry, it is often used in conjunction with analytics packages to manage meta tags and other head elements.

logrocket

LogRocket is a service that allows developers to record and replay user sessions, providing insights into user behavior and application performance. It offers more comprehensive session recording and error tracking compared to Application Insights.

README

Microsoft Application Insights JavaScript SDK - React Plugin

React Plugin for the Application Insights Javascript SDK, enables the following:

• Tracking of router changes
• React components usage statistics

Full documentation for the React Plugin for the Application Insights JavaScript SDK can be found on Microsoft Docs.

Getting Started

Install npm package:

npm install @microsoft/applicationinsights-react-js

Basic Usage

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

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

// To instrument various React components usage tracking, apply the `withAITracking` higher-order
// component function.

class MyComponent extends React.Component {
    ...
}

export default withAITracking(reactPlugin, MyComponent);

For react-router v6 or other scenarios where router history is not exposed, appInsights config enableAutoRouteTracking can be used to auto track router changes.

var reactPlugin = new ReactPlugin();
var appInsights = new ApplicationInsights({
    config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
        enableAutoRouteTracking: true,
        extensions: [reactPlugin]
        }
    }
});
appInsights.loadAppInsights();

Configuration

Name	Default	Description
history	null	React router history for more information see the documentation of the react-router package.

React components usage tracking

To instrument various React components usage tracking, apply the withAITracking higher-order component function.

It will measure time from the ComponentDidMount event through the ComponentWillUnmount event. However, in order to make this more accurate, it will subtract the time in which the user was idle. In other words, React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time.

To see this metric in the Azure portal you need to navigate to the Application Insights resource, select "Metrics" tab and configure the empty charts to display Custom metric named "React Component Engaged Time (seconds)", select aggregation (sum, avg, etc.) of your liking and apply split by "Component Name".

You can also run custom queries to slice and dice AI data to generate reports and visualizations as per your requirements. In the Azure portal, navigate to the Application Insights resource, select "Analytics" from the top menu of the Overview tab and run your query.

Please note that it can take up to 10 minutes for new custom metric to appear in the Azure Portal.

Sample App

Azure-Samples/application-insights-react-demo.

React Router

Compatibility Matrix

The Compatibility Matrix is tracked and updated on the main project README.md page.

Nightly Builds

See the Main Readme

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [e-mail] with any additional questions or comments.

Data Collection

As this SDK is designed to enable applications to perform data collection which is sent to the Microsoft collection endpoints the following is required to identify our privacy statement.

The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft’s privacy statement. Our privacy statement is located at https://go.microsoft.com/fwlink/?LinkID=824704. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party’s policies.

License

MIT