Angular errorhandler include component on aot bundle

Question

I have an errorhandler that looks like this:

@Injectable() export class GlobalErrorHandler implements ErrorHandler {
constructor(private injector: Injector) { }
handleError(error) {
    const errorService = this.injector.get(ErrorService);
    const location = this.injector.get(LocationStrategy);

const url = location instanceof PathLocationStrategy
? location.path() : '';

StackTrace.fromError(error).then(stackframes => {
    const stackString = stackframes
      .splice(0, 20)
      .map((sf) => {
        return sf.toString();
      }).join('\n');

    const errorObject: IError = {
        errorMessage: error.messagen,
        stackTrace: stackString,
        path: url
    };

    // Display something to user
    errorService.setError(errorObject);

    // TODO: send to server
});

 // IMPORTANT: Rethrow the error otherwise it gets swallowed
 throw error;
  }
}

I got this from: Global error handling angular 2

My question is that when i run this in development it works as expected with a meaningful stacktrace where the component is included:

For instance:

ngOnInit()@webpack:///src/app/person/userdetail-page/userdetail-page.component.ts:29:19 __tryOrSetError()@webpack:///~/rxjs/Subscriber.js:247:0 this.__tryOrSetError()@webpack:///~/rxjs/Subscriber.js:187:0 _next()@webpack:///~/rxjs/Subscriber.js:125:0 next()@webpack:///~/rxjs/Subscriber.js:89:0 notifyNext()@webpack:///~/rxjs/operator/switchMap.js:124:0

But when in production using angular cli: ng build --prod --aot

The output is for the same error is:

property 'toString' of undefined TypeError: Cannot read property 'toString' of undefined at e._next (http://xxx.azurewebsites.net/main.b21b245638698421733f.bundle.js:1:5701) at e.__tryOrSetError (http://xxx.azurewebsites.net/vendor.1cd9b81fc017fd7eac16.bundle.js:835:16880) at e.next

So this is not a meaningful stacktrace for me. If i could get the component causing the problem in some why like in my development environment??!

How do you handle errors in your production sites ? If i would have try catch in every place in my code i could throw en error of a specific type but in places where there is no try catch block??

Stacktrace should always show the component responsible for the error and not just showing tostring of undefined in bundle!

Answer 1

The Reason you are getting this is when running the command ng build --prod --aot .

builds make use of bundling and limited tree-shaking, while --prod builds also run limited dead code elimination via UglifyJS.

In Short - all the Error logs are minified so that the bundle size is reduced i:e is one of the reasons that we get the uglified error message in Production build .

In order for this to not happen you can make use of this command but only while in testing ng serve --aot or ng serve --prod to check for any errors as

The AOT compiler detects and reports template binding errors during the build step before users can see them.