Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/goenning/ng-appinsights
Connect your Angular applications to Azure Application Insights to automatically track dependency calls, performance metrics and error logging. Use custom events to track anything you want!
https://github.com/goenning/ng-appinsights
angular appinsights application-insights azure microsoft-application-insights
Last synced: 18 days ago
JSON representation
Connect your Angular applications to Azure Application Insights to automatically track dependency calls, performance metrics and error logging. Use custom events to track anything you want!
- Host: GitHub
- URL: https://github.com/goenning/ng-appinsights
- Owner: goenning
- License: mit
- Created: 2019-10-21T07:37:11.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-13T10:45:31.000Z (almost 2 years ago)
- Last Synced: 2024-10-10T05:37:34.832Z (about 1 month ago)
- Topics: angular, appinsights, application-insights, azure, microsoft-application-insights
- Language: TypeScript
- Homepage:
- Size: 1.12 MB
- Stars: 2
- Watchers: 3
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng-appinsights
A simple wrapper of Application Insights JS Library for Angular applications.
Supported features are:
- Simple setup (no modules required)
- Deferred Initialization
- Built-in Global Error Handler
## Installation
Using npm:
```bash
npm install --save ng-appinsights
```
## Usage
To initialize Application Insights, add the following to your entry point module (usually `app.module.ts`):
```typescript
import { APP_INSIGHTS_CONFIG } from 'ng-appinsights';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
{
provide: APP_INSIGHTS_CONFIG,
useValue: {
instrumentationKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx',
enableAutoRouteTracking: true,
// Visit https://github.com/microsoft/ApplicationInsights-JS to know all possible configurations.
}
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Import the `AppInsightsService` into your components and use the available tracking methods.
```typescript
import { Component } from '@angular/core';
import { AppInsightsService } from 'ng-appinsights';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
count = 0;
constructor(private appInsights: AppInsightsService) {
}
increment(): void {
this.count++;
this.appInsights.trackEvent('increment', { count: this.count });
}
decrement(): void {
this.count--;
this.appInsights.trackEvent('decrement', { count: this.count });
}
}
```
## Deferred Initialization
You may also skip the configuration on the Module and do it using the Service at any time.
```typescript
import { Component } from '@angular/core';
import { AppInsightsService } from 'ng-appinsights';
@Component({
selector: 'app-root',
templateUrl: './my.component.html'
})
export class MyComponent {
constructor(private appInsights: AppInsightsService) {
}
init(): void {
this.appInsights.init({
instrumentationKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx',
});
}
}
```
## Global Error Handler
You may also include the built-in Error Handler which will automatically send exception events to AI for every errors that occurs inside your application.
```typescript
import { AppInsightsErrorHandler } from 'ng-appinsights';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
{ provide: ErrorHandler, useClass: AppInsightsErrorHandler },
],
bootstrap: [AppComponent]
})
export class AppModule { }
```