Developer's Reference - Angular

Developer's Reference - Angular - Error Handling

In This Topic

Using the Loupe Error Handler
Creating a Custom Error Handler
See Also

Using the Loupe Error Handler

The Loupe Agent for Angular includes an error handler that will record extended error information into the log automatically. To use it, modify your app.module.ts and add the Loupe error handler as a provider for the Angular ErrorHandler, like this:

  providers: [
    { provide: ErrorHandler, useClass: LoupeErrorHandler }
  ]

If you want to create your own custom error handler, see below.

Creating a Custom Error Handler

While the Loupe Angular package provides a default error handler for you to use as a provider, you can of course, create your own handler for this purpose. Create your own Error Handler class by extending ErrorHandler and define your own custom behavior to log to Loupe:

import { Injectable } from '@angular/core';
import { LoupeErrorHandler } from '@gibraltarsoftware/loupe-angular';
@Injectable()
export class MyErrorHandler extends LoupeErrorHandler {
 
  constructor(private readonly loupe: LoupeService) {
      super();
  }
  handleError(error: any) {
    // Use built-in behavior by including this line
    super.handleError(error);
    // Use custom behavior here
    this.loupe.recordException(error, null, 'Uncaught Exception');
  }
}

The recordException method wraps up some intelligence to extract error details and a stack trace (if available) from the supplied error. The supplied LoupeErrorHandler identifies different error types and Once defined, you provide the handler in your providers array in AppModule:

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
    ])
  ],
  providers: [
    { provide: ErrorHandler, useClass: MyErrorHandler }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }