Angular ErrorHandler 传递了不正确的数据

Question

//api.service.ts
public Get(slug: string): Observable<T> {
    return this.http.get(`${environment.apiBaseURL}/${this.endPoint}/${slug}`).pipe(
        map(data => this.serializer.fromJson(data) as T)
    );
}



//global-error-handler.ts
import { Injectable, ErrorHandler } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class GlobalErrorHandler implements ErrorHandler {
    handleError(error: any) {

        if (error instanceof HttpErrorResponse) {
            console.log('type is HttpErrorResponse');
        }
        else
        {
            console.log('type is Error');
        }
    }
}


//app.module.ts
{
    provide: ErrorHandler,
    useClass: GlobalErrorHandler,
}

来自 subscribe returns error 作为 HttpErrorResponse 的组件的错误（这是预期的类型。但是，来自解析器的错误 return error 作为类型 Error.

当错误源自解析器时，自定义错误类型将丢失，并且只有 return 通用 Error 类型。

Answer 1

如果你只调用 Get 而没有 catchError 会怎样

public Get(slug: string): Observable<T> {
return this.http.get(`${environment.apiBaseURL}/${this.endPoint}/${slug}`)
    .pipe(map(data => this.serializer.fromJson(data) as T))
}

并在您的全局 ErrorHandler 中处理所有 404/500 错误

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

    handleError(error: any): void {
        if (error.status === 404) {
             console.log('404 Error happened')
             // TODO handle error here (redirect)
        }
    }
}

Answer 2

基于 issue here。当解析器抛出错误时，它会收到拒绝的错误。所以你失去了原来的错误。下面的代码解决了这个问题。

export class GlobalErrorHandler implements ErrorHandler {
    handleError(error: any) {
        error = error.rejection ? error.rejection : error; //this fixes the problem
        if (error instanceof HttpErrorResponse) {
            console.log('type is HttpErrorResponse');
        }
        else {
            console.log('type is Error');
        }
    }
}

Angular ErrorHandler 传递了不正确的数据

Angular ErrorHandler passed incorrect data

angular

angular-errorhandler