user information of react app using in azure web app

Question

I have one react app which contains multiple pages that pages contains different information. To host this react app Created azure web app and it's working fine. Now this app is available to users. so my question is i want to know who accessed the app and which user accessed which page with in that app and how many times user accessing the page. Is this possible to get this information with in the web app ? If yes, where can i get this?

I tried the multiple logs in web app but it showing no results found .

Not sure but checking application insights of this web app for this user related kpi's and as shown in image this is what i can see

i am checking logs and application insights of webapp but no luck.

please let me know how to get user information like who accessed the page and how many times accessed the pages.

Answer 1

• 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: