Hands-On Lab

Monitoring Applications with Application Insights

Lab version:14.0.23107.0

Last updated:9/16/2015

TABLE OF CONTENT

Monitoring Applications with Application Insights

Overview

Prerequisites

Exercises

Exercise 1: Get performance data from a web app

Exercise 2: Getting Telemetry for Web Pages

Exercise 3: Additional Instrumentation and Custom Events

Exercise 4: Publish the Web App and Monitor Events in Production

Exercise 5: Monitor Availability, Alerts, and Export Data

Overview

Application Insights is an analytics service hosted in Microsoft’s newest Azure Portal. It is designed to help developers find performance issues earlier, diagnose crashes faster, and have deep insight into their users with a complete view of their apps and services. Track application health, usage metrics, and information about app crashes. Search results and drill down to specific events, monitor active usage, and get alerts automatically when things go wrong. Adding this instrumentation to a project is very easy, and viewing the results is equally straightforward. In this lab, we will begin to explore how developers can add Application Insights instrumentation to your applications, analyze Application Insights data in the Azure portal, and examine all of the basics of proactive monitoring and alerts.

Prerequisites

In order to complete this lab you will need:

  • The Visual Studio 2015 virtual machine provided by Microsoft. For more information on acquiring and using this virtual machine, please see this blog post.
  • A Microsoft Azure account with an active subscription. If you have an MSDN subscription, you already have access to Microsoft Azure; you simply need to activate it in your MSDN benefits portal, if you have not already. Otherwise, you can create a trial Azure account.
  • An open internet connection from the virtual machine. This means that if you have not already, you’ll need to create a virtual switch in the Hyper-V Manager and associate it with the VM. This is not a difficult task, but if you are unfamiliar with creating virtual switches in Hyper-V, good instructions can be found here.

Exercises

This hands-on lab includes the following exercises:

1: Adding Application Insights to a Project

2: Getting Telemetry for a Web App and Web Page

3: Additional Instrumentation and Custom Events

4: Publish the Web App and Monitor Events in Production

5: Monitor availability, Alerts, and Export Data

Estimated time to complete this lab: 30-40 minutes.

Exercise 1: Get performance data from a web app

In this exercise, you will learn how to add Application Insights telemetry to a web application project.

  1. If you have not already set a checkpoint for your VM, do so now. This will allow you to retry this lab or others from a “clean” state without reloading the entire VM.
  2. Log in as Brian Keller(VSALM\Brian). All user passwords are P2ssw0rd.
  3. Manually set the date and time in the virtual machine to match your current local date and time if it does not already match. Be sure to remember to set the correct time zone! Failing to do so will result in difficulty viewing the telemetry data in Application Insights later.
  4. Launch an instance of Visual Studio from the taskbar.
  5. Open the FabrikamFiber.CallCenter solution from the Dev branch in TFS source control. It should be the first item at the bottom of the Home tab on Team Explorer:

Figure 1

Open the FabrikamFiber.CallCenter solution from Team Explorer

  1. Navigate to the Solution Explorer tab. Right-click on the FabrikamFiber.Web project in the open solution, and check it out for edit. This will ensure that the correct resources are available in the local workspace when you add Application Insights to the project.

Figure 2

Check out solution for edit

  1. Now you are ready to add Application Insights to your project. Once again, right-click on the FabrikamFiber.Web project in the solution, and choose “Add Application Insights Telemetry…” from the context menu:

Figure 3

Add Application Insights to the project

  1. After you make this selection, you’ll see a new Application Insights dialog box and will be prompted to enter your Azure credentials. These are necessary because Application Insights collects telemetry data via Azure.

Figure 4

Sign in to Azure to add Application Insights to your project

  1. You will see another dialog that details your Azure subscription. Press the “Add” button to continue.

Note: You may also get a non-critical error dialog regarding the local workspace. If this happens, simply select OK to clear it.

  1. Once Application Insights has been added to the project, a browser window with App Insights information in it will pop up, and you can safely close this or minimize it to read later. You’ll also notice that there are now new resources in your solution including ApplicationInsights.config:

Figure 5

Solution with Application Insights resources added

  1. Use F5 to build and run your web app. Once it opens (it may take a minute or two for the first run), navigate to various pages, including Employees, Customers, Tickets, and Dashboard. Avoid Reports for now. Refresh a page or two, and drill into a couple of ticket or customer records. When you’re done, close the browser window.
  2. When you return to Visual Studio, you’ll see the following message at the top of the Solution Explorer:

Figure 9

First App Insights data sent

  1. Click Open Application Insights in the dialog.
    If necessary, sign into Azure using your credentials, click Browse, and select the Application Insights resource named for your app. If you have multiple directories associated with your Azure subscription, you may also need to select the correct subscription first.
    When your application resource opens, you should see data similar to the following:

Figure 10

Initial App Insights telemetry

  1. Congratulations! You now have telemetry summarizing the requests processed by your web app, and how quickly it responded to them.

You will notice, however, that the chart titled “browser page load data” does not have any data yet.

Exercise 2: Getting Telemetry for Web Pages

In this exercise, you will learn how to add necessary telemetry code to a web page.

  1. In click Browse and open the Application Insights resource for your app.

Note: one way to get there is to right-click on the ApplicationInsights.config in Solution Explorer and select the Open Application Insights option:

Figure 7

Open Application Insights from config

You’re now looking at something like this, with missing browser telemetry:

Figure 10

Initial App Insights telemetry

  1. In order to see the page-specific data, we need to add some code to our project. Fortunately, Application Insights will generate this code for us. Click on the chart in the portal with the missing data, andyou’ll see the script that you need to add to your project appear in yet another new blade to the right:

Figure 11

Generate script to monitor web pages

  1. Copy the script to the clipboard, return to Visual Studio, and then open _Layout.cshtml. Use the search box in the Solution Explorer to find it. Be sure to choose the one from the FabrikamFiber.Web project. Recall that in ASP.NET, this is a master template from which all the web pages are created. So we’re effectively adding the same script to all the pages of the site. This script will enable the collection of usage analytics from the end-user.

Paste the code into the file just before the closing </head> tag:

Figure 12

Paste instrumentation script into a web page

Note: You can take advantage of the JavaScript SDK for any web application, even if it is not built with ASP.NET.

  1. Use F5 to build and run your web application again. Click through the various views like you did the last time, avoiding Reports for the time being. When you are done, close the web app. Your new telemetry will be sent to Application Insights.

Figure 13

Build and run the application

  1. Switch back to (or open) the Azure portal in your browser, and refresh the FabrikamFiber.Web App Insights blade. You will now see data for the “browser page load time” chart as well. If you select it, you’ll be able to see detail information about this specific telemetry:

Figure 14

New telemetry available

  1. You should also notice in Figure 14 above that if you click on the Filters button on your Browsers detail blade, a list of available data filters appears at the right. This is very useful when you have large amounts of data or want to drill in to a specific area. In this example, the “Browser” filter has been expanded. Here, we only have data from one browser captured. However, if we had accessed our web app from multiple browsers, we could compare data for each specific browser or get a cumulative view just by applying the appropriate filter. Keep this in mind when you are analyzing your telemetry from Application Insights.

Note: You can also configure Application Insights to disable telemetry for debugging purposes altogether.

Exercise 3: Additional Instrumentation and Custom Events

In this exercise, you will see how we can add further instrumentation and custom events to our Application Insights data for more advanced monitoring.

Let’s suppose we’d like to know how often customer records are edited. So we’re going to send telemetry whenever that happens.

  1. Open _Layout.cshtml once again in Visual Studio and take a look at the IntelliSense for the appInsights object (temporarily remove the period after ‘appInsights’ to see the IntelliSense, and then re-add the period). Note that the JavaScript SDK includes methods to track events, exceptions, metrics, and traces:

Figure 15

Intellisense on appInsights object

  1. Press Escape to prevent modification to the JavaScript. Although we could add in additional instrumentation in the client, we’ll opt to just track a custom event on the server. We’re going to add this custom event and metrics to CustomersController.cs.
  1. Open CustomersController.cs in the code editor and add using statements for System, System.Collections.Generic, and Application Insights to the top of the file (as shown in Figure 16 below):

using System;

using System.Collections.Generic;

using Microsoft.ApplicationInsights;

Figure 16

Add libraries

  1. Locate the Edit method (this method is overloaded; choose the second instance that accepts “customer” as a parameter). Add the code highlighted below, or copy/paste the entire method over the code in CustomersController.cs:

publicActionResult Edit(Customer customer)

{

if (ModelState.IsValid)

{

var properties = newDictionarystring, string> { { "Customer", customer.ID.ToString() + ' ' + customer.FullName.ToString() }, { "TimeStamp", DateTime.UtcNow.ToLocalTime().ToString() } };

TelemetryClient client = newTelemetryClient();

this.customerRepository.InsertOrUpdate(customer);

this.customerRepository.Save();

client.TrackEvent("Edit Customer", properties, null);

return RedirectToAction("Index");

}

returnthis.View();

}

Note: in the code above, the custom event is named “Edit Customer.” The TrackEvent method sends data to Application Insights whenever it is called in the Edit method. The first parameter passed contains the specific data that we have established in the variable “properties,” which is just the customer’s id number, name, and a date/time stamp.

Figure 17

Add further telemetry

  1. Once you’ve added your code, press F5 to once again build and run your web app. This time, click on the Customers tab, then click on the Edit link next to a customer’s name. Change some bit of data, such as address, and save the record. Do this again for a second customer, then close the web app.

Figure 18

Edit a customer to launch custom event in Application Insights

  1. Once again, return to your browser with the Azure portal open, and refresh the FabrikamFiber.Web App Insight blade. Once it finishes, scroll down and you should now see that the “Custom events” tile has been updated, signifying that there are two new custom events that have been captured. Click on this tile, which will open the Custom events blade. Your screen should now resemble the following:

Figure 19

Custom telemetry captured and displayed in the Custom events blade

  1. You can now drill further into the data by clicking on the event name of our new custom event (“Edit Customer”), and this will open another custom events blade that is filtered on that particular event. Furthermore, you can now click on a specific instance of that custom event to see the details, including our custom data attributes that we added to the event:

Figure 20

Detailed information about a specific custom event

We’ve seen how to see how often specific events happen in our web app. As you can imagine, we could easily write code to log how often users perform any action we like. That helps us understand how our application is being used, and gives us a better idea of where we should focus our efforts in developing the app further.

Exercise 4: Publish the Web App and Monitor Events in Production

In this exercise, you will publish your web app to the local IIS server and monitor events. So far, we’ve only run it in debug mode – but of course, the real value of telemetry is to let us know what real users do with the app, and be aware of how it performs in live conditions.

  1. Right-click on the FabrikamFiber.Web project node in Solution Explorer and select Publish:

Figure 21

Prepare to publish the web app

  1. The default settings should be fine for publication of your web app to IIS. Note the path where the app is being published – this will be important in setting up the web site in IIS. Click on the Publish button.

Figure 22

Connection information in publish dialog

  1. Once Visual Studio has finished publishing the web app, you will need to create an appropriate site that maps to this location in IIS. So, open the IIS Manager in Windows Server and expand the tree at the left until you can see the list of sites. Right-click at the top of the list and select “Add Website.”

Figure 23

Add a web site to IIS

  1. Complete the Add Website dialog with the following information:

Figure 24

Fill in specifics for your web site where your web app will run

Note the physical path is the same as our publication path, and that the application pool need to be manually set to DefaultAppPool. Also note that a specific port has been selected.

  1. Once your web site is set up, you can browse directly to it from the IIS Manager. Click on the browse website link at the right:

Figure 25

Open your new web site

  1. This will open your familiar application, only now from the new location to which you have published it. Try editing another customer record, then navigate to the Reports tab that we’ve been avoiding up until now. You’ll generate an error that will look like this:

Figure 26

Error generated in web app

  1. Close the web app and return to your Azure portal. Refresh your FabrikamFiber.Web blade there, and now you will see a couple of interesting things:

Figure 27

New telemetry from published web app, including failure data

The custom events counter has gone up by one (because you edited another customer), and now the Failed Requests chart has some data in it. Click on this chart, and you’ll get the failure data in new blade to the right due to the error generated when you clicked on the reports tab.

  1. You can drill into the listed exceptions to get more detailed information about what went wrong. In this example, we probably don’t care too much about the error with fonts, even though that generated the highest number of errors. However, we do care about the two errors that have to do with our Reports tab. Try clicking on the “GET Reports/Employees” request, which will bring up a filtered blade for this common set of failures. Next, pick the most recent one (you may only have one) at the top of the Requests list at the bottom of the blade. This will open an even more granular blade that details this specific instance:

Figure 28

Drilling into failure telemetry

  1. You will now see something interesting on the GET Reports/Employees blade: the third section down, Calls to Remote Dependencies, has no data in it. This is because our published web app running in IIS is not being monitored at the server level. In order to get this telemetry data, we need to install the Application Insights Status Monitor.
  1. So, before we go further, let’s do exactly that. Download and run the Status Monitor installer (from the link in this step):