search cancel

error details in angular

book

Article ID: 215250

calendar_today

Updated On:

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.

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

 

 

 

Environment

Release : 20.2

Component :

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 {
}