ErrorHandler：与 promise 一起使用时无法获取错误对象

Question

我正在构建一个实现自定义错误处理程序的 angular 应用程序。

当您有自定义错误处理程序并且当 observable 与 http 一起使用并且错误未被捕获时，使用 catch 块，如下所示

this.http.get('/doesntExist').subscribe();

自定义 ErrorHandler 的 handleError() 函数获取一个 HttpErrorResponse 对象，该对象可用于获取必要的信息并全局处理错误。但是当你使用一个承诺时，比如关注

this.http.get('/doesntExist').toPromise();

而不是 HttpErrorResponse ，将抛出一个字符串

Error: Uncaught (in promise): HttpErrorResponse:

并且您无法在 handleError() 方法中真正获取错误信息。你可以看到它的实际效果 Here

这是期望的行为吗？难道我做错了什么？有什么解决方法吗？请帮忙。我卡住了；

更新

控制台中字符串错误的堆栈跟踪

Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":[],"lazyUpdate":null},"status":200,"statusText":"OK","url":"https://angular-promise-bug.stackblitz.io/doesntExist","ok":false,"name":"HttpErrorResponse","message":"Http failure during parsing for https://angular-promise-bug.stackblitz.io/doesntExist","error":{"error":{},"text":"<!DOCTYPE html>\n<html>\n<head>\n  <link href=\"https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Lato:400,700,900\" rel=\"stylesheet\">\n  <base href=\"/\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" />\n  <link rel=\"stylesheet\" media=\"screen\" href=\"https://c.staticblitz.com/assets/preview-8222014a50f8588c56d057621cdaf871.css\" />\n  <script src=\"https://c.staticblitz.com/assets/common-bd7eff1ca58185bf8131b.js\" crossorigin=\"anonymous\"></script>\n  <script src=\"https://c.staticblitz.com/assets/ext-fb68da629568861fd08cb.js\" crossorigin=\"anonymous\"></script>\n  <script src=\"https://c.staticblitz.com/d/webcontainer.a966dcc4085d3fff5bb.js\" crossorigin=\"anonymous\"></script>\n  <script src=\"https://c.staticblitz.com/assets/preview-3a0c9433aa42f56dbd90b.js\" crossorigin=\"anonymous\"></script>\n  <script>(function(){_preboot(\"https://l.staticblitz.com/b/v1/angular-promise-bug/f9f42b37e9b\",{p:\"stackblitz\",a:\"AIzaSyBZSvuCzbUhuRrSps-HjM5bFClLPaFF9Vg\",o:true})})()</script>\n</head>\n<body></body>\n</html>\n"}}
    at resolvePromise (angular-promise-bug.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:814)
    at eval (angular-promise-bug.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:724)
    at SafeSubscriber.eval [as _error] (angular-promise-bug.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Observable.js:99)
    at SafeSubscriber.__tryOrUnsub (angular-promise-bug.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:209)
    at SafeSubscriber.error (angular-promise-bug.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:160)
    at Subscriber._error (angular-promise-bug.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:93)
    at Subscriber.error (angular-promise-bug.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:73)
    at MapSubscriber.Subscriber._error (angular-promise-bug.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:93)
    at MapSubscriber.Subscriber.error (angular-promise-bug.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:73)
    at FilterSubscriber.Subscriber._error (angular-promise-bug.stackblitz.io/turbo_modules/rxjs@6.3.3/internal/Subscriber.js:93)

Answer 1

当您使用 toPromise() 时，

error.rejection 应该让您得到 HttpErrorResponse。我在 stackblitz

中测试了以下内容

  handleError(error) {
    const zone = this.injector.get(NgZone);
    console.log('Here')
    console.log(error)

    if (!(error instanceof HttpErrorResponse)) {
      error = error.rejection;
    }
    console.log(error);
    alert('Open console to see the error')
  }

Answer 2

奇怪的是 Angular 没有在其全局错误处理程序中捕获 promise 拒绝。您可以按照顶部+接受的答案建议采用其他方法。这是另一个技巧

withPromise() {
      this.http.get('/doesntExist')
      .toPromise()
      .then(() => {})
      .catch((error) => {
       const errorSub = throwError (error);
       errorSub.subscribe();
      });
  }

你基本上创建了一个 Observable 并订阅它，然后让 Angular 处理错误。但是同样，这是一个很长的路要走，因为您已经从最初的 Http 调用中获得了一个可观察对象。

ErrorHandler：与 promise 一起使用时无法获取错误对象

ErrorHandler: Not able to get the error object when used with promise

angular

angular5