Prometheus метрики

Prometheus — это система мониторинга и сбора метрик с открытым исходным кодом, которая используется для отслеживания производительности приложений и инфраструктуры. В контексте JavaScript и веб-приложений Prometheus позволяет собирать детальные метрики о работе страниц, сервисов и API. Интеграция с библиотекой Lighthouse открывает возможность получать метрики производительности веб-страниц и экспонировать их в формате, пригодном для Prometheus.

Настройка Lighthouse для экспорта метрик

Lighthouse — это инструмент для аудита производительности, доступности и SEO веб-страниц. В стандартном использовании он выводит отчёты в формате HTML или JSON. Для работы с Prometheus требуется преобразовать результаты аудита в метрики, которые можно собирать через Prometheus Exporter.

import lighthouse from 'lighthouse';
import chromeLauncher from 'chrome-launcher';
import { writeFileSync } from 'fs';

async function runLighthouse(url) {
    const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
    const options = { port: chrome.port, output: 'json' };
    const runnerResult = await lighthouse(url, options);

    const reportJson = runnerResult.report;
    writeFileSync('lighthouse-report.json', reportJson);

    await chrome.kill();
    return JSON.parse(reportJson);
}

Преобразование отчёта в Prometheus метрики

Lighthouse предоставляет множество метрик производительности, включая:

  • Performance Score – комплексная оценка производительности страницы.
  • First Contentful Paint (FCP) – время до первого отображения контента.
  • Largest Contentful Paint (LCP) – время до загрузки самого большого элемента страницы.
  • Cumulative Layout Shift (CLS) – сдвиги макета страницы.
  • Total Blocking Time (TBT) – суммарное время блокировки основного потока.

Для интеграции с Prometheus необходимо каждую метрику преобразовать в gauge или counter, используя стандартный формат Prometheus:

# HELP lighthouse_fcp_seconds Время до First Contentful Paint
# TYPE lighthouse_fcp_seconds gauge
lighthouse_fcp_seconds 1.23

Пример кода на Node.js для экспорта метрик через Prometheus клиент:

import client from 'prom-client';
import fs from 'fs';

const register = new client.Registry();

const fcpGauge = new client.Gauge({
    name: 'lighthouse_fcp_seconds',
    help: 'First Contentful Paint time in seconds'
});

const lcpGauge = new client.Gauge({
    name: 'lighthouse_lcp_seconds',
    help: 'Largest Contentful Paint time in seconds'
});

register.registerMetric(fcpGauge);
register.registerMetric(lcpGauge);

function exportMetrics(lighthouseReportPath) {
    const report = JSON.parse(fs.readFileSync(lighthouseReportPath, 'utf-8'));
    fcpGauge.set(report.audits['first-contentful-paint'].numericValue / 1000);
    lcpGauge.set(report.audits['largest-contentful-paint'].numericValue / 1000);
}

exportMetrics('lighthouse-report.json');

console.log(register.metrics());

Автоматизация сбора метрик

Для регулярного мониторинга необходимо автоматизировать запуск Lighthouse и экспозицию метрик. Это достигается с помощью:

  • CRON или планировщика задач для периодического запуска Lighthouse.
  • Node.js сервера для экспозиции /metrics эндпоинта.

Пример экспонирования через Express:

import express from 'express';
import { register } from 'prom-client';

const app = express();

app.get('/metrics', async (req, res) => {
    res.set('Content-Type', register.contentType);
    res.end(await register.metrics());
});

app.listen(3000, () => console.log('Prometheus metrics available at http://localhost:3000/metrics'));

Метрики пользовательского опыта

Помимо стандартных метрик производительности, Lighthouse позволяет извлекать показатели пользовательского опыта:

  • Accessibility Score – оценка доступности интерфейса.
  • SEO Score – показатели поисковой оптимизации.
  • Best Practices Score – соблюдение лучших практик веб-разработки.

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

const accessibilityGauge = new client.Gauge({
    name: 'lighthouse_accessibility_score',
    help: 'Accessibility score from Lighthouse'
});

accessibilityGauge.set(report.categories.accessibility.score * 100);

Интеграция с Grafana

После экспозиции метрик через Prometheus, их можно визуализировать с помощью Grafana. Рекомендуется создавать дашборды с ключевыми метриками:

  • FCP, LCP, CLS и TBT для мониторинга производительности.
  • Accessibility и Best Practices для контроля качества интерфейса.
  • Временные графики с трендами по версиям сайта.

Использование Grafana позволяет отслеживать деградацию метрик и принимать решения по оптимизации кода и инфраструктуры.

Практические советы

  • Минимизировать нагрузку на сервер при частых запусках Lighthouse. Использовать headless Chrome с ограничением ресурсов.
  • Сохранять результаты аудита для анализа и построения исторических графиков.
  • Экспонировать только ключевые метрики для Prometheus, чтобы не перегружать систему сбором избыточных данных.

Методика интеграции Lighthouse с Prometheus позволяет построить комплексный мониторинг фронтенд-производительности и пользовательского опыта, обеспечивая количественный контроль качества веб-приложений.

Оглавление