Javascript script for Application Insights

2018-06-10

There are a lot of scripts available on how to implement Application Insights on the server side. Also, for a lot of different ways to customize the logging. But I had a hard time finding how to customize Application Insights on the client side (in javascript). So below I include the script we use with some customizations you can use to log what you want to get out of appInsights.

var appInsights = window.appInsights || function (config) {
    function r(config) { t[config] = function () { var i = arguments; t.queue.push(function () { t[config].apply(t, i) }) } }
    var t = { config: config }, u = document, e = window, o = 'script', s = u.createElement(o), i, f; for (s.src = config.url || '//az416426.vo.msecnd.net/scripts/a/ai.0.js', u.getElementsByTagName(o)[0].parentNode.appendChild(s), t.cookie = u.cookie, t.queue = [], i = ['Event', 'Exception', 'Metric', 'PageView', 'Trace', 'Ajax']; i.length;) r('track' + i.pop()); return r('setAuthenticatedUserContext'), r('clearAuthenticatedUserContext'), config.disableExceptionTracking || (i = 'onerror', r('_' + i), f = e[i], e[i] = function (config, r, u, e, o) { var s = f && f(config, r, u, e, o); return s !== !0 && t['_' + i](config, r, u, e, o), s }), t
}({
    instrumentationKey: '@Model.AppInsightsInstrumentationKey'
});
window.appInsights = appInsights;
appInsights.queue.push(function () {
    @if (!String.IsNullOrWhiteSpace(User.Identity.Name))
    {
        <text>
        var appInsightsUserName = '@User.Identity.Name.Replace("\\", "\\\\")';
        appInsights.setAuthenticatedUserContext(appInsightsUserName.replace(/[,;=| ]+/g, "_"));
        </text>
    }
    appInsights.context.addTelemetryInitializer(function (envelope) {
        if (envelope.name === Microsoft.ApplicationInsights.Telemetry.RemoteDependencyData.envelopeType && envelope.data.baseData.target.indexOf("...") > -1) {
            return false;
        }
        if (envelope.name === Microsoft.ApplicationInsights.Telemetry.Exception.envelopeType && envelope.data.baseData.message.contains("...")) {
            return false;
        }
    });
    appInsights.viewPath = '<nameofview>';
    appInsights.browserWidth = window.innerWidth;
    appInsights.browserHeight = window.innerHeight;
    appInsights.context.application.ver = '@typeof(<Assembly.ClassName>).Assembly.GetName().Version.ToString()';
    appInsights.context.application.build = '@typeof(<Assembly.ClassName>).Assembly.GetName().Version.ToString()';
    appInsights.trackPageView(null, null, { urlReferrer: document.referrer });
});

The first bit is just the standard Application Insights javascript script. This you can find anywhere.

Then we add our startup function to appInsights.queue.push. This way the startup function is called when application insights is fully loaded.

Next, we set the user authentication context based on the current principal. You can find more on this in my blogpost “Follow a specific user with Application Insights by setting AuthenticatedUserId”.

Next, we can add TelemetryInitializers, but we mostly use them to filter certain items. We have a javascript framework included in our app that we use to show popups or function tours to our users. We make calls to this system every request and I don’t have any need seeing these calls in our logs, so we filter those out. We also filter some exceptions that are caused by browser extensions.

Finally, we set some values (which are pretty obvious I think) and we call trackPageView to log the page view with our values.

This gives us lots of good information on what our users are doing and see all errors users experience with our javascript code.

Coding