Integrating Application Insights in Angular

Vondelpark in Amsterdam: best public park ever :)

What is Application Insight?

Application Insights (AI) is a powerful application performance management service by Azure Monitor. It allows monitoring of live applications, enabling tracking of performance, failure, anomaly detection. It’s mostly used to collect telemetry data around page views, Ajax calls, user sessions, and track errors and exceptions.

It is mainly aimed at the development teams to help understand the application performance, but it can also be used by the business teams to analyze users’ behavior and how they interact with the application.

Tracking capabilities

Some of the tracking features include:

• Page view and load performance
• User and sessions count
• Errors and exceptions tracking
• Requests rates and response times
• Custom event and metrics

For more details, visit the official introduction page and documentation.

Implementation

There are two possible ways to integrate Application Insights into a front-end application. The first one is a JS snippet approach which is simple and fast to implement but comes with some tradeoffs, and the second one is the NPM SDK setup which requires a bit more configuration but it provides full control of the logging service.

Prerequisite

• Application Insights resource in Azure Portal. If you need to create one, use this documentation page.

1. JS Snippet setup

This setup allows configuring AI without installing the npm package. Simply include the following Javascript snippet at the of the page, preferably in the head section:

The snippet fetches from the CDN and initializes the AppInsights key using the INSTRUMENTATION_KEY.

To improve performance, it is possible to host the JS SDK locally instead of fetching it from the CDN. This can be achieved by using the following snippet:

Tradeoffs

This setup works fine but it has some drawbacks:

• potentially the snippets will need to be included in multiple pages.
• is not trivial to provide dynamic instrumentation keys.
• it requires modifying the template of the page where it is included, this might not be ideal in the case of an Angular app.
• is not trivial to set it up in a way that code can be reused and track custom metrics.

A better approach that is more “in-line” with the Angular services is the NPM SDK setup and create wrapper service for AppInsights.

2. NPM SDK setup

This approach requires the Application Insights SDK from NPM and creates a wrapper service to interact with the AI instance.

First of all, you will need to declare the AI SDK as a dependency, so add the following to package.json file:

"@microsoft/applicationinsights-web": "~2.5.6"; // check latest

Next, create a new Angular service:

Don’t forget to add the service in the module providing it, generally, this service is provided by app.module, so add it to the providers array.

To use the service, simply use Angular dependency injection to require it and use one of the helper methods to track the event you are interested in.

Logging errors and exceptions

It is recommended to create a global error handler (or modify if it already exists) and report errors to AppInsight using the trackException(…) method.

Error logs can be inspected in the Azure portal, under the Failures section of the AppInsights dashboard (browser logs).

Security concerns

It is worth mentioning that there is one minor security concerning relating to client-side Application Insights. Since this is a client-side application, the value of the instrumentation key is exposed to the public and is visible to anyone in the browser. This problem is not unique to Application Insights but any Javascript-based analytic tool is affected but it.

This is not a big problem per se because the instrumentation key cannot be used to read any data, the main concern is that bad actors can use it to interfere with data collection (i.e. send wrong data to App insights).

This risk can be minimized/mitigated by having a mechanism to distinguish real data from bad data (include some sort of id in the tracking events). A drastic solution is to avoid using client-side SDK for application insights, instead, send the tracking data to your own server (where it can be validated and sanitized) and then send it to Application Insights instance. More details can be found here.