Angular2 Application becomes unresponsive after encountering exception in typescript file

Question

I have created a single page application using Angular2 framework. I have used typescript for creating Angular2 components.

While running the app,i am getting null value for a variable(x) in the AppComponent mentioned below.

When exception occurs, it stops the application execution without proceeding to the next line eventhough i have handled the error using Custom Errorhandler.

Please let me know if there is any solution to catch(without try/catch) the exception without blocking the application.

Error Handler service:

import { ErrorHandler, Injectable} from '@angular/core';
@Injectable()    
export class CustomErrorHandler implements ErrorHandler {    
  constructor() { }

  handleError(error) {
     console.log('Handling the error');
  }

}

App Module:

import { NgModule, ApplicationRef, ErrorHandler } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { CustomErrorHandler } from './error-handler';
import { ServicesModule } from './services';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: ErrorHandler, 
      useClass: CustomErrorHandler
    }
  ]
})
export class AppModule { }

App Component:

import {Component} from '@angular2/core';

@Component({
selector:'my-app',
template:'<p>Hello {{name}}</p>'
});

export class AppComponent{

constructor(){
}

OnInit(){
 let x:any=getDataFromServer(); //assume x got data from the server
  let z:any= x.data.value;  //error occurs if x is null
  let name="Hello";
}

}

Thanks in advance.

can you add code what you have tried so far, Please go through [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask). — Madhu Ranjan, Jul 13 '17 at 19:10
@MadhuRanjan thanks for your reply. I have added the sample code. Please let me know if there is any solution for my issue. — Ashok, Jul 13 '17 at 20:05

score 2 · Answer 1 · answered Jul 13 '17 at 20:10

In this case exception is thrown from angular lifecycle listener OnInit, so it aborts angular component creation sequence and breaks application completely. ErrorHandler does not help in this case, most often it is used to handle observable errors or unhandled promise rejects.

Günter Zöchbauer · Answer 2 · 2020-06-10T19:33:16.080

Use an exception handler like

@Injectable()
class MyExceptionHandler implements ErrorHandler {
  constructor(private appRef:ApplicationRef) {}
  handleError(error, stackTrace = null, reason = null) {
    // do something with the exception
    this.appRef.tick();
  }
}

when an exception occurs the following code in the component isn't executed and also no change detection is happening anymore. A custom error handler is meant to allow you to report the error to a server, but it is not meant to centralize exception handling.

If an exception in your application is expected, you need to handle it as close as possible to where it happened. You can see your application as failed when an exception reaches your custom error handler. You should instruct the user to reload the page to get the application back in a valid state.

The above workaround allows you to bring back the application to a working state so you are able to show the instructions for the user in Angular code.

See also Angular/Angular2 data binding not working after catching Javascript error using custom errorhandler

In Angular 2 this syntax was updated from `ExceptionHandler` to `ErrorHandler` and `call` to `handleError`. https://stackoverflow.com/a/35239028/733092 — Noumenon, Jun 10 '20 at 18:04

Angular2 Application becomes unresponsive after encountering exception in typescript file

2 Answers2