Microsoft Application Insights SDK for JavaScript
TypeScript JavaScript HTML C# Other
Permalink
Failed to load latest commit information.
.vscode resolve pr comments Aug 10, 2017
AISKU Updating package versions to final versions for M1 Jun 25, 2018
AppInsightsChannel Address PR comments, update packages published Jun 29, 2018
AppInsightsCommon Address PR comments, update packages published Jun 29, 2018
ApplicationInsights Address PR comments, update packages published Jun 29, 2018
JavaScript Get a single test to run in channel Jun 13, 2018
dist Checking in files for 1.0.18 (#618) Jun 6, 2018
scripts Update dist v1.0.12 Aug 29, 2017
snippet snippet script Aug 2, 2017
.gitattributes adding tests and test build targets Apr 10, 2015
.gitignore Update Jun 7, 2018
.npmignore Exclude bower.json from being packaged #553 Dec 5, 2017
.travis.yml Enable Travis-CI Oct 26, 2017
API-reference.md Update API-reference.md May 29, 2018
Common.props adding tests and test build targets Apr 10, 2015
EnlistmentRoot.marker adding tests and test build targets Apr 10, 2015
Global.props version update 1.0.17 -> 1.0.18 (#605) May 17, 2018
LICENSE Update LICENSE Aug 26, 2016
NuGet.config Merge remote-tracking branch 'origin/master' into albulank/module May 26, 2016
NuGet.exe adding tests and test build targets Apr 10, 2015
NuGet.targets adding tests and test build targets Apr 10, 2015
Package.targets Enable signing of NuGet Packages by MicroBuild (#603) May 15, 2018
README.md update js sdk snippet Nov 30, 2017
ThirdPartyNotices.txt adding third party notices Nov 18, 2015
bower.json version update 1.0.17 -> 1.0.18 (#605) May 17, 2018
gruntfile.js Remove coreSDK from this repo as it is in a new repo (#631) Jul 12, 2018
package.json Fix package.json CRLF settings May 23, 2018
tsconfig.json Inline sources in source map Aug 31, 2017

README.md

Microsoft Application Insights JavaScript SDK

Build Status npm version

Application Insights tells you about your app's performance and usage. By adding a few lines of code to your web pages, you get data about how many users you have, which pages are most popular, how fast pages load, whether they throw exceptions, and more. And you can add code to track more detailed user activity.

Get started

To use this SDK, you'll need a subscription to Microsoft Azure. Application Insights has a free subscription option. In the Azure Preview Portal, create new or open an existing Application Insights resource.

Initializing Application Insights JS SDK script

There are several ways to initialize Aplication Insights.

Dynamic loading. JS script tag is inserted in the head of the page. This is the recommended approach as our CDN is getting frequent updates. Static loading. You are responsible for including JS script tag or bundling the script with your other scripts.
Using initialization snippet Dynamic loading with snippet This is default approach used in a new ASP.NET application created in Visual Studio. Use this for MVC applications. Host AI JS SDK and initialize statically. Cordova applications where you would like to embed scripts into your application for faster loading is an example of when you would use this approach.
Using module import Dynamic loading using module import. This is the recommended approach for modern modular applications. TBD

Use JS snippet and initialize dynamically (download full Application Insights script from CDN)

Use this method for an MVC application. Get "code to monitor my web pages" from the Quick Start page, and insert it in the head of your web pages. Application Insights script will be downloaded from CDN or you can override the script hosting location by specifying url parameter in the config.

<script type="text/javascript">
    var appInsights=window.appInsights||function(a){
        function b(a){c[a]=function(){var b=arguments;c.queue.push(function(){c[a].apply(c,b)})}}var c={config:a},d=document,e=window;setTimeout(function(){var b=d.createElement("script");b.src=a.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js",d.getElementsByTagName("script")[0].parentNode.appendChild(b)});try{c.cookie=d.cookie}catch(a){}c.queue=[];for(var f=["Event","Exception","Metric","PageView","Trace","Dependency"];f.length;)b("track"+f.pop());if(b("setAuthenticatedUserContext"),b("clearAuthenticatedUserContext"),b("startTrackEvent"),b("stopTrackEvent"),b("startTrackPage"),b("stopTrackPage"),b("flush"),!a.disableExceptionTracking){f="onerror",b("_"+f);var g=e[f];e[f]=function(a,b,d,e,h){var i=g&&g(a,b,d,e,h);return!0!==i&&c["_"+f](a,b,d,e,h),i}}return c
    }({
        instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"
    });
    
    window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView();
</script>

Learn more.

Import as a module and initialize dynamically (download full Application Insights script from CDN)

Use this method for a modern JS application that is using modules. Just like in snippet scenario the full script will be downloaded from CDN.

  • Obtain instrumentation key from your Application Insights resource

  • Install applicationinsights-js with npm
    npm install applicationinsights-js

  • Import and call downloadAndSetup to initialize it. You can override the script hosting location by specifying url parameter in the config

/* import AppInsights */
import {AppInsights} from "applicationinsights-js"

/* Call downloadAndSetup to download full ApplicationInsights script from CDN and initialize it with instrumentation key */
AppInsights.downloadAndSetup({ instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx" });

/* example: track page view */
AppInsights.trackPageView(
    "FirstPage", /* (optional) page name */
    null, /* (optional) page url if available */
    { prop1: "prop1", prop2: "prop2" }, /* (optional) dimension dictionary */
    { measurement1: 1 }, /* (optional) metric dictionary */
    123 /* page view duration in milliseconds */
);

/* example: track event */
AppInsights.trackEvent("TestEvent", { prop1: "prop1", prop2: "prop2" }, { measurement1: 1 });

Include AI JS SDK script and initialize statically

Use this approach if you would like to host AI JS SDK script on your endpoint or bundle it with other scripts. One popular example is Cordova applications (see this blog post. After JS script has loaded, include the following snippet to initialize Application Insights:

<!-- the snippet below assumes that JS SDK script has already loaded -->
<script type="text/javascript" src="/pathToAIJSSDK.js"></script>   
<script type="text/javascript">   
    var snippet = {   
        config: {   
            instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"   
        }   
    };   
    var init = new Microsoft.ApplicationInsights.Initialization(snippet);   
    var appInsights = init.loadAppInsights();   
    appInsights.trackPageView();   
</script>

API reference

Data on users, page views, and exceptions are provided out of the box. You can write your own code to track specific events and metrics.

See:

Links

Build and run check-in tests:

  • Build

    • npm install -g grunt-cli
    • npm install
    • grunt or Ctrl+Shift+B in VisualStudio Code
    • grunt module to build the npm module
    • compiled files are dropped into a /bundle folder
  • Run check-in tests

    • grunt test to build and run tests
    • You can also open JavaScriptSDK.Tests/Selenium/Tests.html directly in your browser to debug failing tests.

To debug tests in PhantomJS use a remote debugger: phantomjs.exe --remote-debugger-port=9000 \JavaScript\JavaScriptSDK.Tests\phantomJS.debug.js. If webkit console isn't working execute the following script in a browser's console: function isEnterKey(event) { return (event.keyCode !== 229 && event.keyIdentifier === "Enter") || event.keyCode === 13; }.

Contributing

We strongly welcome and encourage contributions to this project. Please read the contributor's guide located in the ApplicationInsights-Home repository. If making a large change we request that you open an issue first. We follow the Git Flow approach to branching.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.