Урок 11

Мониторинг и логи в продакшене

После деплоя важно видеть, что происходит с приложением: ошибки, производительность, пользовательские действия.

Что мониторить

  • Ошибки — исключения на клиенте и сервере
  • Производительность — Web Vitals, время ответа API
  • Трафик — количество запросов, источники
  • Бизнес-метрики — регистрации, заказы, конверсии
  • Инфраструктуру — CPU, память, БД

Vercel Analytics

Встроен в Vercel. Включается в дашборде или через пакет:

npm install @vercel/analytics

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html>
            <body>
                {children}
                <Analytics />
            </body>
        </html>
    );
}

Показывает: посещения, страницы, устройства, страны, источники.

Vercel Speed Insights

npm install @vercel/speed-insights

import { SpeedInsights } from '@vercel/speed-insights/next';

<SpeedInsights />

Показывает Core Web Vitals (LCP, FID, CLS) для реальных пользователей.

Sentry

Для отслеживания ошибок:

npx @sentry/wizard@latest -i nextjs

Создаёт конфиги и подключает SDK. Ошибки клиента и сервера попадают в дашборд Sentry.

Использование:

try {
    await riskyOperation();
} catch (error) {
    Sentry.captureException(error);
    throw error;
}

Логи в Next.js

На сервере — обычный console.log:

export async function GET() {
    console.log('API called', { timestamp: Date.now() });
    return NextResponse.json({ ok: true });
}

В Vercel логи доступны в дашборде. Для локальной разработки — в терминале.

Структурированные логи

Вместо строк — объекты:

console.log(JSON.stringify({
    level: 'info',
    message: 'Post created',
    postId: post.id,
    userId: user.id,
    timestamp: new Date().toISOString(),
}));

Удобно для парсинга в системах логирования (Datadog, Logtail, Papertrail).

Health check

Создай эндпоинт для проверки:

// app/api/health/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
    try {
        await db.$queryRaw`SELECT 1`;
        return NextResponse.json({
            status: 'ok',
            timestamp: new Date().toISOString(),
        });
    } catch (error) {
        return NextResponse.json(
            { status: 'error', message: 'DB unavailable' },
            { status: 503 }
        );
    }
}

Балансировщики и системы мониторинга дергают этот эндпоинт.

Кастомные события

В Vercel Analytics:

'use client';

import { track } from '@vercel/analytics';

export function BuyButton() {
    return (
        <button
            onClick={() => {
                track('buy_clicked', { productId: 'abc' });
                // ...
            }}
        >
            Купить
        </button>
    );
}

Uptime-мониторинг

Внешние сервисы проверяют доступность:

  • Better Stack
  • UptimeRobot
  • Pingdom

Проверяют /api/health каждую минуту. Если сервер не отвечает — уведомление в Slack, Telegram, email.

Логирование в базу

Для важных событий:

export async function createPost(data: PostInput) {
    const post = await db.posts.create({ data });

    await db.auditLog.create({
        data: {
            action: 'post.created',
            entityId: post.id,
            userId: data.authorId,
            timestamp: new Date(),
        },
    });

    return post;
}

Алерты

Правила:

  • Ошибок больше 10 в минуту → алерт
  • Время ответа > 2 секунд → алерт
  • Health check падает 3 раза подряд → алерт
  • CPU > 80% пять минут → алерт

Инструменты: Better Stack, Sentry Alerts, Vercel Monitoring.

Чек-лист перед продакшеном

  • Sentry подключён
  • Vercel Analytics включён
  • Speed Insights включён
  • Health check есть
  • Логи структурированы
  • Алерты настроены
  • Uptime-мониторинг работает
  • Бэкапы БД настроены

Задание

  1. Подключи Sentry
  2. Добавь Vercel Analytics
  3. Создай /api/health
  4. Настрой алерт на ошибки в Sentry

Итоги курса

  • Ошибки — в Sentry
  • Метрики — в Vercel Analytics
  • Health check — для балансировщиков
  • Логи — структурированные
  • Алерты — обязательны
  • Регулярно проверяй дашборды