Angular Academy · Урок

Глобальная обработка ошибок

Централизованно перехватывайте и преобразуйте ошибки HTTP

«Глобальная обработка ошибок» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Централизованная обработка ошибок

Вместо обработки ошибок запросов в каждом компоненте перехватчик может обрабатывать их глобально: log их, показывать уведомление toast, перенаправлять при ошибке 401 или приводить структуру ошибки к единому виду.

catchError в перехватчике

Передайте поток next(req) через catchError, чтобы перехватывать сбои.

import { catchError, throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      console.error('HTTP error', err.status);
      return throwError(() => err);
    })
  );

Проверка HttpErrorResponse

HttpErrorResponse содержит status, message и тело серверной ошибки в error. Выбирайте обработку по status, чтобы учитывать разные случаи.

catchError((err: HttpErrorResponse) => {
  if (err.status === 0) console.error('network/CORS error');
  else console.error('server error', err.status);
  return throwError(() => err);
})

Перенаправление при ошибке 401

Ошибка 401 обычно означает, что сеанс истёк. Перенаправьте пользователя на страницу входа из перехватчика.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const router = inject(Router);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      if (err.status === 401) router.navigate(['/login']);
      return throwError(() => err);
    })
  );
};

Показ уведомления

Внедрите службу toast/уведомлений, чтобы единообразно показывать ошибки пользователю.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const toast = inject(ToastService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      toast.error(err.error?.message ?? 'Something went wrong');
      return throwError(() => err);
    })
  );
};

Повторный выброс или подавление ошибки

Обычно выполняйте повторный выброс с помощью throwError(() => err), чтобы компоненты по-прежнему могли реагировать. Возвращайте резервный наблюдаемый поток (например, of(null)) только тогда, когда действительно хотите скрыть ошибку от вызывающего кода.

Приведение ошибок к единому виду

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

catchError((err: HttpErrorResponse) => {
  const appError = {
    code: err.status,
    message: err.error?.message ?? err.message
  };
  return throwError(() => appError);
})

Различие между ошибками клиента и сервера

err.error instanceof ErrorEvent (или err.status === 0) указывает на ошибку клиента или сети; в противном случае сервер вернул ошибочный статус. Обрабатывайте эти случаи по-разному.

Избегание двойной обработки

Если перехватчик уже показывает уведомление toast, компоненты не должны показывать ещё одно для той же ошибки. Выберите один уровень обработки, видимый пользователю, чтобы избежать дублирования сообщений.

Отправка журналов в службу мониторинга

Центральный перехватчик — идеальное место для передачи ошибок в инструмент мониторинга (Sentry и т. п.) с прикреплённым контекстом запроса.

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const monitor = inject(MonitoringService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      monitor.captureHttpError(req.url, err.status, err.message);
      return throwError(() => err);
    })
  );
};

Порядок перехватчика ошибок

Разместите перехватчик ошибок так, чтобы он оборачивал остальные и мог перехватывать ошибки из всей цепочки, включая повторные попытки.

provideHttpClient(
  withInterceptors([authInterceptor, retryInterceptor, errorInterceptor])
)

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете глобальную обработку ошибок.

Повторение: глобальная обработка ошибок

Перехватчик ошибок централизует обработку сбоев запросов.

Используйте catchError для next(req).
Выбирайте обработку по HttpErrorResponse.status (например, перенаправляйте при ошибке 401).
Выполняйте повторный выброс, чтобы компоненты могли реагировать; подавляйте ошибку только намеренно.

Далее: повторные попытки и индикаторы загрузки.

Часто задаваемые вопросы

Урок «Глобальная обработка ошибок» бесплатный?

Да — полный текст урока «Глобальная обработка ошибок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Глобальная обработка ошибок»?

Централизованно перехватывайте и преобразуйте ошибки HTTP Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Глобальная обработка ошибок»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy