Angular How-to: Page load times using Application Insights

Premier Developer

Premier

Dev Consultant Laurie Atkinson demonstrates how to integrate Application Insights into your Angular SPA to track page views and load times. This is a follow-up article to a previous post, https://devblogs.microsoft.com/premier-developer/add-application-insights-to-an-angular-spa


Application Insights is an Azure service for monitoring web applications. It includes analytics tools to help you understand application usage and to diagnose issues with the goal of continuously improving performance and usability. In addition to its integration with a variety of backend web platforms, Application Insights also includes browser analytics.

Add Application Insights through the Azure portal

cid:image014.jpg@01D2B16E.9FE9E330

cid:image015.jpg@01D2B16E.9FE9E330

Configure Angular application and include dependencies

Copy the instrumentation key into the Angular application. If your key can be included in TypeScript, then the environment.ts is the place to store it.

If the key needs to be modified at deployment and not at build time, then you will need a different solution. One option is to download a JSON file containing your configuration data. Refer to this post for instructions on implementing this option.

Add two dependencies to package.json and restore them using npm install.

applicationinsights-js – JavaScript library supplied by Microsoft to interface with the Application Insights SDK. Documentation on this library is located here:

@types/applicationinsights-js – TypeScript type definition file for applicationinsights-js.

Consume the Application Insights SDK in TypeScript

Create a TypeScript class as a wrapper around the Application Insights JavaScript API and import the AppInsights class using the module loading system.

STATIC CONFIG OPTION: If the instrumentation key is stored in the environment.ts file, this class can take responsibility for downloading the app insights JavaScript library.

On creation, the service calls into the Application Insights SDK JavaScript API, which triggers the download of ai.js from a CDN. This is recommended to ensure that the latest JavaScript is running against the Application Insights API.

DYNAMIC CONFIG OPTION: If you used a dynamic configuration file instead of environment.ts, then the app insights download should be triggered at application startup.

Track page load time

Due to the nature of a Single Page Application (SPA), page transitions do not automatically trigger logging to Application Insights. To track the user’s activity as s/he navigates from page to page, a call must be made manually to trackPageView().

Also, trackPageView() is not sufficient to log page load time. To gather this information, add methods to start and end a custom event, so that every time the user navigates to a new page, the total time can be calculated by App Insights.

One more important line of code should also be executed when the user starts navigating to a new page and that is to modify the operation id, which will allow you to group the App Insights metrics by each page. Otherwise, all page views will be associated with the same operation id.

If you are using a global service, that is a good place to listen for the routing events.

Configure query in Azure Portal to show timing

The following query includes the pageView events as well as the custom event containing the load time. Also, any AJAX requests made in route resolvers will be listed as dependencies with the same operation id.

The results pane allows you to group by the operation_Id column.

These steps should get your application up and running with Application Insights. To read about how to use the metrics being gathered, refer to this article. And, if you want to dig deeper into the API, you can read about using custom events and metrics.

Premier Developer
Premier Developer

Premier Support for Developers

Follow Premier   

0 comments

    Leave a comment