【问题标题】:Angular errorhandler include component on aot bundle角度错误处理程序在 aot 包上包含组件
【发布时间】:2018-02-25 05:54:47
【问题描述】:

我有一个看起来像这样的错误处理程序:

@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

输出是相同的错误是:

未定义类型错误的属性“toString”:无法读取属性 e._next 处未定义的“toString” (http://xxx.azurewebsites.net/main.b21b245638698421733f.bundle.js:1:5701) 在 e.__tryOrSetError (http://xxx.azurewebsites.net/vendor.1cd9b81fc017fd7eac16.bundle.js:835:16880) 在 e.next

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

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

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

【问题讨论】:

    标签: angular error-handling angular2-aot angular-aot


    【解决方案1】:

    你得到这个的原因是在运行命令 ng build --prod --aot 时。

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

    简而言之 - 所有错误日志都被最小化,以便减小包大小,即:这是我们在 Production build 中收到 uglified 错误消息的原因之一。

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

    AOT 编译器在执行过程中检测并报告模板绑定错误 用户可以看到它们之前的构建步骤。

    【讨论】:

    • 好的。为了更好地了解生产构建中出现的问题,我的方法是在 Angular 中创建自己的错误处理程序,然后在发生关键事情的组件中创建:try { something critical .. } catch (ex) { setError(例如,PersonDecideComponent.name, 'selectionChange');在我的错误处理程序中,我注销了组件名称,以及发生异常的方法。如何看待该解决方案?
    • 在执行 aot 和 prod 构建时无法得到确切的错误,最好的办法是使用 catch 并将错误或方法发送到服务器以登录文件。然后您可以使用该引用进行调试
    猜你喜欢
    • 1970-01-01
    • 2016-10-27
    • 1970-01-01
    • 2017-01-06
    • 2019-11-14
    • 1970-01-01
    • 2021-11-05
    • 1970-01-01
    • 2017-03-23
    相关资源
    最近更新 更多