Как обрабатывать ошибки, генерируемые из пользовательского глобального обработчика ошибок в angular 4

Question

В angular 4, используя пользовательский обработчик ошибок с перехватчиком, все работает нормально. ниже рабочий процесс.

ниже рабочий процесс в моем лучшем понимании, как обрабатывается ошибка.

всякий раз, когда метод вызывает HTTP-запрос (используя HttpClient), и ответ приходит как ошибка, чем

1. сначала он достигает перехватчика (error.interceptor.ts)
   • здесь мы проверяем статус ошибки.
   • на основе кода состояния создайте новый объект appError который является экземпляром отдельного класса ошибок, например. new AccessDenied(err.error))
2. В этом пользовательском классе (access-denined.ts), который расширяет AppError учебный класс
   • мы называем super() использовать метод родительского класса.

и чем отправить этот вновь созданный объект ошибки, используя throw Observable.error(appError) из error.interceptor.ts

3. Теперь эта ошибка обрабатывается catch блок подписчика HTTP-запроса в компоненте app.component.ts

   • здесь мы показываем пользовательское сообщение об ошибке в HTML или отправляем ошибку следующему, используя throw error

4. Теперь эта ошибка будет обработана глобальным обработчиком ошибок (global-error-handler.ts), который расширяет Angular ErrorHandler интерфейс

   • здесь мы снова проверяем, является ли эта ошибка AppError или это системная ошибка, а затем обработать ошибку здесь

app.module.ts

{ provide: ErrorHandler, useClass: GlobalErrorHandler }

app.component.ts

this.authService.myMethod(`url`).subscribe({
    (res) => { // successful response }
    , (err) => { 
        if(err instanceof AppError) {
            console.log('4. error display in html');
            this.errorMessage = err.message;
        } else {
            throw err;
        }
    }
});

error.interceptor.ts

import { Router } from '@angular/router';
import { Injectable, Injector } from '@angular/core';
import { HttpInterceptor, HttpResponse, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { AuthFail, BadInput, NotFoundError, ServerError, AccessDenied } from '../errors/';
import { AuthService } from './../auth/auth.service';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    private auth: AuthService;
    constructor(private router: Router, private injector: Injector) { }
    logout = false;
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const auth = this.injector.get(AuthService);
        return next.handle(req).catch((err: HttpErrorResponse) => {
            let appError;
            console.log('1. error comes in interceptor: ', err);
            if (err instanceof HttpErrorResponse) {
                switch (err.status) {
                    case 401:
                        this.router.navigateByUrl('/login');
                        appError = new AuthFail(err.error);
                        break;
                    case 400:
                        appError = new BadInput(err.error);
                        break;
                    case 403:
                        appError = new AccessDenied(err.error);
                        break;
                    case 500:
                        appError = new ServerError(err.error);
                        break;
                    default:
                        appError = new Error(err.error);
                }
                return Observable.throw(appError);
            }
        });
    }
}

доступ-denied.ts

import { AppError } from './app-error';

export class AccessDenied extends AppError {
    constructor(error?: any) {
        console.log('2. from interceptor', error);
        const msg = error.message || " Access Denied";
        super(msg);
    }
}

приложение-error.ts

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

export class AppError {
    constructor(public message: string, public title: string = 'Error') { 
        console.log('3. parent class of custom error handler'); 
    }
}

глобальные ОШИБКИ handler.ts

import { ErrorHandler, Injectable } from '@angular/core';
import { AppError } from './app-error';

@Injectable()
export class GlobalErrorHandler extends ErrorHandler {
    constructor() {
        super(true);
    }

    public handleError(error: any): void {
        if (error instanceof AppError) {
            console.log('5. App Error handled here in last', error);
            // throw error;
            );
        } else {
            console.error('An exception occured. Please try again.');
            super.handleError(error);
        }
    }
}

Теперь мой запрос таков, что если я напишу throw error в global-error-handler.ts в случае блока, чем это отображается ниже ошибки в консоли

Uncaught (из имени файла Subscribe.js)

Так как же нам справиться с этой ошибкой? Я имею в виду, если мы напишем throw error из глобального обработчика ошибок, чем и как мы можем справиться с этим?