How to catch "undefined" errors in Angular 6

Question

I am trying to find a way to handle if an undefined error is thrown in my component template. When this occurs the app will break, the desired solution is to navigate to an "app error" component or replace the errored component with an "app error" component so that the app remains in a functioning state.

score 1 · Answer 1 · edited Jul 24 '19 at 11:50

1

You can use try/catch blocks on your code but it can be tedious to manage in bigger applications. Instead, you can create your own error handling logic by extending the ErrorHandler from @angular/core.

Something like this;

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

@Injectable()
export class YourErrorHandler implements ErrorHandler {

  handleError(error) {
    // your custom error handling logic    
  }
}

Then, add it to your root module like this;

@NgModule({   
  providers: [{provide: ErrorHandler, useClass: GlobalErrorHandler}]
})

edited Jul 24 '19 at 11:50

ahmeticat

1,899
1
13
28

answered Jul 24 '19 at 11:07

bahadrdsr

424
3
7

Will this work for errors occurring in the component.html template file also? – Shane Jul 24 '19 at 11:16
No will it not! The only way is to write clean code! – JohnnyDevNull Jul 24 '19 at 11:43
Thank you for your response, I am looking for a way to catch issues in production that we may have missed, we already abide by all of these clean coding standards – Shane Jul 25 '19 at 12:02

JohnnyDevNull · Answer 2 · 2019-07-24T11:53:18.543

0

There are no general way to catch all undefined at one place. This error just occurs when you write code that is not secure or/and not clean enough.

Some good practices area:

initialize values

const myVar: string = null;

class MyClass {
  public myAttr: string = null
}

Set only value if not undefined or null or both


// matches not null & not undefined
if (newVal != null) {
  myVar = newVal;
}

// matches only not undefined
if (newVal !== undefined) {
  myVar = newVal;
}

// matches only not null
if (newVal !== null) {
  myVar = newVal
}

Check Object path's

Example see here: https://stackoverflow.com/a/2631198/3634274

edited Jul 24 '19 at 11:53

answered Jul 24 '19 at 11:47

JohnnyDevNull

951
1
8
20

1

Thank you for your response, I am looking for a way to catch issues in production that we may have missed, we already abide by all of these clean coding standards – Shane Jul 25 '19 at 12:02
Some day's ago i've researched in a smiliar direction and maybe one of these topics could help you: https://stackoverflow.com/questions/19846078/how-to-read-from-chromes-console-in-javascript/19846113#19846113 https://stackoverflow.com/questions/11403107/capturing-javascript-console-log/11403146#11403146 – JohnnyDevNull Jul 26 '19 at 14:09

How to catch "undefined" errors in Angular 6

2 Answers2