Отлов глобальных ошибок в Angular 2

В Angular 2 уже есть очень хороший обработчик ошибок. Когда в вашем коде случайным образом возникает ошибка, обработчик ошибок Angular поймает ее и выведет сведения об ошибке в консоль. Сведения об ошибке также будут включать номер строки со ссылкой на исходный файл. В большинстве случаев этого должно быть более чем достаточно, чтобы помочь вам понять, что происходит в вашем приложении.

Зачем мне нужен собственный обработчик ошибок?

Вы можете использовать пользовательский обработчик ошибок для форматирования сообщений об ошибках, которые регистрируются в консоли браузера, для обнаружения пользовательских бизнес-ошибок в вашем приложении (ошибки аутентификации/авторизации, HTTP 404 и т. д.) или, возможно, вы хотите также отправить ошибки в ваш внутренний сервер для аналитики или по другим причинам. Все вышеперечисленное является допустимыми вариантами использования пользовательского обработчика ошибок.

Создание собственного обработчика ошибок

Написать собственный обработчик ошибок несложно. Вам нужно будет расширить класс ErrorHandler Angular и переопределить метод handleError. Этот метод получает в качестве параметра оболочку исходной ошибки. Исходную ошибку можно найти в свойстве error.originalError. Реализация по умолчанию использует console.error() для вывода сведений об ошибке в консоли браузера.

CustomErrorHandler.ts

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

export class CustomErrorHandler extends ErrorHandler {
    constructor() {
        super(false);
    }

    public handleError(error: any): void {
        // You can add your own logic here. // It is not required to delegate to the original implementation super.handleError(error);
    }
}

Расширение обработчика ошибок Angular

Если вы хотите использовать свой собственный обработчик, вам нужно каким-то образом заменить тот, который использует Angular. К счастью, потрясающий DI-движок Angular позволяет вам создавать собственные реализации для разных классов.

AppModule.ts:

import {BrowserModule} from '@angular/platform-browser';
import {ErrorHandler} from '@angular/core';
import {AppComponent} from './app.component';
import {CustomErrorHandler} from './CustomErrorHandler';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent],
    providers: [{provide: ErrorHandler, useClass: CustomErrorHandler}]
})
export class AppModule {
    
}

В приведенном выше коде обратите внимание на поле providers в декораторе @NGModule. С приведенной выше конфигурацией каждый раз, когда механизм DI Angular будет запрашивать экземпляр ErrorHandler, будет получать экземпляр нашей пользовательской реализации CustomErrorHandler.

Создание пользовательских классов ошибок

Иногда бывает полезно создать собственные классы ошибок, которые можно использовать в разных частях приложения. Например, когда у пользователя нет доступа к определенной части приложения, вы можете сгенерировать пользовательскую ошибку AuthorizationError.

Создание пользовательского класса ошибок

AuthorizationError.ts:

export class AuthorizationError {
    toString() {
        return 'You are not authorized to view this content!!!';
    }
}

Обновление класса CustomErrorHandler

CustomErrorHandler.ts:

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

export class CustomErrorHandler extends ErrorHandler {
    constructor() {
        super(false);
    }

    public handleError(error: any): void {
        if (error.originalError instanceof AuthorizationError) {
            console.info(`[CUSTOM ERROR]:::${error.originalError.toString()}`);
        } else {
            super.handleError(error);
        }
    }
}

Использование новой ошибки в вашем коде

app.component.html:

<button (click)="throwCustomError()">Throw Authorization Error</button>

app.component.ts:

import {Component} from '@angular/core';
import {AuthorizationError} from './AuthorizationError';

@Component({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})
export class AppComponent {
    throwCustomError() {
        throw new AuthorizationError();
    }
}

Теперь, когда вы нажмете кнопку Throw Authorization Error, вы увидите наш собственный журнал ошибок в консоли браузера:

[CUSTOM ERROR]:::You are not authorized to view this content!!!

Если вы внимательно посмотрите на класс CustomErrorHandler, все, что не относится к типу AuthorizationError, будет делегировано исходному обработчику ошибок Angular.

Первоначально опубликовано на dpopescu.me 21 октября 2016 г.