当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

angular-application-insights

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 皇甫展
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Angular Azure Application Insights implementation

Connect your Angular client-side to Microsofts Application Insights with this easy-to-use Module

Application Insights is an extensible Application Performance Management (APM) service for web developers on multiple platforms. Use it to monitor your live web application. It will automatically detect performance anomalies. It includes powerful analytics tools to help you diagnose issues and to understand what users actually do with your app.


Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training

Made with ❤️ by Trilon.io


Installation

Install & save the library to your package.json:

$ npm i -S @markpieszak/ng-application-insights

# yarn

$ yarn add @markpieszak/ng-application-insights

AppModule Setup

Now add ApplicationInsightsModule to your Angular Root AppModule:

// 1) Import the Application Insights module and the service provider
import { ApplicationInsightsModule, AppInsightsService } from '@markpieszak/ng-application-insights';

@NgModule({
  imports: [
    // 2) Add the Module to your imports
    ApplicationInsightsModule.forRoot({
      instrumentationKey: 'Your-Application-Insights-instrumentationKey'
    })
  ],
  providers: [ 
     // 3) Add AppInsightsService to your providers list
     AppInsightsService
  ]
})
export class YourRootModule { }

What if you don't know your instrumentationKey right away?

// Use instrumentationKeySetLater
ApplicationInsightsModule.forRoot({
  instrumentationKeySetLater: true // <--
})

// Then later in your Application somewhere
constructor(
  private appInsightsService: AppInsightsService
) {
  appInsightsService.config = {
    instrumentationKey: __env.APPINSIGHTS_INSTRUMENTATIONKEY // <-- set it later sometime
  }
  // then make sure to initialize and start-up app insights
  appInsightsService.init();
}

Usage

Through out your application you can now use the AppInsightsService class to fire off AppInsights functionality.

import { AppInsightsService } from '@markpieszak/ng-application-insights';

export class ShoppingCartComponent {
  public cart: [];
  constructor(private appInsightsService: AppInsightsService) {}

  saveCart(user) {
    // MOCK Example of sending a trackEvent()
    // Saving some sample user & cart product data
    this.appInsightsService.trackEvent('ShoppingCart Saved', { 'user': user.id, 'cart': cart.id });
  }
}

Usage with Aspnetcore-Angular2-Universal repo or JavaScriptServices ( apps w/ Server-side rendering )

ie: https://github.com/TrilonIO/aspnetcore-angular-universal

First, make sure you are only importing the library & the server within the browser-app.module NgModule (do not share it within a common one, as the server isn't able to use this library during it's server-renders).

Secondly, make sure you are calling the injector to get AppInsightsService during ngOnInit:

export class HomeComponent implements OnInit {

  private AIService: AppInsightsService;
  private isBrowser: boolean;

  constructor(@Inject(PLATFORM_ID) private platformId, private injector: Injector) {
    this.isBrowser = isPlatformBrowser(this.platformId);
  }

  ngOnInit() { // <-- 
    if (this.isBrowser) { // <-- only run if isBrowser
      this.AIService = <AppInsightsService>this.injector.get(AppInsightsService); // <-- using the Injector, get the Service
      this.AIService.trackEvent('Testing', { 'user': 'me' });
    } 
  }
}

API

You can see a list of the API here: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md#class-appinsights

AppInsightsService.trackEvent()
AppInsightsService.startTrackEvent()
AppInsightsService.stopTrackEvent()
AppInsightsService.trackPageView()
AppInsightsService.startTrackPage()
AppInsightsService.stopTrackPage()
AppInsightsService.trackMetric()
AppInsightsService.trackException()
AppInsightsService.trackTrace()
AppInsightsService.trackDependency()
AppInsightsService.flush()
AppInsightsService.setAuthenticatedUserContext()
AppInsightsService.clearAuthenticatedUserContext()

How to Contribute?

ng-Application-Insights Development

To generate all *.js, *.js.map and *.d.ts files:

npm run build

To lint all *.ts files:

npm run lint

License

Copyright (c) 2016-2021 Mark Pieszak


Trilon - JavaScript, ASP.NET, Node, NestJS - Consulting | Training | Development

Check out Trilon.io for more info!

Contact us at hello@trilon.io, and let's talk about your projects needs.

Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training

Follow Trilon online

Twitter: @Trilon_io

 相关资料
  • 让我们编写一个示例,它将使用基于Annotation的配置实现建议。 为此,让我们使用一个可用的Eclipse IDE,并使用以下步骤创建一个Spring应用程序。 步 描述 1 更新项目Student根据Spring AOP - Application章节创建。 2 更新bean配置并运行应用程序,如下所述。 以下是Logging.java文件的内容。 这实际上是方面模块的一个示例,它定义了在各

  • 在本章中,我们将使用Spring AOP Framework编写实际的AOP应用程序。 在开始使用Spring-WS框架编写第一个示例之前,必须确保已按照Spring Web Services - Environment Setup一章中的说明正确设置Spring AOP环境。 现在,继续编写一个简单的控制台Spring AOP应用程序,它将演示AOP概念。 创建一个项目 (Create a Pr

  • 以下是申请的子类型 - activemessage andrew-inset applefile atomicmail batch-SMTP beep+xml cals-1840 cnrp+xml commonground cpl+xml cybercash dca-rft dec-dx dicom dvcs EDI-Consent EDIFACT eshop font-tdpfr http hy

  • 本教程中几乎所有示例都包含以下文件 - 配置文件(XML文件) Tasklet /处理器(Java类) 带有setter和getter的Java类(Java类(bean)) Mapper类(Java类) 启动类(Java类) 配置文件 配置文件(XML)包含以下内容 - job和step定义。 豆类定义readers和writers 。 JobLauncher,JobRepository,Tran

  • Website �� contributte.org | Contact ����‍�� f3l1x.io | Twitter �� @contributte Usage To install latest version of contributte/application use Composer. composer install contributte/application Docume

  • Application Insights Java SDK 是 Java Web 服务所采用的最早的原型,请点击 AppInsights-Home 获取更多信息。