Компоненты границы ошибок
Создание компонента-обёртки ErrorBoundary с запасным слотом и отображением ошибки
«Компоненты границы ошибок» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Что такое граница ошибок
Граница ошибок — это повторно используемый компонент, который оборачивает часть интерфейса, перехватывает возникающие внутри него ошибки и показывает резервное содержимое, не позволяя всему приложению сломаться.
Основная идея
Граница хранит флаг hasError. Пока он имеет значение false, она отображает дочерние элементы; после перехвата ошибки меняет его на true и отображает резервное содержимое.
import { ref } from "vue";
const hasError = ref(false);Перехват ошибки
Используйте onErrorCaptured, чтобы установить флаг и остановить распространение, тогда граница полностью возьмёт на себя обработку сбоя.
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => {
hasError.value = true;
return false;
});Сохранение сведений об ошибке
Сохраните также саму ошибку, чтобы резервное содержимое могло показать сообщение или предложить повторить попытку.
const error = ref(null);
onErrorCaptured((err) => {
hasError.value = true;
error.value = err;
return false;
});Структура шаблона
Отображайте слот по умолчанию (дочерние элементы), когда всё работает нормально, и резервный слот после возникновения ошибки.
<template>
<slot v-if="!hasError" />
<slot v-else name="fallback" :error="error" />
</template>Слот по умолчанию показывает дочерние элементы
Слот по умолчанию содержит защищённую часть интерфейса. В обычных условиях граница незаметна — она просто передаёт дочерние элементы дальше.
<ErrorBoundary>
<RiskyWidget />
</ErrorBoundary>Резервный слот показывается при ошибке
Предоставьте именованный слот fallback для интерфейса обработки ошибки. Он может получить ошибку через свойство слота с областью видимости.
<ErrorBoundary>
<RiskyWidget />
<template #fallback="{ error }">
<p>Something went wrong: {{ error.message }}</p>
</template>
</ErrorBoundary>Добавление повтора
Предоставьте возможность сброса, чтобы пользователи могли восстановить работу. Метод очищает флаг и повторно отображает дочерние элементы.
function reset() {
hasError.value = false;
error.value = null;
}Повтор в резервном содержимом
Передайте reset через слот с областью видимости, чтобы резервное содержимое могло предложить кнопку «Попробовать снова».
<slot v-else name="fallback" :error="error" :reset="reset" />Резервный вариант по умолчанию
Задайте для резервного слота разумное содержимое по умолчанию, чтобы граница работала даже без переданного пользовательского резервного варианта.
<slot name="fallback" :error="error">
<p>An error occurred.</p>
</slot>Зачем нужны границы
Без границ один неисправный виджет может привести к сбою всего представления. Границы изолируют сбои, поэтому остальная часть приложения продолжает работать — это важный шаблон обеспечения отказоустойчивости.
Быстрая проверка
Как граница обработки ошибок решает, что отобразить?
Итоги
Вы создали границу обработки ошибок: реактивную ссылку hasError, обработчик onErrorCaptured, который устанавливает её и возвращает false, слот по умолчанию для дочерних элементов и резервный слот с ошибкой и сбросом, отображаемый при возникновении ошибки, — это изолирует сбои от остальной части приложения.
Часто задаваемые вопросы
Урок «Компоненты границы ошибок» бесплатный?
Да — полный текст урока «Компоненты границы ошибок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Компоненты границы ошибок»?
Создание компонента-обёртки ErrorBoundary с запасным слотом и отображением ошибки Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Компоненты границы ошибок»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Хук жизненного цикла onErrorCaptured
- Компоненты границы ошибок
- app.config.errorHandler для глобальных ошибок
- Обработка асинхронных ошибок в композируемых модулях