user information of react app using in azure web app

• To track the user details for your web application, you need to add Application insights in your web apps.

• Install Application Insights both in your app server code and in your webpages with npm install @microsoft/applicationinsights-web.

• Use the Users, Sessions, and Events segmentation tool to filter and split the data to uncover insights about the relative use of different pages and features.

• The code below integrates Azure Application Insights into a React application using the @microsoft/applicationinsights-web and @microsoft/applicationinsights-react-js packages to track events and user behavior.

• Create Azure Application Insights and Azure Application Insights Instrumentation Key

Code:

// src/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:  'Azure Application Insights Instrumentation Key',
    extensions: [reactPlugin],
    extensionConfig: {
      [reactPlugin.identifier]: { history: browserHistory },
    },
  },
});

appInsights.loadAppInsights();

export { reactPlugin, appInsights };

// src/App.js

import React, { useEffect } from 'react';
import { reactPlugin } from './AppInsights';
import { withAITracking } from '@microsoft/applicationinsights-react-js';

class MyComponent extends React.Component {
  componentDidMount() {
    // Example of tracking a custom event
    reactPlugin.trackEvent({ name: 'MyComponent Mounted' });
  }

  componentWillUnmount() {
    // Example of tracking a custom event when component unmounts
    reactPlugin.trackEvent({ name: 'MyComponent Unmounted' });
  }

  render() {
    return <div>Hello from MyComponent!</div>;
  }
}

// Wrap your component with withAITracking to enable tracking
const MyTrackedComponent = withAITracking(reactPlugin, MyComponent);

// Use a functional component to demonstrate useEffect
const App = () => {
  useEffect(() => {
    // Example of tracking a page view
    reactPlugin.trackPageView({ name: 'App Component Page View' });
  }, []);

  return (
    <div>
      <h1>Your React Application</h1>
      <MyTrackedComponent />
    </div>
  );
};

export default App;

Output:

In users:

In logs:

Sessions and Events: