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

Question

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

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

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

请求服务.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生成的callstack）：

更新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

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