Моніторинг продуктивності · fullstack.org.ua

fullstack.org.ua

Моніторинг продуктивності · fullstack.org.ua

LCP

INP

CLS

FCP

TTFB

tsx

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { useReportWebVitals } from 'next/web-vitals';

export default function App({ Component, pageProps }: AppProps) {
  useReportWebVitals((metric) => {
    const payload = JSON.stringify({
      name: metric.name,
      value: metric.value,
      delta: metric.delta,
      id: metric.id,
      rating: metric.rating,
      path: window.location.pathname,
      release: process.env.NEXT_PUBLIC_RELEASE ?? 'unknown',
      recordedAt: new Date().toISOString(),
    });

    if (navigator.sendBeacon) {
      const body = new Blob([payload], {
        type: 'application/json',
      });

      navigator.sendBeacon('/api/vitals', body);
      return;
    }

    void fetch('/api/vitals', {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
      },
      body: payload,
      keepalive: true,
    });
  });

  return <Component {...pageProps} />;
}

typescript

// pages/api/vitals.ts
import type { NextApiRequest, NextApiResponse } from 'next';

type VitalPayload = {
  name?: string;
  value?: number;
  delta?: number;
  id?: string;
  rating?: string;
  path?: string;
  release?: string;
  recordedAt?: string;
};

const allowedMetrics = new Set(['LCP', 'INP', 'CLS', 'FCP', 'TTFB']);

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  if (req.method !== 'POST') {
    res.setHeader('Allow', 'POST');
    return res.status(405).end();
  }

  const body = req.body as VitalPayload;

  if (
    typeof body.name !== 'string' ||
    !allowedMetrics.has(body.name) ||
    typeof body.value !== 'number' ||
    !Number.isFinite(body.value)
  ) {
    return res.status(400).json({ error: 'Некоректна метрика' });
  }

  // У production тут слід передати подію до системи збору телеметрії.
  console.info(
    JSON.stringify({
      type: 'web-vital',
      name: body.name,
      value: body.value,
      delta: body.delta,
      id: body.id,
      rating: body.rating,
      path: body.path,
      release: body.release,
    }),
  );

  return res.status(204).end();
}

tsx

// app/report-web-vitals.tsx
'use client';

import { useReportWebVitals } from 'next/web-vitals';

export function ReportWebVitals() {
  useReportWebVitals((metric) => {
    void fetch('/api/vitals', {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
      },
      body: JSON.stringify({
        name: metric.name,
        value: metric.value,
        delta: metric.delta,
        id: metric.id,
        rating: metric.rating,
        path: window.location.pathname,
      }),
      keepalive: true,
    });
  });

  return null;
}

typescript

// pages/api/products.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { performance } from 'node:perf_hooks';

type Product = {
  id: number;
  name: string;
  price: number;
};

async function loadProducts(): Promise<Product[]> {
  // У реальному застосунку тут може бути запит до бази даних.
  return [
    { id: 1, name: 'Keyboard', price: 120 },
    { id: 2, name: 'Mouse', price: 80 },
  ];
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const startedAt = performance.now();
  const requestId =
    typeof req.headers['x-request-id'] === 'string'
      ? req.headers['x-request-id']
      : crypto.randomUUID();

  try {
    const dataStartedAt = performance.now();
    const products = await loadProducts();
    const dataDuration = performance.now() - dataStartedAt;
    const totalDuration = performance.now() - startedAt;

    res.setHeader(
      'Server-Timing',
      `data;dur=${dataDuration.toFixed(1)}, total;dur=${totalDuration.toFixed(1)}`,
    );
    res.setHeader('x-request-id', requestId);

    console.info(
      JSON.stringify({
        type: 'http-request',
        requestId,
        method: req.method,
        route: '/api/products',
        statusCode: 200,
        dataDurationMs: Number(dataDuration.toFixed(1)),
        totalDurationMs: Number(totalDuration.toFixed(1)),
      }),
    );

    return res.status(200).json(products);
  } catch (error) {
    const totalDuration = performance.now() - startedAt;

    console.error(
      JSON.stringify({
        type: 'http-request-error',
        requestId,
        route: '/api/products',
        totalDurationMs: Number(totalDuration.toFixed(1)),
        error: error instanceof Error ? error.message : 'Невідома помилка',
      }),
    );

    return res.status(500).json({ error: 'Внутрішня помилка сервера' });
  }
}