How to use @microsoft/applicationinsights-web - 4 common examples

async getCategory() {
        this.appInsights.trackTrace({ message: `'getCategory' - Initiated request`, properties: { User: this.userObjectId }, severityLevel: SeverityLevel.Information });
        let category = await getAllCategories();

        if (category.status === 200 && category.data) {
            this.appInsights.trackTrace({ message: `'getCategory' - Request success`, properties: { User: this.userObjectId }, severityLevel: SeverityLevel.Information });
            console.log(category);
            this.setState({
                categories: category.data,
                filteredCategory: category.data
            });
        }
        else {
            this.appInsights.trackTrace({ message: `'getCategory' - Request failed`, properties: { User: this.userObjectId }, severityLevel: SeverityLevel.Information });
        }
        this.setState({
            loader: false
        });

async getCategory() {
        this.appInsights.trackTrace({ message: `'getCategory' - Initiated request`, properties: { User: this.userObjectId }, severityLevel: SeverityLevel.Information });
        let category = await getAllCategories();

        if (category.status === 200 && category.data) {
            this.appInsights.trackTrace({ message: `'getCategory' - Request success`, properties: { User: this.userObjectId }, severityLevel: SeverityLevel.Information });
            console.log(category);
            this.setState({
                categories: category.data,
                filteredCategory: category.data
            });
        }
        else {
            this.appInsights.trackTrace({ message: `'getCategory' - Request failed`, properties: { User: this.userObjectId }, severityLevel: SeverityLevel.Information });
        }
        this.setState({
            loader: false
        });
    }

import Typography from '@material-ui/core/Typography';
import GridListTile from '@material-ui/core/GridListTile';
import ListSubheader from '@material-ui/core/ListSubheader';
import {ApplicationInsights} from '@microsoft/applicationinsights-web';
import CaseReportByHealthRiskTable from "./healthRisk/CaseReportByHealthRiskTable";
import HealthRiskPerDistrictTable from "./healthRisk/HealthRiskPerDistrictTable";
import TotalCard from "./TotalCard";
import { getJson } from "../utils/request";
import { formatDate } from "../utils/dateUtils";
import HealthRiskPerDistrictBarCharts from "./healthRisk/HealthRiskPerDistrictBarCharts";
import Map from "./Map.js";
import CBSNavigation from './Navigation/CBSNavigation';
import { AllHealthRisks } from "../Features/HealthRisk/AllHealthRisks";
import { QueryCoordinator } from "@dolittle/queries";

const appInsights = new ApplicationInsights({
    config: {
        instrumentationKey: process.env.REACT_APP_APP_INSIGHTS_INSTRUMENTATION_KEY,
        maxBatchInterval: 0,
        disableFetchTracking: false
    }
});
appInsights.loadAppInsights();
export const BASE_URL = process.env.API_BASE_URL;


class NationalSocietyOverview extends Component {
    constructor(props) {
        super(props);

        this.state = {
            totalFemale: "-",

initialize(config, customProperties, authenticatedUserId, accountId) {
        appInsights = new ApplicationInsights({ config });
        appInsights.loadAppInsights();
        appInsights.setAuthenticatedUserContext(authenticatedUserId, accountId);
        appInsights.addTelemetryInitializer((envelope) => {
            for (var key in customProperties) {
                envelope.data[key] = customProperties[key];
            }
        });
    },