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

В библиотеке Naive UI обработка ошибок является критически важной частью разработки интерфейсов, особенно при взаимодействии с асинхронными операциями, формами и динамическими компонентами. В основе лежит использование встроенных механизмов валидации, уведомлений и реактивного состояния для управления ошибками и их отображения пользователю.

Валидация форм

Naive UI предоставляет мощные возможности для валидации данных форм через компонент n-form и n-form-item. Основные механизмы:

  1. Правила валидации (rules) Каждое поле формы может иметь набор правил:

    import { reactive } from 'vue';

const formValue = reactive({
  username: '',
  email: ''
});

const rules = {
  username: [
    { required: true, message: 'Имя пользователя обязательно', trigger: 'blur' },
    { min: 3, message: 'Имя должно быть не менее 3 символов', trigger: 'blur' }
  ],
  email: [
    { required: true, message: 'Email обязателен', trigger: 'blur' },
    { type: 'email', message: 'Неверный формат email', trigger: 'blur' }
  ]
};

  2. Асинхронная проверка В rules можно использовать функции, возвращающие промис, что позволяет проверять уникальность логина или валидность данных на сервере:

    const asyncRule = {
  asyncValidator: (rule, value) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (value === 'admin') reject('Имя пользователя занято');
        else resolve();
      }, 500);
    });
  },
  trigger: 'blur'
};

  3. Методы управления ошибками Компонент формы предоставляет методы validate(), resetValidation() для контроля состояния валидации:

    formRef.value.validate().then(() => {
  console.log('Форма валидна');
}).catch(errors => {
  console.log('Ошибки валидации:', errors);
});

Отображение ошибок

Naive UI поддерживает визуальные индикаторы ошибок:

  • n-message и n-notification — быстрый способ уведомить пользователя о системной ошибке.
  • n-alert — для более стабильного отображения информации о проблеме.
  • Связка n-form-item и error-message автоматически подставляет сообщение в интерфейс формы при наличии ошибки.

Пример отображения ошибки при сабмите формы:

import { createDiscreteApi } from 'naive-ui';

const { message } = createDiscreteApi(['message']);

function submitForm() {
  formRef.value.validate().then(() => {
    message.success('Данные успешно отправлены');
  }).catch(errors => {
    message.error('Ошибка при заполнении формы');
    console.log(errors);
  });
}

Обработка ошибок при асинхронных операциях

Naive UI часто используется совместно с Vue и Composition API. Асинхронные операции требуют аккуратного подхода:

  1. Реактивное состояние ошибки Используется ref или reactive для отслеживания ошибок:

    import { ref } from 'vue';

const error = ref(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('Сервер вернул ошибку');
  } catch (e) {
    error.value = e.message;
  } finally {
    loading.value = false;
  }
}

  2. Интеграция с UI-компонентами Ошибки можно динамически отображать через n-alert или n-tag:

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

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

  • Использовать Vue errorHandler:
app.config.errorHandler = (err, vm, info) => {
  console.error('Глобальная ошибка:', err, info);
  message.error('Произошла непредвиденная ошибка');
};
  • Логирование ошибок на сервер для последующего анализа.
  • Комбинация с n-notification для уведомления пользователя о критических сбоях.

Паттерны обработки ошибок

  1. Fail-fast — раннее выявление ошибки и мгновенное уведомление пользователя.
  2. Graceful degradation — интерфейс продолжает работать даже при частичных ошибках.
  3. Retry logic — возможность повторной попытки при сетевых сбоях.
  4. Validation before submission — проверка данных до отправки на сервер.

Применение этих паттернов вместе с компонентами Naive UI позволяет создавать устойчивые и отзывчивые интерфейсы, минимизируя влияние ошибок на пользовательский опыт.

Взаимодействие с сторонними библиотеками

Naive UI легко интегрируется с такими инструментами, как Axios и Pinia, для централизованного управления ошибками:

  • В Axios можно использовать перехватчики (interceptors) для обработки HTTP-ошибок:
import axios from 'axios';

axios.interceptors.response.use(
  response => response,
  error => {
    message.error(`Ошибка сервера: ${error.response?.status}`);
    return Promise.reject(error);
  }
);
  • Pinia store может хранить глобальные состояния ошибок, облегчая доступ к ним из разных компонентов.
Оглавление