app.config.errorHandler для глобальных ошибок
Глобальный обработчик ошибок, запись в Sentry/Datadog и отображение ошибок с учётом окружения
«app.config.errorHandler для глобальных ошибок» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Глобальный обработчик ошибок
Vue предоставляет app.config.errorHandler — единственную функцию, которая перехватывает ошибки из любых частей приложения, если они не были обработаны локально. Это ваша последняя линия защиты.
Сигнатура обработчика
Он получает те же три аргумента, что и onErrorCaptured: ошибку, экземпляр компонента и строку с информацией.
app.config.errorHandler = (err, instance, info) => {
// global handling
};Настройка
Настройте его в экземпляре приложения в стартовом файле до монтирования.
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
console.error(err, info);
};
app.mount("#app");Перехват необработанных ошибок
Он перехватывает ошибки отрисовки компонентов, хуков жизненного цикла, наблюдателей и обработчиков событий во всём приложении, включая те, которые распространились дальше локальных хуков onErrorCaptured.
Отправка данных в Sentry в рабочей среде
В рабочей среде пересылайте ошибки в службу мониторинга, например Sentry, чтобы узнавать о сбоях, с которыми сталкиваются пользователи.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) {
Sentry.captureException(err, { extra: { info } });
}
};Подробное журналирование при разработке
Во время разработки записывайте в консоль более подробные сведения, чтобы быстрее находить и исправлять ошибки.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.DEV) {
console.group("Vue error");
console.error(err);
console.log("info:", info, "instance:", instance);
console.groupEnd();
}
};Разветвление по окружению
Надёжный обработчик делает и то и другое в одной функции: отправляет данные в рабочей среде и ведёт подробное журналирование при разработке.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) Sentry.captureException(err);
else console.error("[Vue]", err, info);
};Асинхронные ошибки
Глобальный обработчик также перехватывает ошибки, возникшие внутри асинхронных хуков жизненного цикла и наблюдателей. Для необработанных отклонений промисов вне Vue добавьте также обработчик событий для window.
window.addEventListener("unhandledrejection", (e) => {
Sentry.captureException(e.reason);
});Связь с границами
Локальные границы и onErrorCaptured обрабатывают и локализуют ошибки рядом с местом их возникновения, а глобальный обработчик служит защитной сетью для всего, что вышло за их пределы. Используйте их вместе.
Не подавляйте ошибки молча
Избегайте пустого обработчика, который скрывает ошибки. Всегда хотя бы записывайте их в журнал или отправляйте отчёт — незаметные сбои делают ошибки невидимыми и сильно затрудняют их поиск.
Добавление контекста
Дополняйте отчёты текущим маршрутом, идентификатором пользователя или версией приложения, чтобы быстрее разбирать ошибки в рабочей среде.
Sentry.captureException(err, {
tags: { info },
user: { id: currentUserId }
});Быстрая проверка
Какие ошибки обрабатывает app.config.errorHandler?
Итоги
Вы узнали, что app.config.errorHandler = (err, instance, info) => {} — это глобальный обработчик всех ошибок: отправляйте ошибки в Sentry в рабочей среде, подробно записывайте их в журнал при разработке и сочетайте его с локальными границами для многоуровневой и отказоустойчивой обработки ошибок.
Часто задаваемые вопросы
Урок «app.config.errorHandler для глобальных ошибок» бесплатный?
Да — полный текст урока «app.config.errorHandler для глобальных ошибок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «app.config.errorHandler для глобальных ошибок»?
Глобальный обработчик ошибок, запись в Sentry/Datadog и отображение ошибок с учётом окружения Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «app.config.errorHandler для глобальных ошибок»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Хук жизненного цикла onErrorCaptured
- Компоненты границы ошибок
- app.config.errorHandler для глобальных ошибок
- Обработка асинхронных ошибок в композируемых модулях