ApplicationInsights-JS: Using a telemetry initializer for browser requests

In this article: How to build a request filter for client tracking. ❤

23 April 2020
Aloha to u all.

In some cases there are request you do not want to have logged as actual exceptions. For example when a user aborts a request. A good exsample for that would be a combobox that reloads data depending on user input. In the moment when a new request is started the old will be abandoned. In this case application insights will log a failed dependency.

Microsofts documentation about telemetry initializers for client tracking lacks a bit of helpful content. So this is why I want to show how this is done.

To make things simple the Github repository [ApplicationInsights-JS (https://github.com/microsoft/ApplicationInsights-JS)] provides you with necessary basic informations.

The most easy and also recommended way to create your processor is to extend the base class BaseTelemetryPlugin.

import { BaseTelemetryPlugin, IProcessTelemetryContext } from '@microsoft/applicationinsights-core-js'; import { ITelemetryItem } from '@microsoft/applicationinsights-web';

export default class FilterRequestPlugin extends BaseTelemetryPlugin {

processTelemetry(env: ITelemetryItem, itemCtx?: IProcessTelemetryContext): void {
    super.processNext(env, itemCtx);
  }

}

To get this plugin working you will have to add an active instance to the extensions of your application insights configuration. From here on you will be able to debug through your processor and access the [telemetry item(https://github.com/microsoft/ApplicationInsights-JS/blob/master/shared/AppInsightsCore/src/JavaScriptSDK.Interfaces/ITelemetryItem.ts)].

import { ApplicationInsights } from '@microsoft/applicationinsights-web' import RequestFilterPlugin from './FilterRequestPlugin' const requestFilterPlugin = new FilterRequestPlugin(); const appInsights = new ApplicationInsights({ config: { instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE', extensions: [requestFilterPlugin], } }); appInsights.loadAppInsights(); appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview

The ITelemetryItem contains different types of items which are available through the baseType property.

RemoteDependencyData: - client based xhr requests PageViewData: - current page tracking

Additionally to that you will find the request data inside the baseData wich you most likely need to filter a request.

baseData['success'] - Boolean baseData['resultCode'] - Http Status Code baseData['method'] - GET / POST baseData['type'] - ie. Fetch baseData['name'] - ie. "GET " (RemoteDependencyData) baseData['properties'] - Request Options

Based on these information a simple extension of your filter could be like the next code block. From here you will be able to go to more detailed filtering options.

import { BaseTelemetryPlugin, IProcessTelemetryContext } from '@microsoft/applicationinsights-core-js'; import { ITelemetryItem } from '@microsoft/applicationinsights-web';

export default class FilterRequestPlugin extends BaseTelemetryPlugin {

processTelemetry(env: ITelemetryItem, itemCtx?: IProcessTelemetryContext): void {
    if (env.baseType === 'RemoteDependencyData' && env.baseData['method'] === 'GET' && enb.baseData['name'].indexOf('/myrequesturl') >= 0) {
      return; // alternativly change properties like resultCode to 200
    }

    super.processNext(env, itemCtx);
  }

}

APPLICATIONINSIGHTS-JS REQUESTFILTER WEB BASETELEMETRYPLUGIN TYPESCRIPT

7518

Shots Taken

3472

Cups of Coffee

2184

Movies Watched

4523

Awards Won