Мониторинг ошибок

Для начала необходимо установить Element Plus и Vue 3, если проект ещё не настроен:

npm install element-plus

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

import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';

Глобальные уведомления позволяют мгновенно информировать пользователя о возникших ошибках, не требуя создания отдельных элементов в DOM.

Использование ElMessage для уведомлений об ошибках

Компонент ElMessage идеально подходит для отображения кратких сообщений о сбоях или исключениях:

try {
  // Некоторая операция, которая может вызвать ошибку
  const data = await fetchData();
} catch (error) {
  ElMessage({
    message: `Произошла ошибка: ${error.message}`,
    type: 'error',
    duration: 5000, // время отображения в миллисекундах
    showClose: true, // отображение кнопки закрытия
  });
}

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

  • type может принимать значения 'success' | 'warning' | 'info' | 'error'. Для ошибок всегда использовать 'error'.
  • duration управляет временем показа уведомления. Если указать 0, сообщение останется на экране до закрытия пользователем.
  • showClose добавляет возможность ручного закрытия, повышая удобство взаимодействия.

Логирование ошибок в реальном времени с ElNotification

Для более детального мониторинга и логирования можно использовать ElNotification:

import { ElNotification } from 'element-plus';

function handleError(error) {
  ElNotification({
    title: 'Ошибка выполнения',
    message: `${error.name}: ${error.message}`,
    type: 'error',
    duration: 0,
    position: 'top-right',
    dangerouslyUseHTMLString: true
  });
}

Особенности использования:

  • position позволяет задать положение уведомления на экране: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'.
  • dangerouslyUseHTMLString позволяет использовать HTML в тексте уведомления для форматирования текста, выделения важной информации или вставки ссылок на документацию.

Обработка ошибок глобально через Vue

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

import { createApp } from 'vue';
import App from './App.vue';
import { ElMessage } from 'element-plus';

const app = createApp(App);

app.config.errorHandler = (err, vm, info) => {
  ElMessage({
    message: `Глобальная ошибка: ${err.message} (${info})`,
    type: 'error',
    duration: 7000,
  });

  // Дополнительно можно отправлять ошибки на сервер для аналитики
  // sendErrorToServer({ error: err, info });
};

app.mount('#app');

Пояснения:

  • err — объект ошибки.
  • vm — экземпляр компонента, в котором произошла ошибка.
  • info — дополнительная информация о контексте ошибки.
  • Такой подход позволяет отслеживать ошибки без необходимости писать try/catch во всех компонентах.

Использование ElDialog для критических ошибок

Для ошибок, требующих немедленного внимания пользователя, подходит модальное окно ElDialog:

import { ref } from 'vue';
import { ElDialog, ElButton } from 'element-plus';

const isDialogVisible = ref(false);
const errorMessage = ref('');

function showCriticalError(error) {
  errorMessage.value = `${error.name}: ${error.message}`;
  isDialogVisible.value = true;
}

В шаблоне:

<el-dialog
  :visible.sync="isDialogVisible"
  title="Критическая ошибка"
  width="30%">
  <span>{{ errorMessage }}</span>
  <template #footer>
    <el-button type="primary" @click="isDialogVisible = false">Закрыть</el-button>
  </template>
</el-dialog>

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

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

Интеграция с логирующими сервисами

Для профессионального мониторинга ошибок удобно объединять Element Plus с внешними сервисами, например, Sentry или LogRocket. В этом случае уведомления через ElMessage или ElNotification могут быть дополнены отправкой данных на сервер:

import * as Sentry from '@sentry/vue';

app.config.errorHandler = (err, vm, info) => {
  ElMessage({
    message: `Ошибка: ${err.message}`,
    type: 'error',
    duration: 5000,
  });

  Sentry.captureException(err);
};

Рекомендации:

  • Разделять пользовательские уведомления и внутреннее логирование.
  • Для внутренних ошибок использовать минимальные уведомления пользователю и подробные логи для разработчиков.
  • Объединение Element Plus с такими сервисами повышает качество поддержки и позволяет быстро реагировать на критические ошибки.

Настройка повторных попыток и обратной связи

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

async function fetchDataWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return await response.json();
    } catch (err) {
      ElMessage({
        message: `Попытка ${i + 1} не удалась: ${err.message}`,
        type: 'warning',
        duration: 3000
      });
      if (i === retries - 1) throw err;
    }
  }
}

Преимущества подхода:

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

Стилизация уведомлений и диалогов

Element Plus позволяет настраивать внешний вид компонентов через CSS-переменные или кастомные классы:

.el-message--error {
  background-color: #fde2e2;
  color: #f56c6c;
  border-left: 4px solid #f56c6c;
}

.el-dialog__header {
  background-color: #f2dede;
  color: #a94442;
}

Важные моменты:

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

Эти подходы позволяют создавать продуманный, отзывчивый и централизованный мониторинг ошибок в приложении на Vue 3 с использованием Element Plus, обеспечивая как удобство для пользователя, так и детальное логирование для разработчиков.

Оглавление