Angular 6 错误处理 - HttpErrorResponse 具有未定义的状态

Question

我有一个使用 .Net Web Api 开发的 REST Api 的 Angular 6 客户端。

除错误处理外，一切正常。当我尝试处理错误以对不同的状态代码（404、403、409、500...）做出不同的反应时，我根本无法让它工作。 HttpErrorResponse 对象没有任何应有的字段（如“状态”或“错误”）。

我做了一个超级简单的服务来重现这个问题：

对 service.ts 的请求

 public test(): Observable<any> {
    let url = this.templatesUrl + '/myMethod';
    console.log('GET myMethod ' + url);

    return this.http.get<any>(url)
                      .pipe(catchError(this.handleError));
  }

错误处理程序（几乎直接来自官方文档）：

 private handleError(error: HttpErrorResponse) {
    console.warn(error);

    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.message}`);
    }
    // return an observable with a user-facing error message
    return throwError('Unexpected error');
  }

.Net 端的服务：

[HttpGet]
[Route("myMethod")]
public IHttpActionResult myDotNetMethod()
{
    return InternalServerError(new Exception("Details about the issue"));
}

服务被调用，它返回一个状态码 500 和一个 json 对象：

响应状态：

响应头，是json：

json 对象：

日志显示的是：没有状态，几乎是一个空对象：

看起来 HttpErrorResponse 几乎是空的。但是 API 的响应很好，状态码在那里，json 对象也在那里。

我错过了什么？

更新：如果您想知道日志中显示的“内部服务器错误”背后隐藏着什么（它只是 chrome 生成的调用堆栈）：

更新 2： 这是显微镜下的错误对象。它只是“内部服务器错误”。没有状态或消息的痕迹。

Answer 1

已解决...由于拦截器，对象为空。因此，如果您遇到类似的事情，请检查一下。

很抱歉浪费了大家的时间，我不知道那个特定拦截器的存在。

Answer 2

我认为您的问题是您如何在 .Net 中引发错误。 试试这个：

var statusCode = HttpStatusCode.InternalServerError;

var response = new HttpResponseMessage(statusCode)
{
    Content = new ObjectContent<object>(
        new
        {
            Message = "Error Message",
            ExceptionMessage = "StackTrace"
        },
        new JsonMediaTypeFormatter())
};

throw new HttpResponseException(response);

或者如果它不起作用，试试这个：https://stackoverflow.com/a/28589333/8758483

另一个好主意是通过在 Angular 中实现 ErrorHandler 来集中您的错误处理。

import { ErrorHandler } from '@angular/core';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {  
  handleError(error) {
    // your custom error handling logic    
  }
}

然后你告诉 Angular 你想使用这个类而不是默认的类，方法是在你的 NgModule 中提供它：

@NgModule({   
  providers: [{provide: ErrorHandler, useClass: GlobalErrorHandler}]
})

如果您想了解更多详细信息，可以阅读这篇文章：

• Expecting the Unexpected — Best practices for Error handling in Angular

Answer 3

在响应中，该属性称为“消息”而不是“消息”。