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!

score 0 · Accepted Answer · answered Oct 09 '17 at 08:05

0

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.

answered Oct 09 '17 at 08:05

Rahul Singh

19,030
11
64
86

Ok. My approach to get a better input on what is going wrong in my production build was to make my own errorhandler in angular and then in my component where critical stuff is going on: try { something critical .. } catch (ex) { setError(ex, PersonDecideComponent.name, 'selectionChange'); } In my errorhandler im logging out the component name och what method that the exception happened. What to think about that solution? – dotnet-provoke Oct 09 '17 at 08:38
you cannot get the exact error when you do a aot and prod build the best thing is to use a catch and send the error or the method for your reference to the server to log into a file . And then you can debug using that refernce – Rahul Singh Oct 09 '17 at 08:44

Angular errorhandler include component on aot bundle

1 Answers1