NgModuleFactoryLoader: load method modifies Errors type?

[maxime1992]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

With a simple global error handler:

export class MyErrorHandler extends ErrorHandler {
  handleError(error) {
    if (error instanceof CustomError) {
      console.log('Caught a CustomError!');
    } else {
      console.log('Caught a "normal" error');
    }
  }
}

I want to do a special action when an instance of CustomError is thrown.

That error can only come from a custom module loader:

export class ModuleLoader implements NgModuleFactoryLoader {
  private systemJsNgModuleLoader: SystemJsNgModuleLoader;

  constructor(
    private readonly compiler: Compiler,
    @Optional() config?: SystemJsNgModuleLoaderConfig
  ) {
    this.systemJsNgModuleLoader = new SystemJsNgModuleLoader(compiler, config);
  }

  public load(path: string) {
    if (path.includes('lazy-loaded')) {
      throw new CustomError('!!custom error!!');
    } else {
      return this.systemJsNgModuleLoader.load(path);
    }
  }
}

(simplified for demo here): Just throwing on a given path.

And in my console it displays:

Caught a "normal" error

Expected behavior

I would expect in console to see:

Caught a CustomError!

Minimal reproduction of the problem with instructions

For some reason, I wasn't able to reproduce on Stackblitz, it seems they use some sort of SSR (???), anyway I couldn't see the network request but the component was displayed...

So here a simple repro on Github:
https://github.com/maxime1992/angular-repro-handle-error-custom-loader

1. take a look to the global error handler

2. take a look into the custom module loader

The problem is probably located in the custom module loader because if I throw the same error from somewhere else, it's well caught as a CustomError and not a simple Error.

What is the motivation / use case for changing the behavior?

Avoid to search in the error message for a given message and use proper instanceof to know what type is an error.

Environment

Angular CLI: 1.6.7
Node: 9.4.0
OS: linux x64
Angular: 5.2.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.7
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.2.0
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
typescript: 2.7.1
webpack: 3.10.0
Browser:
- [ x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 

[alexzuza]

I think that's because angular is getting rejected error from routing that passed through zonejs. So you're loosing original error. I tried to show all steps to reproduce it. Live example on ng-run

As we can see we can get origin error through error.rejection but seems there is a better way.

Router has one property called errorHandler.

angular/packages/router/src/router.ts

Line 217 in 65cf1ad

errorHandler: ErrorHandler = defaultErrorHandler;

We might see on illustration above that this handler is called before global angular error handler takes place.

angular/packages/router/src/router.ts

Line 779 in 65cf1ad

resolvePromise(this.errorHandler(e));

Since it's public property we can set our handler

export class AppModule {
  constructor(private router: Router, private errorHandler: ErrorHandler) {
    router.errorHandler = errorHandler.handleError;
  }
 }

Now your custom error handler will get what you're expecting

https://ng-run.com/edit/JXP8rnPr0wm63KbjFdW1?open=app%2Fapp.module.ts&layout=1

[maxime1992]

@alexzuza brilliant debug here 👏 thanks for helping on that until it gets a proper fix!

[JiaLiPassion]

@maxime1992, you can check error.rejection in your global error handler.

export class MyErrorHandler extends ErrorHandler {
  handleError(err) {
    const error = err.rejection ? err.rejection : err;
    // when clicking on the link to display the lazy loaded component
    // the module-loader throws an error of type CustomError
    // so I expect to be able to catch it from here
    if (error instanceof CustomError) {
      console.log('Caught a CustomError!');
    } else {
      console.log('Caught a "normal" error');
    }
  }
}