Skip to main content

Portal Telemetry

The project portal is equipped with its dedicated telemetry module seamlessly integrated and configured with the Project Portal's App-Insight instance. Within this system, users can access and review the detailed configuration settings of the telemetry module.

        /** Enabling application insight module */
if (portalConfig.applicationInsights) {
enableTelemetry(config, {
connectionString: portalConfig.applicationInsights.connectionString,
customConfig: {
aiCloudRole: 'project-portal',
trackPageView: true,
},
enableAutoRouteTracking: true,
autoTrackPageVisitTime: true,
});
}

The useTelemetry hook is a custom React hook designed to facilitate easy integration with telemetry functionality, specifically tailored for Azure Application Insights within your application.

Usage

import { useTelemetry } from 'path-to-useTelemetry';

// ...

const MyComponent = () => {
// Access the telemetry client and dispatchEvent method
const { client, dispatchEvent } = useTelemetry();

// Use telemetry functionality within your component
// ...
};

Overview

The hook provides an object with two properties:

  • client: An instance of the Azure Application Insights telemetry client.
  • dispatchEvent: A method to dispatch telemetry events to Azure Application Insights.

Example

// Example usage within a component
const MyComponent = () => {
const { dispatchEvent } = useTelemetry();

// ...

// Dispatch a custom telemetry event
const handleClick = () => {
const event = {
name: 'ButtonClicked',
properties: {
// ... custom event properties
},
};

dispatchEvent(event);
};

return (
<button onClick={handleClick}>Click me</button>
);
};

API

useTelemetry()

The hook returns an object with the following properties:

  • client: An instance of the Azure Application Insights telemetry client.
  • dispatchEvent(event: IEventTelemetry, customProperties?: ICustomProperties): A method to dispatch telemetry events. Takes an event object and optional custom properties.