Обработка ошибок: errorCaptured, app.config.errorHandler

↑ 4.1 Vue 3: основы, компоненты, Composition API · ← Предыдущая · → Следующая

Обязательно~3 мин чтенияУровень: middle

Зачем это на собесе

Как не уронить приложение из-за ошибки в одном компоненте и собрать данные об ошибках.

Объяснение

Уровни обработки:

Уровень	Механизм
Локальный	try/catch в обработчиках и async-функциях
Компонентная граница	onErrorCaptured (ловит ошибки потомков: рендер, хуки, watchers, обработчики)
Глобальный	app.config.errorHandler
Предупреждения	app.config.warnHandler (dev)
Вне Vue	window.addEventListener("error" / "unhandledrejection")
Роутер	router.onError
Запросы	обработка в API-клиенте/интерсепторах, onError в Vue Query

<!-- ErrorBoundary.vue -->
<script setup lang="ts">
const error = ref<Error | null>(null);
onErrorCaptured((err, instance, info) => {
  error.value = err as Error;
  report(err, { info, component: instance?.$options.name });
  return false;                              // остановить дальнейшее всплытие
});
const reset = () => (error.value = null);
</script>
<template>
  <slot v-if="!error" />
  <div v-else role="alert"><p>Что-то пошло не так</p><button @click="reset">Повторить</button></div>
</template>

// main.ts
app.config.errorHandler = (err, instance, info) => { Sentry.captureException(err, { extra: { info } }); };
window.addEventListener("unhandledrejection", (e) => Sentry.captureException(e.reason));

Практики:

• Error boundary вокруг крупных блоков (страница, виджет), чтобы сбой не «ронял» всё приложение.
• Понятные сообщения пользователю и кнопка «Повторить»; технические детали — в логи.
• Логирование в Sentry/аналог с контекстом (пользователь, маршрут, версия, breadcrumbs), source maps.
• Разделять ошибки: ожидаемые (валидация, 4xx) обрабатывать локально, неожиданные — глобально.
• Асинхронные ошибки в обработчиках событий Vue перехватываются глобальным обработчиком; вне Vue — нет.

Нюансы и подводные камни

• errorCaptured не ловит ошибки в самом компоненте-границе и в асинхронном коде вне Vue.
• Возврат false в errorCaptured останавливает распространение.
• unhandledrejection для промисов вне компонентов.
• Не глотайте ошибки: минимум — логирование.

Практика

1. Сделайте ErrorBoundary и оберните им страницы.
2. Настройте отправку ошибок в Sentry с source maps.
3. Смоделируйте ошибку рендера и проверьте поведение.

Вопросы с ответами

Как ловить ошибки в компонентах-потомках?

onErrorCaptured в родителе (граница ошибок) и глобально app.config.errorHandler.

Что делает return false в errorCaptured?

Останавливает дальнейшее всплытие ошибки к родителям и глобальному обработчику.

Связанные темы

• Плагины Vue
• TypeScript во Vue: типизация props, emits, ref, generic-компоненты