Repository files navigation

Angular Plugin for the Application Insights Javascript SDK, enables the following:

Note: Angular plugin is NOT es3 compatible

• Tracking of router changes
• Tracking uncaught exceptions

Angular Plugin for the Application Insights Javascript SDK

Install npm package:

npm install @microsoft/applicationinsights-angularplugin-js

Set up an instance of Application Insights in the entry component in your app:

import{Component}from'@angular/core';import{ApplicationInsights}from'@microsoft/applicationinsights-web';import{AngularPlugin}from'@microsoft/applicationinsights-angularplugin-js';import{Router}from'@angular/router';@Component({selector:'app-root',templateUrl:'./app.component.html',styleUrls:['./app.component.css']})exportclassAppComponent{constructor(privaterouter:Router){varangularPlugin=newAngularPlugin();constappInsights=newApplicationInsights({config:{instrumentationKey:'YOUR_INSTRUMENTATION_KEY_GOES_HERE',extensions:[angularPlugin],extensionConfig:{[angularPlugin.identifier]:{router:this.router}}}});appInsights.loadAppInsights();}}

To track uncaught exceptions, setup ApplicationinsightsAngularpluginErrorService inapp.module.ts:

import{ApplicationinsightsAngularpluginErrorService}from'@microsoft/applicationinsights-angularplugin-js';@NgModule({  ...providers:[{provide:ErrorHandler,useClass:ApplicationinsightsAngularpluginErrorService}]...})exportclassAppModule{}

To chain more custom error handlers, create custom error handlers that implement IErrorService:

import{IErrorService}from'@microsoft/applicationinsights-angularplugin-js';exportclassCustomErrorHandlerimplementsIErrorService{handleError(error:any){        ...}}

And pass errorServices array through extensionConfig:

extensionConfig:{[angularPlugin.identifier]:{router:this.router,errorServices:[newCustomErrorHandler()]}}

This project welcomes contributions and suggestions. Most contributions require you to agree to aContributor License Agreement (CLA) declaring that you have the right to, and actually do, grant usthe rights to use your contribution. For details, visithttps://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to providea CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructionsprovided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted theMicrosoft Open Source Code of Conduct.For more information see theCode of Conduct FAQ orcontactopencode@microsoft.com with any additional questions or comments.

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsofttrademarks or logos is subject to and must followMicrosoft's Trademark & Brand Guidelines.Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.Any use of third-party trademarks or logos are subject to those third-party's policies.

Angular plugin is using newer version of typescript, make sure to build and test before you create a pull request.Navigate to the root folder of Angular plugin, under /applicationinsights-angularplugin-js:

npminstallnpmrunbuildnpmruntest

MIT