Логирование

Библиотека Quasar Framework предоставляет мощные инструменты для организации логирования в приложениях на Vue.js. Логирование играет ключевую роль в отладке, мониторинге и анализе поведения приложения. Quasar использует встроенный механизм Logger, который позволяет гибко управлять выводом сообщений разного уровня важности, направлять их в консоль и обрабатывать в соответствии с окружением (разработка или продакшн).

Подключение и настройка Logger

Для использования логирования в Quasar достаточно импортировать утилиту Logger из пакета Quasar:

import { Logger } from 'quasar'

Создание собственного экземпляра логгера осуществляется через метод create:

const log = Logger.create('my-app')

Параметры create позволяют настроить:

  • namespace — префикс сообщений (например, имя приложения или модуля),
  • level — минимальный уровень логирования (debug, info, warn, error),
  • display — управление выводом сообщений в консоль или скрытие некоторых уровней,
  • formatter — кастомная функция форматирования сообщений.

Пример кастомного форматтера:

const log = Logger.create('my-app', {
  level: 'debug',
  formatter: (entry) => `[${entry.level.toUpperCase()}][${entry.namespace}] ${entry.msg}`
})

Уровни логирования

Quasar поддерживает следующие уровни логирования, каждый из которых предназначен для определённых задач:

  1. debug — вывод подробной информации для разработки. Используется для отслеживания внутренних состояний и переменных.
  2. info — информативные сообщения, описывающие стандартные действия приложения (например, успешная загрузка данных).
  3. warn — предупреждения о потенциальных проблемах, которые не блокируют работу приложения.
  4. error — сообщения об ошибках, критических для работы приложения.

Пример использования уровней:

log.debug('Инициализация компонента', { component: 'Dashboard' })
log.info('Данные успешно загружены', { itemsCount: 42 })
log.warn('Некорректные данные от сервера', { status: 400 })
log.error('Ошибка при сохранении данных', { error: e })

Глобальное логирование и настройка окружения

Quasar позволяет задавать глобальный логгер через конфигурацию quasar.conf.js:

framework: {
  plugins: ['Notify'],
  config: {
    logger: {
      level: process.env.NODE_ENV === 'development' ? 'debug' : 'warn'
    }
  }
}

Такой подход обеспечивает автоматическое отключение лишнего логирования в продакшн-сборке, что повышает производительность и безопасность приложения.

Интеграция с Vue.js

Quasar логгер может быть интегрирован напрямую в компоненты Vue:

export default {
  name: 'Dashboard',
  mounted () {
    this.$q.logger.info('Компонент Dashboard смонтирован')
  }
}

Для этого в Quasar используется глобальный объект $q.logger, который автоматически доступен во всех компонентах и позволяет централизованно управлять выводом сообщений.

Продвинутые возможности

  • Фильтрация по namespace: можно создавать несколько логгеров с разными namespace, чтобы разделять сообщения по модулям приложения.
  • Асинхронная обработка: интеграция с внешними системами мониторинга через кастомные обработчики.
  • Форматирование с JSON: логирование объектов в JSON позволяет удобно сериализовать состояние приложения для анализа.

Пример фильтрации и кастомного обработчика:

const apiLog = Logger.create('api', {
  level: 'info',
  handler: (entry) => {
    if (entry.level === 'error') {
      sendToMonitoringService(entry)
    }
  }
})

apiLog.error('Ошибка API', { endpoint: '/users', code: 500 })

Практические рекомендации

  • Всегда использовать разные уровни логирования для разработки и продакшн-окружения.
  • Префикс namespace помогает быстро находить сообщения из конкретных модулей.
  • Объекты лучше логировать в формате JSON или через console.table, чтобы облегчить анализ.
  • Для критических ошибок использовать error и направлять их в внешние системы мониторинга.

Эта структура логирования обеспечивает ясность, контроль и масштабируемость приложений на Quasar, облегчая отладку и поддержку больших проектов.

Оглавление