Did the issue resolved for you ?
If not,
Ensure that you install the npm package for React.js,
npm install @microsoft/applicationinsights-react-js
npm install @microsoft/applicationinsights-web
Initialize a connection to Application Insights:
in AppInsights.js
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import { createBrowserHistory } from 'history';
const browserHistory = createBrowserHistory({ basename: '' });
const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
config: {
instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
extensions: [reactPlugin],
extensionConfig: {
[reactPlugin.identifier]: { history: browserHistory }
}
}
});
appInsights.loadAppInsights();
export { reactPlugin, appInsights };
And then Wrap your component with the higher-order component function to enable Application Insights on it:
import React from 'react';
import { withAITracking } from '@microsoft/applicationinsights-react-js';
import { reactPlugin, appInsights } from './AppInsights';
// To instrument various React components usage tracking, apply the `withAITracking` higher-order
// component function.
class MyComponent extends React.Component {
...
}
// withAITracking takes 4 parameters ( reactPlugin, Component, ComponentName, className)
// the first two are required and the other two are optional.
export default withAITracking(reactPlugin, MyComponent);
This will help you track all the requests, page views and custom events.
Also take a look at this doc for more reference : Javascript React SDK Plugin