Repository files navigation

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 onMicrosoft Docs.

Install npm package:

npm install @microsoft/applicationinsights-react-js

importReactfrom'react';import{ApplicationInsights}from'@microsoft/applicationinsights-web';import{ReactPlugin,withAITracking}from'@microsoft/applicationinsights-react-js';import{createBrowserHistory}from"history";constbrowserHistory=createBrowserHistory({basename:''});varreactPlugin=newReactPlugin();varappInsights=newApplicationInsights({config:{connectionString:'YOUR_CONNECTION_STRING_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.classMyComponentextendsReact.Component{    ...}exportdefaultwithAITracking(reactPlugin,MyComponent);

Forreact-router v6 or other scenarios where router history is not exposed, appInsights configenableAutoRouteTracking can be used to auto track router changes.

varreactPlugin=newReactPlugin();varappInsights=newApplicationInsights({config:{connectionString:'YOUR_CONNECTION_STRING_GOES_HERE',enableAutoRouteTracking:true,extensions:[reactPlugin]}}});appInsights.loadAppInsights();

To instrument various React components usage tracking, apply thewithAITracking higher-ordercomponent function.

It will measure time from theComponentDidMount event through theComponentWillUnmount 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.

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

Measuring the duration for a Single Page Application (SPA) can be challenging when the URL does not change. Therefore, we recommend usingstartTrackPage andstopTrackPage for accurate duration calculation.

You can find an example in our sample app. After running the app, visithttp://localhost:3000/test to see it in action.

As part of updating to supportApplicationInsights 3.x we will be bumping the major versionnumber of this extension to match the major version of the supported React-JS version (which will be v17.x for the first release).

Additionally, as part of this change the existing v3.x extension has been moved into therelease3.x branch

💡NoteIf you have encounter error as this:

Type 'ReactPlugin' is not assignable to type 'ITelemetryPlugin'.

Click here for aType Error Fixed Guideline

To aid with testing and validation we also produce and publish nightly builds whenever there is a change from the previous build. These builds are published to theNpmJs registry on a successful build / test pass.

This process alsotags the source code so that we can track the specific changes included using a nightly build specific version number which is the format "nightly-yymm-##" eg.nightly-2208-05

These nightly builds will not be retained indefinitely and should only be used forpre-production testing and/or validation of any changes that have not yet been released.

The NPM builds are tagged as "nightly" and can by downloaded using this as the version numbernpm install @microsoft/applicationinsights-react-js@nightly or using the nightly specific version number which is "nightly.yyyymm-###" (npm install @microsoft/applicationinsights-react-js@2.7.3-nightly.2112-08) where ## is the specific build number for the month (Note, slightly different version from the source code tag due to compatibility issues between the different systems).

When a new release is deployed the following occurs as part of the release

• NPM packages are created and published toNpmJs

Release Notes

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

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

This project has adopted theMicrosoft Open Source Code of Conduct.For more information see theCode of Conduct FAQ orcontactopencode@microsoft.com with any additional questions or comments.

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 athttps://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.

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must followMicrosoft’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.

MIT