Vue ловит ошибки из своего "мира" (шаблоны, хуки, watchers), но за его пределами нужны дополнительные механизмы. **Слой 1: Vue errorHandler** ```javascript // plugins/error-handler.js export default { install(app) { app.config.errorHandler = (err, instance, info) => { // info — откуда ошибка: "render function", "setup function", // "watcher callback", "component event handler" и т.д. const componentName = instance?.$options?.name || instance?.$.type?.name || 'Anonymous' const errorPayload = { message: err.message, stack: err.stack, component: componentName, hook: info, timestamp: Date.now(), url: window.location.href, } // Логирование console.error(`[${componentName}] ${info}:`, err) // Отправка в сервис мониторинга sendToErrorTracker(errorPayload) } // Предупреждения — только в dev if (import.meta.env.DEV) { app.config.warnHandler = (msg, instance, trace) => { console.warn('[Vue Warn]', msg) // Можно собирать для аудита } } }, } ``` **Слой 2: Глобальные JS-ошибки + unhandled rejections** ```javascript // plugins/error-handler.js (дополнение) export default { install(app) { // ... errorHandler выше // Ошибки вне Vue (сторонние библиотеки, глобальные скрипты) window.addEventListener('error', (event) => { sendToErrorTracker({ message: event.message, filename: event.filename, line: event.lineno, col: event.colno, type: 'uncaught', }) }) // Непойманные промисы — частая проблема window.addEventListener('unhandledrejection', (event) => { const err = event.reason sendToErrorTracker({ message: err?.message || String(err), stack: err?.stack, type: 'unhandledrejection', }) }) }, } ``` **Слой 3: HTTP-ошибки** ```javascript // api/interceptors.js import { notify } from '@/plugins/notifications/state' export function setupErrorInterceptor(api) { api.interceptors.response.use( (response) => response, (error) => { const status = error.response?.status const message = error.response?.data?.message const errorMap = { 401: 'Сессия истекла. Войдите заново.', 403: 'Нет доступа.', 404: 'Ресурс не найден.', 422: message || 'Ошибка валидации.', 429: 'Слишком много запросов. Подождите.', 500: 'Ошибка сервера. Попробуйте позже.', } const userMessage = errorMap[status] || message || 'Произошла ошибка' notify(userMessage, 'error') // Редирект на логин при 401 if (status === 401) { router.push({ name: 'login' }) } return Promise.reject(error) }, ) } ``` **Error Boundary компонент:** ```vue ``` ```vue ``` --- ## 📌 Реальные кейсы 🔹 **Sentry интеграция** — стандарт индустрии: ```javascript // main.js import * as Sentry from '@sentry/vue' Sentry.init({ app, dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0', integrations: [ Sentry.browserTracingIntegration({ router }), Sentry.replayIntegration(), ], tracesSampleRate: 0.2, replaysSessionSampleRate: 0.1, }) // Sentry сам подключается к app.config.errorHandler // и оборачивает window.onerror + unhandledrejection ``` 🔹 **Composable для безопасных async-операций:** ```javascript // composables/useSafeAsync.js import { ref } from 'vue' export function useSafeAsync(asyncFn) { const data = ref(null) const error = ref(null) const loading = ref(false) async function execute(...args) { loading.value = true error.value = null try { data.value = await asyncFn(...args) } catch (err) { error.value = err // Ошибка перехвачена — не уйдёт в unhandledrejection } finally { loading.value = false } } return { data, error, loading, execute } } // Использование const { data, error, loading, execute } = useSafeAsync(fetchUsers) await execute() ``` --- ## Частые ошибки ❌ Полагаться только на `errorHandler` — он не ловит ошибки в async-функциях без await: ```javascript // errorHandler НЕ поймает это function onClick() { fetch('/api/data').then(() => { throw new Error('Oops') // Улетит в unhandledrejection }) } ``` ✅ Добавляй `unhandledrejection` listener как второй слой защиты. --- ❌ Глотать ошибки молча: ```javascript app.config.errorHandler = (err) => { sendToSentry(err) // Отправили, но пользователь не знает } ``` ✅ Сочетай логирование с уведомлением пользователя: ```javascript app.config.errorHandler = (err, instance, info) => { sendToSentry(err) notify('Произошла ошибка. Мы уже разбираемся.', 'error') } ``` --- ❌ `onErrorCaptured` без `return false` — ошибка уходит дальше вверх и всё равно попадает в `errorHandler`: ```javascript onErrorCaptured((err) => { error.value = err // Без return false ошибка продолжит всплытие }) ``` ✅ Если Error Boundary должен полностью обработать ошибку: ```javascript onErrorCaptured((err) => { error.value = err return false // Стоп — дальше не всплывает }) ``` --- ## Резюме | Слой | Что ловит | Механизм | |---|---|---| | `app.config.errorHandler` | Render, lifecycle, watchers, event handlers | Vue-встроенный | | `onErrorCaptured` | Ошибки дочерних компонентов (Error Boundary) | Composition API хук | | `window.onerror` | Любые sync JS-ошибки вне Vue | Браузерный API | | `unhandledrejection` | Непойманные промисы | Браузерный API | | HTTP interceptors | Ошибки сети и API | axios/fetch | 🔑 Три слоя: Vue errorHandler + browser events + HTTP interceptors. Error Boundary — для graceful degradation отдельных секций UI. ---

Как настроить глобальную обработку ошибок в Vue?