How to integrate Application Insights monitoring in your VSTS extension

  • Article

Monitoring your team services extension is an important DevOps practice. In this article we’ll demonstrate how to integrate Application Insights telemetry in your extension by using our new Telemetry Client for Team Services extension.

Prerequisite – You need an Azure subscription and an Application Insights resource.

Step 1: Required modules

Reference two npm modules dependencies inside your extension package.json.
ai-package

Step 2: Automatic import of SDK during package creation

Add an entry in your extension manifest to import the JavaScript SDK when we package of the extension.
ai-manifest

The module files will be imported to the lib folder.

Step 3: Reference the JavaScript SDK

Reference the SDK in your extension HTML file.
ai-sdk

Step 4: Create the telemetry client settings

Create a TelemetryClientSettings.ts configuration file in your src folder.

telemetryclientsettings.ts

key your Application Insights Instrumentation key required
extensioncontext the name of the context of your extension, e.g the name of the extension required
disableTelemetry true or false, default is false, to disable the telemetry tracking optional
disableAjaxTracking true or false, default is false, to not track ajax dependencies optional
enableDebug true or false, default is false, to enable debug mode of application insight optional

Step 5: Add telemetry code to your extension

Add code to your extension to send telemetry data to Application Insights.

Here’s an example:

reference AI extension

[1] Import modules of the TelemetryClient and the telemetry client settings configuration

[2] Call the getClient method to send telemetry data.

Step 6: Build the TelemetryClient with your code

We need to import the code for the TelemetryClient and Settings class in our extension and construct a single file. See the How to create or upgrade your team services extension in 4 steps , step 2, for an overview of the minification process with webpack.

Here an example of the minified code of the extension once is packaged:
ai-code

Notice the telemetryclient and telemetryClientSettings class at the end of the above code.

References