M

MLOG

Українська

Використовуйте можливості інструментації Next.js, щоб отримати глибоке розуміння продуктивності вашого додатку, виявляти вузькі місця та оптимізувати користувацький досвід. Дізнайтеся, як ефективно впроваджувати хуки для моніторингу додатків.

Інструментація Next.js: хуки для моніторингу додатків для аналізу продуктивності

Інструментація Next.js надає потужний механізм для спостереження та вимірювання продуктивності вашого додатку в робочому середовищі. Використовуючи хуки для моніторингу додатків, ви можете отримати глибоке розуміння обробки запитів, рендерингу на стороні сервера, вибірки даних та інших критичних аспектів поведінки вашого додатку. Це дозволяє виявляти вузькі місця, діагностувати проблеми з продуктивністю та оптимізувати ваш додаток для кращого користувацького досвіду. Це особливо важливо при розгортанні додатків Next.js глобально, де затримки в мережі та географічно розподілені користувачі можуть створювати унікальні виклики.

Розуміння інструментації Next.js

Функція інструментації в Next.js дозволяє реєструвати хуки, які виконуються на різних етапах життєвого циклу додатку. Ці хуки можна використовувати для збору метрик, трасувань та логів, які потім можна надсилати до системи моніторингу продуктивності додатків (APM) або інших інструментів спостережуваності. Це забезпечує комплексне уявлення про продуктивність вашого додатку в реальному часі.

На відміну від традиційного моніторингу на стороні клієнта, який фіксує лише досвід у браузері, інструментація Next.js забезпечує спостережуваність як на стороні клієнта, так і на стороні сервера, що дозволяє отримати повне уявлення про продуктивність вашого додатку. Це критично важливо для розуміння впливу рендерингу на стороні сервера, API-маршрутів та вибірки даних на загальний користувацький досвід.

Ключові переваги інструментації

Налаштування інструментації в Next.js

Щоб увімкнути інструментацію у вашому додатку Next.js, вам потрібно створити файл instrumentation.js (або instrumentation.ts) у кореневому каталозі вашого проєкту. Цей файл міститиме хуки, які ви хочете зареєструвати.

Ось базовий приклад файлу instrumentation.ts:

// instrumentation.ts

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { trace } = await import('./utils/tracing');

    trace('registering-tracing');
  }
}

У цьому прикладі ми імпортуємо функцію trace з файлу ./utils/tracing і викликаємо її всередині функції register. Функція register автоматично викликається Next.js під час запуску додатку.

Умовне виконання залежно від середовища виконання

Змінна process.env.NEXT_RUNTIME є вирішальною для визначення контексту виконання. Вона дозволяє вам умовно виконувати код залежно від того, чи працює додаток у середовищі Node.js (для рендерингу на стороні сервера, API-маршрутів тощо) чи в середовищі Edge Runtime (для edge-функцій). Це важливо, оскільки деякі бібліотеки або інструменти моніторингу можуть бути сумісними лише з одним або іншим середовищем виконання.

Наприклад, ви можете захотіти використовувати певний APM-агент для середовищ Node.js і інший інструмент для середовищ Edge Runtime. Використання process.env.NEXT_RUNTIME дозволяє завантажувати відповідні модулі лише за потреби.

Впровадження хуків для моніторингу додатків

Тепер розглянемо кілька прикладів того, як впроваджувати хуки для моніторингу додатків у Next.js.

1. Вимірювання часу обробки запитів

Одним із поширених випадків використання інструментації є вимірювання часу, необхідного для обробки вхідних запитів. Це може допомогти вам виявити повільні ендпоінти та оптимізувати їхню продуктивність.

Ось приклад того, як виміряти час обробки запиту за допомогою performance API:

// utils/tracing.ts

import { performance } from 'perf_hooks';

export function trace(eventName: string) {
  const start = performance.now();

  return () => {
    const end = performance.now();
    const duration = end - start;

    console.log(`[${eventName}] took ${duration}ms`);
    // У реальному додатку ви б надсилали ці дані до системи APM.
  };
}

У файлі instrumentation.ts:

// instrumentation.ts

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { trace } = await import('./utils/tracing');

    const endTrace = trace('request-handling');

    // Симуляція обробки запиту
    await new Promise((resolve) => setTimeout(resolve, 100));

    endTrace();
  }
}

Цей приклад вимірює час, необхідний для обробки запиту, і виводить тривалість у консоль. У реальному додатку ви б надсилали ці дані до системи APM для подальшого аналізу.

2. Моніторинг часу рендерингу на стороні сервера

Рендеринг на стороні сервера (SSR) є ключовою особливістю Next.js, але він також може бути вузьким місцем у продуктивності. Моніторинг часу, необхідного для рендерингу сторінок на сервері, є вирішальним для забезпечення швидкого користувацького досвіду.

Ви можете використовувати інструментацію для вимірювання часу, необхідного для виконання функцій getServerSideProps або getStaticProps. Ці функції відповідають за отримання даних та їх підготовку для рендерингу на сервері.

// pages/index.tsx

import { GetServerSideProps } from 'next';
import { trace } from '../utils/tracing';

interface Props {
  data: string;
}

export const getServerSideProps: GetServerSideProps = async () => {
  const endTrace = trace('getServerSideProps');
  const data = await fetchData();
  endTrace();

  return {
    props: { data },
  };
};

async function fetchData() {
  // Симуляція отримання даних із зовнішнього API
  await new Promise((resolve) => setTimeout(resolve, 50));
  return 'Data from API';
}

export default function Home({ data }: Props) {
  return 
{data}
;
}

У цьому прикладі ми використовуємо функцію trace для вимірювання часу, необхідного для виконання функції getServerSideProps. Це дозволяє нам виявляти проблеми з продуктивністю в процесі отримання даних.

3. Відстеження продуктивності API-маршрутів

API-маршрути Next.js дозволяють створювати безсерверні функції, які обробляють API-запити. Моніторинг продуктивності цих API-маршрутів є важливим для забезпечення швидкого реагування бекенду.

Ви можете використовувати інструментацію для вимірювання часу, необхідного для обробки API-запитів у ваших API-маршрутах.

// pages/api/hello.ts

import type { NextApiRequest, NextApiResponse } from 'next'
import { trace } from '../../utils/tracing';

type Data = {
  name: string
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const endTrace = trace('api-hello');
  // Симуляція деякої роботи
  await new Promise((resolve) => setTimeout(resolve, 25));
  endTrace();
  res.status(200).json({ name: 'John Doe' })
}

Цей приклад вимірює час, необхідний для обробки API-запиту, і повертає відповідь у форматі JSON. Це допомагає вам зрозуміти продуктивність вашого бекенду та виявити повільні API-ендпоінти.

4. Моніторинг продуктивності Edge Runtime

Next.js Edge Runtime дозволяє розгортати ваш додаток на "edge" (на межі мережі), ближче до ваших користувачів. Це може значно покращити продуктивність, особливо для глобально розподілених додатків. Однак важливо відстежувати продуктивність вашого додатку в Edge Runtime, щоб переконатися, що він працює ефективно.

Інструментацію можна використовувати для моніторингу продуктивності вашого додатку в Edge Runtime. Це дозволяє виявляти проблеми з продуктивністю, специфічні для середовища Edge Runtime.

Важливе зауваження: Не всі інструменти моніторингу підтримують Edge Runtime. Можливо, вам доведеться використовувати спеціалізовані інструменти або бібліотеки, розроблені для середовища Edge Runtime.

Наприклад, Vercel надає вбудовану аналітику, яку можна використовувати для моніторингу продуктивності вашого додатку в Edge Runtime. Ви також можете використовувати сторонні інструменти моніторингу, які підтримують Edge Runtime, такі як Datadog або New Relic.

Інтеграція з системами APM

Дані, зібрані вашими хуками інструментації, є найціннішими, коли їх надсилають до системи моніторингу продуктивності додатків (APM). Системи APM надають інструменти для візуалізації, аналізу та сповіщення про дані продуктивності. Популярні системи APM включають:

Конкретні кроки для інтеграції з системою APM будуть відрізнятися залежно від обраної вами системи. Однак загальний процес включає наступні кроки:

  1. Встановіть APM-агент або SDK у вашому додатку Next.js.
  2. Налаштуйте APM-агент, вказавши API-ключ або облікові дані вашої системи APM.
  3. Використовуйте API APM-агента для надсилання метрик, трасувань та логів з ваших хуків інструментації.

Приклад використання OpenTelemetry з Datadog:

OpenTelemetry — це фреймворк спостережуваності з відкритим кодом, який надає стандартний спосіб збору та експорту телеметричних даних. Його можна використовувати для інтеграції з різними системами APM, включаючи Datadog.

// utils/tracing.ts

import { trace, context } from '@opentelemetry/api';

const tracer = trace.getTracer('my-app-tracer');

export function traceFunction any>(
  operationName: string,
  fn: T
): T {
  return function tracedFunction(...args: Parameters): ReturnType {
    const span = tracer.startSpan(operationName);
    const ctx = trace.setSpan(context.active(), span);

    try {
      return context.with(ctx, () => fn(...args));
    } finally {
      span.end();
    }
  } as T;
}

Використання всередині `getServerSideProps`:

// pages/index.tsx

import { GetServerSideProps } from 'next';
import { traceFunction } from '../utils/tracing';

interface Props {
  data: string;
}

async function fetchData() {
  // Симуляція отримання даних із зовнішнього API
  await new Promise((resolve) => setTimeout(resolve, 50));
  return 'Data from API';
}

export const getServerSideProps: GetServerSideProps = async () => {
  const tracedFetchData = traceFunction('fetchData', fetchData);
  const data = await tracedFetchData();

  return {
    props: { data },
  };
};

export default function Home({ data }: Props) {
  return 
{data}
;
}

Цей спрощений приклад OpenTelemetry демонструє, як обгорнути функцію трейсинговим спаном. Фактичне налаштування та конфігурація OpenTelemetry SDK та агента Datadog є більш складними і вимагають додаткових кроків, включаючи налаштування змінних середовища, конфігурацію експортера та ініціалізацію SDK у вашому файлі `instrumentation.ts`. Зверніться до документації OpenTelemetry та Datadog для отримання повних інструкцій.

Найкращі практики для інструментації Next.js

Поширені помилки та їх вирішення

Висновок

Інструментація Next.js надає потужний механізм для спостереження та вимірювання продуктивності вашого додатку в робочому середовищі. Впроваджуючи хуки для моніторингу додатків, ви можете отримати глибоке розуміння обробки запитів, рендерингу на стороні сервера, вибірки даних та інших критичних аспектів поведінки вашого додатку. Це дозволяє виявляти вузькі місця, діагностувати проблеми з продуктивністю та оптимізувати ваш додаток для кращого користувацького досвіду.

Дотримуючись найкращих практик, викладених у цьому посібнику, ви зможете ефективно використовувати інструментацію Next.js для покращення продуктивності та надійності ваших додатків, незалежно від того, де знаходяться ваші користувачі. Не забувайте вибирати правильну систему APM для своїх потреб і постійно відстежувати продуктивність вашого додатку, щоб завчасно виявляти та вирішувати проблеми.

Інструментація Next.js: хуки для моніторингу додатків для аналізу продуктивності | MLOG