While working inside Angular (Angular 4, 5), if a ponent raises Error (TypeError or null or undefined error or so), whole application breaks onward.

How can we deal with this, to catch errors on ponent level and possibly show a fallback UI, like React16 does using Error Boundaries.

While working inside Angular (Angular 4, 5), if a ponent raises Error (TypeError or null or undefined error or so), whole application breaks onward.

How can we deal with this, to catch errors on ponent level and possibly show a fallback UI, like React16 does using Error Boundaries.

• javascript
• angular
• reactjs

Share Improve this question Follow edited Jan 22, 2018 at 11:34 R. Richards 25.2k1010 gold badges6666 silver badges6565 bronze badges asked Jan 22, 2018 at 11:32 abdul-wahababdul-wahab 2,27233 gold badges2323 silver badges3737 bronze badges 4

• Currently there is support to override the global implementation of the ErrorHandler. You could try to instantiate a provider object that overrides the default implementation at ponent level using the providers property of the Component decorator. – Jota.Toledo Commented Jan 22, 2018 at 11:45
• I am already overriding global ErrorHandler. If it can be provided at ponent level, it'd be great. Are you sure it's possible? – abdul-wahab Commented Jan 22, 2018 at 11:47
• Probably too broad for what you'd like to have, but overriding the ExceptionHandler by your own is a possibility. See this article for more detailed usage. – Tomas Varga Commented Jan 22, 2018 at 11:49
• Doesnt seem to be possible atm plnkr.co/edit/oZPbmFoqURuQQLqvpjKw?p=info – Jota.Toledo Commented Jan 22, 2018 at 13:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

I would approach it by handling the error at Component level and have a service that listens to any errors happening at Component or Service level. Ex:

1. Throw the error from the service
2. catch the error in ponent
3. Handle the error, process it and send the Error event with details to ErrorService.
4. You can have a app level ponent "errorBannerComponent" which takes input from ErrorService and paint your UI.
5. As soon as the error is received in ErrorService, The errorBannerComponent should display the error on screen.

Hope it helps.

Also By default, Angular es with its own ErrorHandler that intercepts all the Errors that happen in our app and logs them to the console, preventing the app from crashing. We can modify this default behavior by creating a new class that implements the ErrorHandler:

You can find more details and example here:

As the proposed solutions are rather dull. I tried to recreate it myself. The easiest solution would be to provide a module scoped custom ErrorHandler class. Thanks to this, you could even create a multiple different ErrorBoundaries.

My proposed solution can be seen here: https://stackblitz./edit/angular-ivy-brb143?file=src/app/widget/widget.module.ts

What is really important for this solution to work (atleast it didn't work otherwise for me). Was to provide the custom error handler as a part of a module rather than a ponent directly.

The important bits from the solutions:

module:

/**
 * This is really imporant as this allows us to provide a module scoped ErrorHandler
 */
@NgModule({
  imports: [CommonModule],
  declarations: [WidgetComponent],
  providers: [{ provide: ErrorHandler, useClass: WidgetErrorHandler }],
  exports: [WidgetComponent],
})
export class WidgetModule {}

ponent where we can throw, and catch error

@Component({
  selector: 'app-widget',
  templateUrl: './widget.ponent.html',
  styleUrls: ['./widget.ponent.css'],
})
export class WidgetComponent implements OnInit {
  constructor(@Inject(ErrorHandler) public widgetError: WidgetErrorHandler) {}

  ngOnInit() {
    this.widgetError.isError$.subscribe((error) =>
      console.log('ponent can act on error: ', error)
    );
  }

  public handleThrowErrorClick(): void {
    throw Error('Button clicked');
  }
}

and the handler iself

@Injectable()
export class WidgetErrorHandler implements ErrorHandler {
  public isError$: Subject<Error | any> = new Subject();

  handleError(error) {
    console.log('Intercepted error', error);
    this.isError$.next(error);
  }
}