Angular errorhandler include component on aot bundle

Angular errorhandler include component on aot bundle

我有一个错误处理程序,如下所示:

@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;
  }
}

我从:Global error handling angular 2

我的问题是,当我 运行 这在开发中时,它按预期工作,具有包含组件的有意义的堆栈跟踪:

例如:

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

但是在生产中使用 angular cli 时:ng build --prod --aot

相同错误的输出是:

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

所以这对我来说不是一个有意义的堆栈跟踪。如果我能在我的开发环境中找到导致问题的组件,为什么??!

您如何处理生产站点中的错误?如果我在我的代码中的每个地方都尝试捕获,我可以抛出特定类型的错误,但在没有 try catch 块的地方??

Stacktrace 应始终显示导致错误的组件,而不仅仅是显示 bundle 中未定义的字符串!

您收到此消息的原因是 运行 执行命令 ng build --prod --aot 时。

构建使用捆绑和有限的 tree-shaking,而 --prod 构建还运行通过 UglifyJS 消除死代码。

简而言之 - 所有错误日志都被缩小,因此包大小减小 i:e 是我们在生产构建中收到丑化错误消息的原因之一。

为了不发生这种情况,您可以使用此命令,但只能在测试 ng serve --aotng serve --prod 时检查任何错误,如

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