如何获得更好的 Angular 错误堆栈跟踪

Question

目前，当我在生产 Angular (v7) 应用程序中遇到错误时，我会得到如下的堆栈跟踪。但这几乎不可能从中获得任何有意义的信息。如何获得更好的堆栈跟踪，以便缩小这个难以捉摸的错误的来源范围？现在，我在产品中遇到了这个错误，因为它在我的开发机器上从未发生过，而且我不知道如何隔离它，因为堆栈跟踪对我来说几乎毫无用处。我习惯使用 C# 等语言，在其中您可以获得非常简洁的堆栈跟踪，为您提供到错误函数的映射。该堆栈跟踪没有任何意义。

TypeError: Cannot read property 'appendChild' of null
at create_dom_structure (eval at  (:15:1), :1:16231)
at load_map (eval at  (:15:1), :1:101028)
at Object.load (eval at  (:15:1), :1:107834)
at eval (eval at  (:15:1), :1:108251)
at t.invokeTask (https://mywebsite.com/polyfills.d8680adf69e7ebd1de57.js:1:8844)
at Object.onInvokeTask (https://mywebsite.com/main.25a9fda6ea42f4308b79.js:1:467756)
at t.invokeTask (https://mywebsite.com/polyfills.d8680adf69e7ebd1de57.js:1:8765)
at e.runTask (https://mywebsite.com/polyfills.d8680adf69e7ebd1de57.js:1:4026)
at e.invokeTask (https://mywebsite.com/polyfills.d8680adf69e7ebd1de57.js:1:9927)
at invoke (https://mywebsite.com/polyfills.d8680adf69e7ebd1de57.js:1:9818)

我的错误处理程序：

export class AppErrorHandler extends ErrorHandler {

constructor(
    private _http: Http,
    private injector: Injector,
) {
    super();
}

public handleError(error: any): void {
    if (error.status === '401') {
        alert('You are not logged in, please log in and come back!');
    } else {
        const router = this.injector.get(Router);

        const reportOject = {
            status: error.status,
            name: error.name,
            message: error.message,
            httpErrorCode: error.httpErrorCode,
            stack: error.stack,
            url: location.href,
            route: router.url,
        };
        this._http.post(`${Endpoint.APIRoot}Errors/AngularError`, reportOject)
            .toPromise()
            .catch((respError: any) => {
                Utils.formatError(respError, `AppErrorHandler()`);
            });
    }
    super.handleError(error);
}
}

Answer 1

一般来说，Javascript 堆栈跟踪更有用。不幸的是，在生产应用程序中，您通常会打开缩小功能，这就是为什么您会遇到如此难以阅读的混乱。

如果您能负担得起更大的 Javascript 包，那么关闭缩小功能可能会很有用，以便在生产中获得更好的堆栈跟踪。

如何执行此操作将根据您使用的 Angular CLI 版本而有所不同。对于 v7 CLI：

在文件 angular.json 中，设置以下属性

{
  ...
  "projects": {
    "my-project": {
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            "production": {
              "optimization": false,
              "buildOptimizer": false,
              ...
            }
    ...
}

这个问题的替代解决方案