Application Insights is not showing browser exceptions when window.onerror is set

Comments (2) | Share

We are using Application Insights from Azure to gain insight into our production database. We noticed that the browser tab was not showing Browser exceptions. This should be working by default as discussed in their Application Insights for web pages walk through shows, but ours was empty. I was certain we didn’t have perfect JavaScript code, so I dug deeper.

First I made a quick file new project in Visual Studio, checked use Application Insights, added a throw new Error(‘bad dev!`), published it to Azure and had working test in a few minutes. I really enjoy how quickly it is to spin that up with Azure!

The exceptions started streaming in.

However, once I realized we were capturing the window.onError so that we could log through our API, I added this to the test, published again and they stopped.

To get both custom logging and App Insights logging, you’ll need to add some code.  Here is my TypeScript code example (I apologize if you’re only using JavaScript and you’ll have to pretend logger exists).

You can get the App Insights d.ts from npm install @types/applicationInsights --save

import {ILogger} from './logger';
import {AppInsightsTelemetryClient} from './appInsightsTelemetryClient';

export class Shell.ts {
    constructor(private logger: ILogger){
        this.setupGlobalErrorHandler(telemetryClient);
    }
    
     private setupGlobalErrorHandler(telemetryClient: AppInsightsTelemetryClient) {
        // log all uncaught exceptions and log to the db
        function handleGlobalErrors(message: string, url: string, lineNumber: number, colno: number, error: Error) {
            const errorInfo: any[] = [];
            errorInfo.push(`message: ${message}`);
            errorInfo.push(`url: ${url}`);
            errorInfo.push(`location: ${window.location}`);
            errorInfo.push(`lineNumber: ${lineNumber}`);
            errorInfo.push(`col no: ${colno}`);
            errorInfo.push(`stack: ${error.stack}`);
            errorInfo.push(`browser info: ${navigator.userAgent}|${navigator.vendor}|${navigator.platform}`);
            this.logger.logError('Unhandled JavaScript Exception', errorInfo.join('\n'), 'window.onerror');
            telemetryClient.trackException(error);
        }

        window.onerror = handleGlobalErrors;
    }
}

// simplified version of our wrapping code, put in a different file named appInsightsTelemetryClient
export class AppInsightsTelemetryClient {
    protected appInsights: Microsoft.ApplicationInsights.AppInsights;

    constructor(appInsights: Microsoft.ApplicationInsights.AppInsights) {
        this.appInsights = appInsights;
    }

    public trackEvent(name: string, properties?: any, measurements?: any): void {
        this.appInsights.trackEvent(name, properties, measurements);
    }
}

After getting it working, I’m considering removing our custom logging, but we’ll see.

I hope this helps!