0Pricing
Vue Academy · Урок

Хук жизненного цикла onErrorCaptured

Перехват ошибок дочерних компонентов, возврат false для остановки распространения и объекты ошибок

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

Перехват ошибок в компонентах

Vue предоставляет хук жизненного цикла onErrorCaptured для перехвата ошибок, возникающих в дочерних компонентах. Он позволяет родительскому компоненту перехватывать сбои в своём поддереве.

Сигнатура хука

onErrorCaptured получает три аргумента: ошибку, экземпляр компонента, в котором она возникла, и строку info, описывающую место возникновения.

import { onErrorCaptured } from "vue";
onErrorCaptured((err, instance, info) => {
  // handle it
});

Аргумент err

Первый аргумент — это объект возникшей ошибки, обычно экземпляр Error с сообщением и стеком вызовов, которые можно записать в журнал или отобразить.

onErrorCaptured((err) => {
  console.error("Captured:", err.message);
});

Аргумент instance

Второй аргумент — экземпляр компонента, вызвавшего ошибку. Он полезен для отладки или добавления контекста в отчёты.

onErrorCaptured((err, instance) => {
  console.log("From component:", instance);
});

Аргумент info

Третий аргумент — строка, указывающая, какой этап жизненного цикла или операция вызвали ошибку, например «функция отображения», «функция настройки» или конкретный хук.

onErrorCaptured((err, instance, info) => {
  console.log("Vue context:", info);
});

Только ошибки дочерних компонентов

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

Остановка распространения

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

onErrorCaptured((err) => {
  reportError(err);
  return false; // do not propagate
});

Зачем останавливать распространение

Возврат false локализует ошибку — это полезно, когда компонент полностью обрабатывает сбой (например, показывает резервное содержимое) и не хочет, чтобы срабатывал глобальный обработчик.

Разрешение всплытия ошибки

Если Вы хотите, чтобы обработчики более высокого уровня (или глобальный обработчик) тоже увидели ошибку, не возвращайте false. Тогда хук записывает ошибку локально и позволяет ей распространяться дальше вверх.

onErrorCaptured((err) => {
  logLocally(err);
  // no return -> still propagates
});

Практический пример

Распространённый вариант использования — запись в журнал и флаг восстановления. Установите реактивный флаг, чтобы отобразить резервное содержимое, и одновременно передайте ошибку для диагностики.

const failed = ref(false);
onErrorCaptured((err) => {
  failed.value = true;
  report(err);
  return false;
});

Особенности асинхронного кода

onErrorCaptured перехватывает ошибки в отображении дочерних компонентов, хуках жизненного цикла и синхронных обработчиках. Некоторые асинхронные ошибки (неперехваченные отклонения обещаний) лучше обрабатывать на глобальном уровне — это будет рассмотрено далее.

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

Что делает возврат false из onErrorCaptured?

Итоги

Вы узнали, что onErrorCaptured((err, instance, info)) перехватывает ошибки дочерних компонентов. Строка info предоставляет контекст жизненного цикла, а возврат false останавливает распространение, чтобы компонент мог обработать сбой локально.

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

Урок «Хук жизненного цикла onErrorCaptured» бесплатный?

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

Чему я научусь в уроке «Хук жизненного цикла onErrorCaptured»?

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

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

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

Сколько времени занимает урок «Хук жизненного цикла onErrorCaptured»?

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

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

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

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

  1. Хук жизненного цикла onErrorCaptured
  2. Компоненты границы ошибок
  3. app.config.errorHandler для глобальных ошибок
  4. Обработка асинхронных ошибок в композируемых модулях
← Назад к Vue Academy