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

Question

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

除错误处理外，其他所有操作均正常。当我尝试处理错误以对不同的状态代码（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

我认为您的问题是您如何在.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    
  }
}

然后，通过在NgModule中提供它，告诉Angular您要使用此类而不是默认类：

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

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

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

Answer 2

已解决...由于拦截器，该对象为空。因此，如果发生类似的情况，请检查一下。

很抱歉浪费了每个人的时间，我没有意识到那个特定拦截器的存在。

Answer 3

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