How to detect if error happened in template in angular?

Question

I am working on global error handler in angular and requirement of my project is also to show a modal window on error, so that user can report if something is wrong and we can fix it. It works fine unless error happens in template. The change detection is basically broken in that case it doesn't update bindings, thus Material Modal Dialog is displayed empty. I tried to google around and checked all available data in ngDebugContext, but nothing could answer my question. Point is that in case error happens in template(or maybe we can know if change detection is generally dead) then I would just display alert. As last resort solution I will just create modal component with static template, where text will be hardcoded and display that in case of any unhandled error.

Answer 1

In the end we solved it by using the fact that change detection is broken and created an always hidden element in the modal using angular binding [hidden]='true', but as change detection is broken it will be ignored, so text inside it will be displayed and this way we can even show a very specific message when app really crashed like

<!-- This part is fallback for unhandled error which happens during change detection in the template -->
    <div class='crash-error-heading' [hidden]='true'>
      <h2>Something went really wrong</h2>
    </div>
<!---->

Answer 2

You can define a custom error handler on a global level like that:

custom-error-handler.service.ts

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

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  constructor() { }

  handleError(error) {
    // your custom error handling logic
    console.log('GLOBAL ERROR CAUGHT: ', error.toString())
  }
}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { CustomErrorHandler } from './custom-error-handler.service';

@NgModule({
  // ...
  providers: [
    {
      provide: ErrorHandler,
      useClass: CustomErrorHandler
    }
  ],
  // ...
})
export class AppModule { }

But you cannot catch a typo on a variable with that. And it makes sense. If you take the following component:

TS

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';

  triggerError() {
    throw new Error('Some error');
  }
}

HTML

<!-- variable is defined as `name` but typo -->
<p>
  Name: {{ nam || 'Default name' }}
</p>

<button (click)="triggerError()">Trigger error caught by global/custom error handler</button>

Here we get in the rendered view "Default name" because nam is just undefined. It's not an actual error. Try to write undefined in your browser console or in a nodejs context, fine. It's not an error.

That say, if you try to access a property on an object that's not define, there you get an error. So if you update the HTML to:

<p>
  Name: {{ nam.someUndefinedProp || 'Default name' }}
</p>

You'll notice that the CustomErrorHandler caught that error.

But in general, I wouldn't advise you to do that. It would have to be confirmed but maybe AOT can catch that and if it doesn't you should just write some integration or E2E tests anyway that would catch that.

Here's a working example on stackblitz:

https://stackblitz.com/edit/angular-sipcki?file=src%2Fapp%2Fapp.component.html