ApplicationInsights-JS: Using a telemetry initializer for browser requests
In this article: How to build a request filter for client tracking. ❤
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);
}
}
58
Countries Seen
6
Continents Visited
2184
Movies Watched
4523
Awards Won