Angular errorhandler include component on aot bundle

Question

我有一个错误处理程序，如下所示：

@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 中未定义的字符串！

Answer 1

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

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

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

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

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

Angular errorhandler include component on aot bundle

Angular errorhandler include component on aot bundle

angular

error-handling

angular2-aot

angular-aot