Some errors are uncaught by custom error handler

Question

I'm developing a custom error handler in Angular 4, which sends the error to remote error tracker etc.

Depending on when i throw the error, it will either be caught by my custom handler or not. If i throw the exception after starting a transaction in WebSQL, the error will not be caught and will instead be logged in console as a uncaught error.

private executeSql<T>(sql: SqlStatement): Observable<T> {
  return Observable.create((observer) => {
    // If i throw exception before this.storage.transaction, the exception will be caught
    this.storage.transaction((tx) => {
      // Do it here, and it will not
      tx.executeSql(sql.statement, sql.params,
      (t, result) => {
        let resultRows = this.parseRowsFromResult(result);
        for (let i = 0; i < resultRows.length; i++) {
          observer.next(resultRows[i]);
        }

        observer.complete();
      },
      (t, error) => {
        observer.error(error.message.toString());
        return true;
      });
    });
  });
}

this.storage is a WebSQL object.

Anyone having experience with this?

Answer 1

The exceptions is raised outside of angular code, thus the default angular error handler would not be taken into consideration.

To prevent that, ensure that when items is submitted to the observer, then it is done WITHIN a angular zone. Angular provides the following class which can do exactly that: https://angular.io/api/core/NgZone

By wrapping the observer.next and observer.error in NgZone.runGuarded, the errors submitted will be given to angular error handler as well.