# react-appinsights
**Repository Path**: mirrors_Azure/react-appinsights
## Basic Information
- **Project Name**: react-appinsights
- **Description**: Typescript library to use Application Insights in React applications [deprecated, see microsoft/ApplicationInsights-JS]
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-03-21
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## :warning: Deprecation Warning :warning:
This repository has been archived and the corresponding npm package deprecated. The recommended way of using Application Insights
in a React application is through its React plugin
[`@microsoft/applicationinsights-react-js`][react-plugin-package], whose code and documentation reside in the
[repository of Application Insights SDK for JavaScript][appinsights-repo].
The React plugin is based on version 3.x of react-appinsights.
----
# react-appinsights
[](https://www.npmjs.com/package/react-appinsights) [](https://dev.azure.com/azure-public/react-appinsights/_build/latest?definitionId=16) [](https://greenkeeper.io/) [](https://www.npmjs.com/package/react-appinsights)
Javascript library to integrate [Application Insights][appinsights-js] in applications built with [React][react].
`react-appinsights` 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
Using npm:
```bash
npm install --save react-appinsights@beta
```
## Usage
To initialize Application Insights, add the following to the entry point
file of your application (e.g. `index.js`):
```javascript
import { reactAI } from "react-appinsights";
import { ApplicationInsights } from "@microsoft/applicationinsights-web";
let appInsights = new ApplicationInsights({
config: {
instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx",
extensions: [reactAI],
extensionConfig: {
[reactAI.extensionId]: { debug: false }
}
}
});
appInsights.loadAppInsights();
```
See [this Application Insights tutorial for Node.js][appinsights-nodejs]
for more details on how to obtain the instrumentation key.
`IReactAISettings` has following non-mandatory configuration options to be passed into the `extensionConfig` object:
```typescript
interface IReactAISettings {
initialContext?: { [key: string]: any }; // Initial context to initialize with
history?: History; // React router history - to enable page view tracking
debug?: boolean; // Debug mode: displays debug messages from ReactAI in console
}
```
#### Track router changes
To track page views, pass a history object to the init method.
For more information see the [documentation][react-router] of the `react-router` package.
```javascript
import { reactAI } from "react-appinsights";
import { ApplicationInsights } from "@microsoft/applicationinsights-web";
import { Router } from "react-router-dom";
import { createBrowserHistory } from "history";
const history = createBrowserHistory();
/*
* In the code sample above, set configuration as follows:
* extensionConfig: {
* [ReactAI.extensionId]: { history: history }
* }
*/
ReactDOM.render(
,
document.getElementById("root")
);
```
#### Enable React components usage tracking
To instrument various React components usage tracking, apply the `withAITracking` higher-order
component function.
```javascript
import { withAITracking } from 'react-appinsights';
class MyComponent extends React.Component {
...
}
export default withAITracking(MyComponent);
```
To change the name string of the component that appears in Application Insights,
you can pass a custom name as second argument of `withAITracking`.
```javascript
export default withAITracking(MyComponent, "CustomMyComponentName");
```
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.
#### Set application context
To augment all telemetry with additional properties use `setContext` method. For instance:
```javascript
reactAI.setContext({ CorrelationId: "some-unique-correlation-id", Referrer: document.referrer });
```
This will add CorrelationId and Referrer property to all page views, ajax calls, exceptions and other telemetry sent to Application Insights.
#### Get original AppInsights object
Use the following method to get the original AppInsights object:
```javascript
var appInsights = reactAI.appInsights;
```
Refer to [this doc][appinsights-js-api] for information on the Javascript API of Application Insights.
[react]: https://reactjs.org/
[appinsights-js]: https://docs.microsoft.com/en-us/azure/application-insights/app-insights-javascript
[appinsights-nodejs]: https://azure.microsoft.com/en-us/documentation/articles/app-insights-nodejs/
[appinsights-js-api]: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md
[react-router]: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components
[react-plugin-package]: https://www.npmjs.com/package/@microsoft/applicationinsights-react-js
[appinsights-repo]: https://github.com/microsoft/ApplicationInsights-JS