Skip to content

Application Insights

We integrated Microsoft Application Insights into HortiView to provide telemetry and monitoring capabilities. This integration allows you to log errors and events, giving you detailed insights into your application's performance and user behavior. This documentation covers the technical aspects of integrating Application Insights and how to provide modules with two key functions: logError and logEvent.

Integration / Setup

Due to Module Federation, the basic integration and initialization of Application Insights is done in the HV Platform. Every action, HTTP error, and console event (log, warning, and error) is tracked by the platform.

The default console object is wrapped to use those mechanics, so module events are also logged to a certain level. That means that every uncaught error, warning, or log will be tracked with its whole stack trace (up to 8192 characters).

It is still highly recommended to track your own events and errors by using the logEvent and logError methods, which are provided to each module via the base properties.

Track an Event or Exception

Events or errors can be traced by using the utility functions logEvent or logError. They will automatically be logged/written into the Application Insights of HortiView with your moduleId and other properties the moment you call these functions.

Depending on the type (error or event), it will either be marked as an error or custom event in Application Insights.

By calling either function, the following additional data will be collected:

  • name: Scope of the module + module id + event name
  • moduleId: ID of the module
  • modulePermissionToken: First 4 characters of the modulePermissionToken for debugging purposes
  • organizationId: ID of the current user's active organization
  • basePath: Base URL of the module
  • currentLanguage: i18next language object of the user's currently selected language (e.g., en)
  • currentLanguageId: Our internal GUID of the user's currently selected language
  • sourcePath: Path to the remote entry file of the module

Events

An event can be any information or action (user or system) that can have any relevance for debugging purposes or health indication of your module. This should not be used for any evaluation of work speeds or similar performance indicators of users.

The logEvent method can be called with an IEventTelemetry object and ICustomProperties (see Application Insights Node module):

const logEvent = (event: IEventTelemetry, properties: ICustomProperties) => void;

An IEventTelemetry event can be an object with a name and properties (Record of strings:any). An ICustomProperties object is a Record object from strings to any possible object, so it is recommended to use a string:string object.

A basic implementation of the log function could look like this:

export const Component = () => {
  const logEvent = useBasePropsStore((state) => state.logEvent);

  const handleClick = () => {
    logEvent({
      name: "User clicked on interaction button",
      properties: {
        buttonType: "submit",
        buttonName: "SubmitEvent",
        buttonColor: "red",
      },
    });
    SomeComplexLogic();
  };

  return <Button onClick={handleClick}>Some Interaction</Button>;
};

Errors

If you handle any occurring error in your application, it probably won't be caught by our global error interception1, so you might want to log errors on your own. To do so, you can use the logError method, which will be passed to modules via the BaseProperties.

The logError method can be called with an IExceptionTelemetry object and ICustomProperties (see Application Insights Node module):

const logError = (exception: IExceptionTelemetry) => void;

An IExceptionTelemetry object needs to include any kind of Error-derived object.

A basic implementation of the log function could look like this:

export const Component = () => {
  const logError = useBasePropsStore((state) => state.logError);

  const handleClick = () => {
    try {
      SomeComplexLogic();
    } catch (error) {
      logError({
        exception: error,
      });
    }
  };

  return <Button onClick={handleClick}>Some Interaction that might produce an error</Button>;
};

  1. Error Handling ↩