Обработка ошибок

Quasar Framework, как расширение Vue.js, предоставляет встроенные механизмы для управления ошибками на уровне компонентов и глобально, что позволяет создавать стабильные и предсказуемые приложения. Обработка ошибок может быть реализована через try/catch, Vue error hooks, а также через специализированные компоненты и утилиты Quasar для уведомлений и логирования.

Локальная обработка ошибок с try/catch

Для обработки ошибок внутри методов компонентов используется стандартный подход Jav * aScript:

methods: {
  async fetchData() {
    try {
      const response = await axios.get('/api/data');
      this.data = response.data;
    } catch (error) {
      this.$q.notify({
        type: 'negative',
        message: `Ошибка загрузки данных: ${error.message}`
      });
      console.error(error);
    }
  }
}

Ключевые моменты:

  • try/catch позволяет ловить как сетевые ошибки, так и ошибки выполнения кода.
  • Quasar предоставляет компонент Notify, который интегрирован с Vue и позволяет показывать уведомления об ошибках пользователю.
  • Ошибки логируются в консоль для отладки.

Глобальная обработка ошибок Vue

Quasar наследует возможности Vue.js для глобальной обработки ошибок. В boot файлах Quasar можно зарегистрировать обработчик ошибок для всего приложения:

export default async ({ app }) => {
  app.config.errorHandler = (err, vm, info) => {
    console.error('Произошла ошибка:', err);
    console.info('Информация:', info);
    vm.$q.notify({
      type: 'negative',
      message: 'Произошла непредвиденная ошибка'
    });
  };
};

Особенности:

  • err — объект ошибки.
  • vm — компонент, в котором произошла ошибка.
  • info — строка с контекстом (например, “mounted hook”).
  • Позволяет централизованно логировать ошибки и информировать пользователя.

Использование ErrorBoundary для компонентов

Quasar совместим с подходом Vue 3 ErrorBoundary, который позволяет изолировать ошибки внутри конкретного компонента, не ломая весь интерфейс:

Преимущества:

  • Ошибка отображается в пределах компонента, не нарушая работу приложения.
  • Можно кастомизировать UI для отображения ошибки.
  • Удобно для сложных интерфейсов с множеством динамических компонентов.

Интеграция с Quasar Notify и Dialog

Для повышения UX ошибки часто сопровождаются визуальными уведомлениями. Quasar предоставляет два основных инструмента:

  1. Notify – краткие уведомления:
this.$q.notify({
  type: 'negative',
  message: 'Не удалось загрузить данные'
});
  1. Dialog – модальные окна для критических ошибок:
this.$q.dialog({
  title: 'Ошибка',
  message: 'Не удалось выполнить операцию',
  ok: true
});

Применение:

  • Notify подходит для не критичных ошибок или подсказок.
  • Dialog лучше использовать для ошибок, требующих действия пользователя.

Логирование ошибок на сервер

Для крупномасштабных приложений важна интеграция с серверным логированием:

methods: {
  async fetchData() {
    try {
      const response = await axios.get('/api/data');
      this.data = response.data;
    } catch (error) {
      await axios.post('/api/log', { error: error.message, stack: error.stack });
      this.$q.notify({ type: 'negative', message: 'Ошибка загружена на сервер' });
    }
  }
}

Преимущества:

  • Позволяет отслеживать ошибки в продакшн-среде.
  • Упрощает диагностику проблем, которые трудно воспроизвести локально.

Обработка ошибок роутинга

Quasar использует Vue Router, поэтому ошибки при переходе между страницами также можно контролировать:

router.beforeEach((to, from, next) => {
  try {
    // Проверка прав доступа или данных
    next();
  } catch (error) {
    console.error(error);
    next('/error-page');
  }
});

Особенности:

  • Можно перенаправлять на отдельную страницу ошибок.
  • Полезно для обработки 404 и 403 ситуаций.

Советы по структурированию обработки ошибок

  • Локальные ошибки: используйте try/catch внутри методов компонентов.
  • Глобальные ошибки: используйте app.config.errorHandler.
  • Критические ошибки компонентов: применяйте ErrorBoundary.
  • Визуальная обратная связь: используйте Notify и Dialog.
  • Серверное логирование: интегрируйте с REST API или внешними сервисами типа Sentry.

Такой подход обеспечивает многослойную защиту приложения и делает его устойчивым к неожиданным ситуациям.

Оглавление