The marketing team has expressed interest in the behavior of users across the PartsUnlimited website for how to best market the products, especially how popular the web application is and where the users live. The development team would like to know which browsers and operating systems that most users browse to the site from to target better user experiences. The development team has also noticed that the recommendations page is slow to load and shows performance spikes in Application Insights telemetry. By viewing the details of performance monitoring through Application Insights, we will be able to drill down to the code that has affected the slow performance of the web application and fix the code.

Using the out-of-box telemetry for Application Insights, the teams will be able to find out how people use the application and gain insights into the goals that they will need to achieve.

In this lab, you will learn about setting up Application Insights to gain further insight into how users are behaving towards your web application, and drill down into performance monitoring data through Application Insights in the new Azure Portal.

DevOps MPP Course Source

Pre-requisites:

Lab Tasks:

  • Set up Application Insights for PartsUnlimited
  • View real-time results for user telemetry in the Azure portal
  • Using Application Performance Monitoring to resolve performance issues

Estimated Lab Time:

  • approx. 60 minutes

Task 1: Set up Application Insights for PartsUnlimited

This will walk you through creating an Application Insights instance in Azure and connecting it to the PartsUnlimited solution.

Step 1. To configure Application Insights with PartsUnlimited, please follow these steps Application Insights - Getting Started

**Note** Some of this is set up for you.

Step 2. Open command line that supports Git and navigate to the PartsUnlimited repository. Run the following commands to push your changes to the remote repository and trigger CI and CD:

git add .

git commit -m "added Application Insights"

git push

Now that the telemetry has been added to the web application, it may take a few minutes for Application Insights to refresh.

Task 2: View real-time results for user telemetry in the Azure portal

In this step you will be shown where to find all of the information collected by Application Insights.

Now that we’ve given Application Insights time to refresh, we can take a look at the usage data in the new Azure Portal. The Portal will show a variety of metrics out of the box, including number of sessions, users, and browser sessions.

Note: Before you proceed, you need to generate data for the Application Insights instance by browsing the website for a few minutes.

Step 1. In an Internet browser, navigate to https://portal.azure.com and sign in with your credentials.

Step 2. Click on the “Resource Group” tile on the left column, select the “PartsUnlimited” resource group and then click on the name of “Application Insight”. This was created when you used the Deployment template in the PartsUnlimited solution.

Step 3. You will need to add the Application ID to your deployment. You will find the Application ID by going to the “Properties” under “Configure”. Copy the Application ID and paste it into the config.json for the PartsUnlimitedWebsite.

Step 4. To make sure that everything is going to be captured you need to select the “Getting Started” option, then “Monitor and Diagnose Client Side Application”. You will be giving a code snippet to copy and paste into the view \MsCorp.PartsUnlimited\src\PartsUnlimitedWebsite\Views\Shared\_Layout.cshtml along side the rest of the scripts.

Step 5. Once again you will need to push the changes to trigger CI and CD. Open command line that supports Git and navigate to the PartsUnlimited repository. Run the following commands:

git add .

git commit -m "added Application Insights ID"

git push

Step 6. In the overview panel of the Application Insights instance, overall application health will be shown in server response time, page view load time, server requests, and failed requests. (Actual times may vary). Click on the chart for Page View Load Time.

Step 7. In the Browsers timeline it is shown what pages have been slow, the AJAX calls and the page view traffic. Click on the “Edit” button in the first timeline chart.

Step 8. In the Chart Details pane, scroll down to the Client area and uncheck all of the properties except for Receiving Response Time. Then, turn on the Grouping and select “Browser version” as the “group by” property. The Browsers timeline will change and show the average receiving response time broken down into the various browsers that were used to log into the site.

Step 9. As you could see you were able to view the number of page views in the “Page View Traffic” graph. Another way to view the number of page views, is to go to “Metrics” under “Investigate” on the left. Enter “Page views” under metric, then change to the green “Property” tag and enter “Page view URL path”.

Task 3: Using Application Performance Monitoring to resolve performance issues

In this step you will investigate and resolve a performance issue with the help of Application Insights.

Step 1. In an Internet browser, navigate to the PartsUnlimited website that you previously deployed and go to the Recommendations page, such as http://partsunlimited.azurewebsites.net/home/recommendations.

 

Step 2. In the Application Insights instance blade, select the “Overview”. After a little time it will update with the new page you will be able to see that there is a big jump in the graphs. Select the “Page view load time” and you will notice it is the page that you hit took so long.

Note: You can select it to show you the full details.

Step 6. Using your preferred IDE or a text editor, open HomeController.cs and find the Recommendations method that is causing slow performance. At the top of the HomeController class, notice that the public int roco_count is set to 1000. Change that value to be 1.

Step 7. Open command line in PartsUnlimited repository and run the following commands:

git add .

git commit -m "Changed roco_count from 1000 to 1 in HomeController.cs after being aware of slow perf in AI"

git push

Note This will push the changes up to the remote repo and kick off a build automatically.

Step 8. Now that our changes have deployed to the website, open up a new incognito browser window (to prevent caching) and return to the recommendations page (http://partsunlimited.azurewebsites.net/home/recommendations).

 

Step 9. Return to the Application Insights performance monitoring view in the Azure Preview Portal and refresh the page. This may take some time, but it will display that a second response came through in a much faster time.

 

Summary

In this lab, you learned how to set up Application Insights telemetry to gain further insight into how users are behaving towards your web application, and drill down into performance monitoring data through Application Insights in the new Azure Portal.

Further Resources

Usage analysis for web applications with Application Insights