How to integrate Application Insights monitoring in your VSTS extension


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

Comments (2)

  1. Hello,

    I was wondering … how can I (as a consumer of TFS extensions in an on premise environment) make sure that any extensions I install in TFS on premise are not leaking any sensitive data into app insights?

    1. mikaelkrief says:

      Hello,
      You can capture the traffic being sent from the browser to Application Insights endpoints using fiddler or web developer tools (F12) by tracking the requests made to dc.services.visualstudio.com, here is a list of Application Insights IP addresses and URLs https://docs.microsoft.com/en-us/azure/application-insights/app-insights-ip-addresses.

Skip to main content