How to catch errors that happen when showing an Angular dynamic component?

Question

I have a component to display notifications. It has a ViewChild that has a ViewContainerRef.

Based on the type of notification, I display different components in place of that viewChild. This is the code to create and add the component based on the notification type:

private loadInappNotificationItem(messageType: MessageType): void {
  const inappNotificationItemComponent: Type<IInappNotificationItemComponent>
    = this.inappNotificationItemMapping.get(messageType);
  if (inappNotificationItemComponent === undefined) {
    this.hasCustomComponent = false;
    return;
  }

  const componentFactory: ComponentFactory<IInappNotificationItemComponent> =
    this.componentFactoryResolver.resolveComponentFactory(inappNotificationItemComponent);

  this.hasCustomComponent = true;
  const viewContainerRef: ViewContainerRef = this.inappNotificationItemHost.viewContainerRef;
  viewContainerRef.clear();

  const componentRef: ComponentRef<IInappNotificationItemComponent> =
    viewContainerRef.createComponent(componentFactory);

  const component: IInappNotificationItemComponent = componentRef.instance;
  component.notification = this.notification;
}

This works as intended, but now i'd like to show a fallback component, if anything goes bad when displaying the notification component (for example when the structure of the notification property is wrong).

For this i'd need to be able to register a function somewhere, that is called when displaying the viewChild failed for some reason, so that i can then remove it and display a fallback.

I know that i can register a custom ErrorHandler on the Module that contains the component, and i can catch the Errors i'd like to catch there, but in that handler i have no reference to the notification component whose viewChild failed to display.

UPDATE:

I was able to write a class-decorator that will catch every error in every method of my component class, which in turn allowed me to display the fallback when anything in my component class throws an error. Sure, i'd need to decorate all custom components with this, but that's ok, as long as i only need to add this one decorator. (See my my partial answer)

This however did not help with Errors that originate from the template! For example, when accessing a property in the custom components template, that doesn't exist. So, another question that might help solve this one is: how do i catch runtime template errors IN my component (not globally or on module level, as i don't have a reference to the broken component there)

Answer 1

@Neutrosider If you refere to random js erros generated by your app code what I would do is eighther wrap the angular hooks from those components into try {} catch statements but this does not look nice. Or create some typescript custom annotations which will act something like this

interface ErrorHandledComponent {
    isInErrorState: boolean;
}

export function HandleComponentErrors() {
    return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const oriiginalHook = target[propertyKey].bind(target);
        target[propertyKey] = (...args) => {
            try {
                oriiginalHook(...args)
            } catch (e) {
                if (isDevMode) {
                    console.error(e);
                }
                target.isInErrorState = true;
            }
        }
    }
}
@Component({
....
template: `<ng-container *ngIf="!isInErrorState">...content<ng-container>
<ng-container *ngIf="isInErrorState">...error content<ng-container>`
})
export class CumponentWithErrorHandling implements {
   isInErrorState: boolean;
   @HandleComponentErrors()
   ngOnInit() {
   ...your custom code
   }
}

And basicly annotate all the angular hooks if that's what you are trying to achieve then you will have a nice render for a js error inside your code implementation or maybe dispatch the error further or log it to your backend. I hope it helps