react-appinsights

Javascript module to include Application Insights in applications built with React.
It extends Application Insights with additional React-specific features:

• tracking of router changes
• React components usage statistics
• API to extend the standard telemetry with additional dimensions

Installation

With npm:

npm install --save react-appinsights

Usage

To initialize Application Insights add the following to the entry point file of your application (e.g. index.js):

import ReactAI from 'react-appinsights';
ReactAI.init({instrumentationKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx'});

See this Application Insights tutorial for Node.js for more details on how to obtain the instrumentation key.

Track router changes

To track page views, pass a history object to the init method.
For more information see the documentation of the react-router package.

import ReactAI from 'react-appinsights';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory()
ReactAI.init({instrumentationKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx'}, history);

ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>,
  document.getElementById("root")
);

Enable React components usage tracking

To enable React components usage tracking, apply the withTracking higher-order component function.

import ReactAI from 'react-appinsights';

class MyComponent extends React.Component {
    ... 
}

export default ReactAI.withTracking(MyComponent);

If, for any reason, you want to change the name string of the component that appears in Application Insights, you can pass in a custom name as second argument of withTracking.

export default ReactAI.withTracking(MyComponent, "CustomMyComponentName");

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

To see this metric in Azure portal you need to navigate to Application Insights resource, select Metrics Explorer from the top menu and configure one of the empty charts to display Custom metrics "React Component Engaged Time" grouped by Component Name. It can take up to 10 minutes for new custom metric to appear in Azure Portal.

Set application context

To augment all telemetry with additional properties use setAppContext method. For instance:

ReactAI.setAppContext({urlReferrer: document.referrer});

This will add urlReferrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights:

Get AppInsights object

Use the following method to get the original AppInsights object:

var appInsights = ReactAI.ai();

Refer to this doc for information on the Javascript API of Application Insights.