Loupe - Log - Monitor - Resolve
Loupe / Developer's Guide / For JavaScript / Angular / Developer's Reference - Angular - Error Handling
In This Topic
    Developer's Reference - Angular - Error Handling
    In This Topic
     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';
    export class MyErrorHandler extends LoupeErrorHandler {
      constructor(private readonly loupe: LoupeService) {
      handleError(error: any) {
        // Use built-in behavior by including this line
        // 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:

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

    See Also