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

Question

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

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

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

关于 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"));
}

服务被调用，它 returns 状态代码 500 和 json 对象：

回复状态：

响应头，是json:

json对象：

以及日志显示的内容：没有状态并且几乎是一个空对象：

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

我错过了什么？

更新： 如果您想知道日志中显示的 "Internal Server Error" 背后隐藏着什么（它只是 chrome 生成的调用堆栈） :

更新2：这是显微镜下的错误对象。简直就是"Internal Server Error"。没有状态或消息的痕迹。

Answer 1

在响应中属性被称为 "Message" 而不是 "message"。

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);

或者如果它不起作用试试这个：

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

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

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

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

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

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

Expecting the Unexpected — Best practices for Error handling in Angular

Answer 3

已解决...由于拦截器，对象为空。所以如果类似的事情发生在你身上，请检查一下。

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

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

Angular 6 error handlig - HttpErrorResponse has undefined status

rest

error-handling

json

http-status-codes

angular