Next.js

ClickStack может принимать нативные трассировки OpenTelemetry из ваших бессерверных функций Next.js в Next 13.2+. В этом руководстве рассматривается интеграция:

Логи консоли
Трассировки

Если вам нужно воспроизведение сеанса или мониторинг в браузере, установите вместо этого браузерную интеграцию.

Установка

Включите хук инструментирования (обязательно для v15 и ниже)

Для начала нужно включить хук инструментирования Next.js, задав experimental.instrumentationHook = true; в файле next.config.js. Пример:

const nextConfig = {
  experimental: {
    instrumentationHook: true,
  },
  // Игнорировать предупреждения пакетов OTel 
  // https://github.com/open-telemetry/opentelemetry-js/issues/4173#issuecomment-1822938936
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack },
  ) => {
    if (isServer) {
      config.ignoreWarnings = [{ module: /opentelemetry/ }];
    }
    return config;
  },
};

module.exports = nextConfig;

Установка SDK OpenTelemetry для ClickHouse

NPM
Yarn

npm install @hyperdx/node-opentelemetry

yarn add @hyperdx/node-opentelemetry

Создайте файлы для инструментирования

Создайте файл с именем instrumentation.ts (или .js) в корневом каталоге проекта Next.js со следующим содержимым:

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { init } = await import('@hyperdx/node-opentelemetry');
    init({
      apiKey: '<YOUR_INGESTION_API_KEY>', // можно настроить через переменную окружения `HYPERDX_API_KEY`
      service: '<MY_SERVICE_NAME>', // можно настроить через переменную окружения `OTEL_SERVICE_NAME`
      additionalInstrumentations: [], // опционально, по умолчанию: []
    });
  }
}

Это позволит Next.js импортировать инструментирование OpenTelemetry при любом вызове бессерверной функции.

Настройка переменных окружения

Если вы отправляете трассировки напрямую в ClickStack через OpenTelemetry, запустите сервер Next.js со следующими переменными окружения, чтобы отправлять спаны в OTel collector:

Управляемый ClickStack
ClickStack с открытым исходным кодом

copy

OTEL_SERVICE_NAME=<MY_SERVICE_NAME> \
OTEL_EXPORTER_OTLP_ENDPOINT=http://your-otel-collector:4318
npm run dev

copy

HYPERDX_API_KEY=<YOUR_INGESTION_API_KEY> \
OTEL_SERVICE_NAME=<MY_SERVICE_NAME> \
OTEL_EXPORTER_OTLP_ENDPOINT=http://your-otel-collector:4318
npm run dev

Если вы разворачиваете приложение в Vercel, убедитесь, что все перечисленные выше переменные окружения настроены для вашего развертывания.

Возможности

Руководства

Установка

Включите хук инструментирования (обязательно для v15 и ниже)

Установка SDK OpenTelemetry для ClickHouse

Создайте файлы для инструментирования

Настройка переменных окружения

​Установка

​Включите хук инструментирования (обязательно для v15 и ниже)

​Установка SDK OpenTelemetry для ClickHouse

​Создайте файлы для инструментирования

​Настройка переменных окружения

Установка

Включите хук инструментирования (обязательно для v15 и ниже)

Установка SDK OpenTelemetry для ClickHouse

Создайте файлы для инструментирования

Настройка переменных окружения