Using Microsoft Application Insights in an MVC application

This article is also available on the Microsoft TechNet Wiki.

This article also won a silver medal in The Microsoft TechNet Guru Awards – April 2015.

This article is also the TechNet Featured Article for May 2015.

Microsoft Application Insights is a new service in Microsoft Azure. It is currently in free preview and it is available in the new Portal.

With Application Insights you can view telemetry data from your resources, find problems with your deployed apps and improve availability. It is easy to configure, even for the novice.

This wiki article will show you how to use Application Insights within an MVC web application.

Prerequisites

Application Insights Tools

Before we create our MVC project we need to verify we have the correct version of the Application Insights Tools.

Open Visual Studio 2013.

Click on Tools > Extensions and Updates.

01

The Extensions and Updates dialog window will appear. Click Installed on the left hand menu.

Find Application Insights Tools for Visual Studio near the top of the list. Click on the package and confirm the Version number is 2.4 or higher.

02

NOTE: If you have version 1.3.2 installed then this is the deprecated package for working with Application Insights inside Visual Studio Online. To upgrade to the latest SDK, make sure you have Visual Studio 2013 Update 3 (or later).

Click the Close button to close the Extensions and Updates dialog window.

Create Project

Click File > New > Project. The New Project dialog box appears.

Click Visual C# under Templates and select Web. The Add Application Insights to Project check box will be visible on the right side of the dialog box.

NOTE: For this example I am using Visual C# and a web project. However, Application Insights also works with Store Apps templates, specifically Windows Apps and Windows Phone Apps. It does not currently support Universal Apps. As well, Application Insights also works with the corresponding Visual Basic project types.

03

NOTE: If Application Insights is unavailable, make sure you have Visual Studio 2013 Update 3 (or later), that the tools exist under Extensions and Updates, and that you have selected a valid project template.

Click the Add Application Insights to Project check box. The Sign in to Visual Studio dialog box will appear. Enter your credentials and click Continue.

04

NOTE: Signing in is a two-step process. First, your email will be verified. Then the Sign in to your Microsoft account dialog box will appear. Enter your Password and click Sign in to finish the process.

Once your account has been verified the Add Application Insights to Project check box will become checked and your Azure account information will appear. As well, the Send telemetry to list will also be available,

05

The Use different account link allows you to switch from the currently logged in Azure account to another.

The Send telemetry to field details which Application Insights resource will house the telemetry data created by this MVC web application. The list defaults to creating an Application Insights resource based on the name of the project inside of a default resource group. The paragraph below the Send telemetry to list details exactly what will happen.

Clicking the Send telemetry to list will display all available Application Insights resources for this subscription. (Please see the following article for information on how to create an Application Insights resource: http://social.technet.microsoft.com/wiki/contents/articles/30264.creating-a-microsoft-application-insights-resource.aspx)

Selecting an Application Insights resource that is already created will update the text below the list accordingly.

06

Clicking the Configure Settings link will raise the Configuration Settings for Application Insights dialog box. This dialog box allows for more fine grain control of both the Resource Group and Application Insights Resource settings, For example, if I wanted to continue using an existing Resource Group but needed to create a new Application Insights Resource based on the project name then I could do the following:

07

Once the Application Insights settings are finalized, give the project a Name and click OK.

On the second screen select the MVC project template. Make sure the Host in the Cloud check box is unchecked.

08

Click OK.

The project will be provisioned and the Application Insights package will be added to the project. To confirm that Application Insights exists in the project an ApplicationInsights.config file will now be available in the project’s Solution Explorer. As well, the References folder will house the appropriate files.

Existing Project

Application Insights can also be added to existing web or store applications.

Open a project you wish to add Application Insights to in Visual Studio 2013.

Right click the project name within the Solution Explorer and select Add Application Insights Telemetry.

09

The Add Application Insights to Project dialog box will appear. It contains all of the same settings fields as the one in the Create New project section.

10

Click the Add Application Insights to Project button once the settings are finalized. The Application Insights package will be added as if it were a new project.

Run Project

Hit F5 to run the default MVC application in the browser.

Notice that the Application Insights counter appears in the Visual Studio toolbar. As you click through the different pages of the default application the counter will rise. This is showing the developer the number of telemetry events being sent to the defined Application Insights resource. A toast message will also appear on the first time it is run containing a link to your configured Application Insights Resource in Microsoft Azure.

11

View Telemetry Data

Now that the telemetry data has been pushed to the Azure Portal it is time to view the results. There are three ways this can be done:

  • Click the Open Application Insights link in the Toast message which appears upon first running the application.
  • Right click the project name and select Open Application Insights.
  • Expand the ApplicationInsights.config file and double click the {Application Insights resource name} Overview file.

12

Once the Azure Preview Portal page appears sign in to Microsoft Azure.

Locate your Application Insights resource and open it.

The Application Health section will be at the top of the resource blade and the generated data from the project will appear in the Overview timeline charts.

Click one of the SERVER RESPONSE TIME, BROWSER PAGE LOAD TIME, or SERVER REQUESTS chart panes to launch the blade containing its metrics. You can continue to drill down further within each blade to retrieve more granular data.

13

NOTE: It may take a few minutes for data to appear. Be patient and refresh the page occasionally. If none appears then check your settings and re-run the project to generate new events.

Conclusion

As you can see from this article adding Microsoft Application Insights to your web projects is easy to do. The service provides in-depth metrics for your deployed applications allowing you to find performance issues or to diagnose problems quickly.

NOTE: Since Application Insights is in preview mode information in this document may change in the future.

See Also

Advertisements

About Ken Cenerelli
I am a Programmer Writer, .NET Developer, Microsoft MVP - Visual Studio and Development Technologies, Public Speaker, Blogger, and Microsoft Azure Nerd. I blog regularly at kencenerelli.wordpress.com and can be found on Twitter via @KenCenerelli.

5 Responses to Using Microsoft Application Insights in an MVC application

  1. Pingback: 2015 year in review | Ken Cenerelli

  2. Pingback: TechNet Featured Article for May 2015 | Ken Cenerelli

  3. Pingback: Microsoft Azure Technical Guru – April 2015 | Ken Cenerelli

  4. Pingback: Custom Telemetry Events with TrackEvent in Microsoft Application Insights | Ken Cenerelli

  5. Pingback: 2016 Year in Review | Ken Cenerelli

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: