error details in angular

Products

• CA App Experience Analytics

Issue/Introduction

 

 

The application tested uses Angular version 11.0.6.

When trying to force JS errors, the details of the error are not shown.

Environment

Release : 20.2

Component :

Cause

 

 

Browser agent has an error handler to track the errors on the window of the browser. So, an error handler has to be used in Angular for handling errors. If no handler is used in Angular app, the error events are not triggered at browser agent side, so the errors are not tracked. 

For Javascript, HTML, etc.. the error handler is present by default so nothing extra is needed in those apps.

Whereas in Angular, it is not mandatory to configure an error handler for the app itself, but must be configured for browser agent to monitor errors

 

 

 

Resolution

 

 

 

Therefore Angular apps need to have an error handler added to them:

This is a comparison of the app.module.ts with and without error handler added:

Before adding error handler:

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

 

With error handler added:

 

import { HttpClientModule } from '@angular/common/http';
import { NgModule, ErrorHandler, NgZone, Inject, forwardRef, Injectable } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

export class AppGlobalErrorhandler implements ErrorHandler {
  
  handleError(error: any) {
      throw Error(error);
    }

}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule
  ],
  providers: [
    {provide: ErrorHandler, useClass: AppGlobalErrorhandler}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}