Обробка помилок у Vue.js

Vue надає кілька механізмів для перехоплення та обробки помилок: хук onErrorCaptured, глобальні обробники помилок та межі помилок за допомогою компонентних патернів.

Хук onErrorCaptured

Перехоплює помилки з потомків компонентів:

vue

<script setup>
import { ref, onErrorCaptured } from 'vue'

const error = ref<Error | null>(null)

onErrorCaptured((err, instance, info) => {
  error.value = err as Error
  console.error('Перехоплена помилка:', err)
  console.log('Компонент:', instance)
  console.log('Інформація:', info) // наприклад, "функція setup", "рендер"

  return false // Зупинити поширення помилки
})
</script>

<template>
  <div v-if="error" class="error-boundary">
    <h2>Щось пішло не так</h2>
    <p>{{ error.message }}</p>
    <button @click="error = null">Спробувати знову</button>
  </div>

  <slot v-else />
</template>

Компонент межі помилок

vue

<!-- ErrorBoundary.vue -->
<script setup>
import { ref, onErrorCaptured } from 'vue'

const error = ref<Error | null>(null)
const errorInfo = ref('')

onErrorCaptured((err, instance, info) => {
  error.value = err as Error
  errorInfo.value = info
  return false
})

function retry() {
  error.value = null
}
</script>

<template>
  <div v-if="error" class="error-fallback">
    <h3>Помилка: {{ error.message }}</h3>
    <p>Сталася в: {{ errorInfo }}</p>
    <button @click="retry">Спробувати знову</button>
  </div>
  <slot v-else />
</template>

vue

<!-- Використання -->
<template>
  <ErrorBoundary>
    <DangerousComponent />
  </ErrorBoundary>
</template>

Глобальний обробник помилок

typescript

// main.ts
const app = createApp(App)

app.config.errorHandler = (err, instance, info) => {
  // Логування до зовнішнього сервісу (Sentry тощо)
  console.error('Глобальна помилка:', err)
  console.log('Компонент:', instance)
  console.log('Інформація:', info)

  // Відправка до сервісу відстеження помилок
  Sentry.captureException(err)
}

Глобальний обробник попереджень (Розробка)

typescript

app.config.warnHandler = (msg, instance, trace) => {
  console.warn('Попередження Vue:', msg)
  console.log('Трасування:', trace)
}

Асинхронна обробка помилок

vue

<script setup>
import { ref } from 'vue'

const data = ref(null)
const error = ref<Error | null>(null)
const loading = ref(false)

async function fetchData() {
  loading.value = true
  error.value = null

  try {
    const response = await fetch('/api/data')
    if (!response.ok) throw new Error(`HTTP ${response.status}`)
    data.value = await response.json()
  } catch (e) {
    error.value = e as Error
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div v-if="loading">Завантаження...</div>
  <div v-else-if="error" class="error">
    <p>{{ error.message }}</p>
    <button @click="fetchData">Спробувати знову</button>
  </div>
  <div v-else>{{ data }}</div>
</template>

Поширення помилок

Помилка компонента
    ↓
onErrorCaptured (батьківський) ← може зупинити з return false
    ↓ (якщо не зупинено)
onErrorCaptured (дідусь)
    ↓ (якщо не зупинено)
app.config.errorHandler (глобальний)

Метод	Область дії	Випадок використання
`try/catch`	Поточна функція	Асинхронні операції, API виклики
`onErrorCaptured`	Потомки компонентів	Межі помилок
`app.config.errorHandler`	Вся програма	Глобальне логування, Sentry
`app.config.warnHandler`	Вся програма (розробка)	Попередження під час розробки

Помилки Vue поширюються вгору по дереву компонентів через onErrorCaptured. Створюйте повторно використовувані компоненти межі помилок для перехоплення та елегантного відображення помилок. Завжди налаштовуйте глобальний обробник помилок (app.config.errorHandler) для логування до сервісів, таких як Sentry. Використовуйте try/catch для асинхронних операцій у компонентах.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань