Next.js

O ClickStack pode ingerir traces nativos do OpenTelemetry das suas funções serverless do Next.js no Next 13.2+.

Se você estiver procurando por replay de sessão/monitoramento no navegador, instale a integração Browser.

Instalação

Habilite o hook de instrumentação (obrigatório para a v15 e anteriores)

Para começar, você precisará habilitar o hook de instrumentação do Next.js definindo experimental.instrumentationHook = true; no arquivo next.config.js. Exemplo:

const nextConfig = {
  experimental: {
    instrumentationHook: true,
  },
  // Ignorar avisos de pacotes 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;

Instale o SDK OpenTelemetry do ClickHouse

NPM
Yarn

npm install @hyperdx/node-opentelemetry

yarn add @hyperdx/node-opentelemetry

Criar arquivos de instrumentação

Crie um arquivo chamado instrumentation.ts (ou .js) na raiz do seu projeto Next.js com o seguinte conteúdo:

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { init } = await import('@hyperdx/node-opentelemetry');
    init({
      apiKey: '<YOUR_INGESTION_API_KEY>', // optionally configure via `HYPERDX_API_KEY` env var
      service: '<YOUR_SERVICE_NAME>', // optionally configure via `OTEL_SERVICE_NAME` env var
      additionalInstrumentations: [], // optional, default: []
    });
  }
}

Isso permitirá que o Next.js importe a instrumentação do OpenTelemetry para qualquer invocação de função serverless.

Configure as variáveis de ambiente

Se você estiver enviando traces diretamente para o ClickStack por meio do OpenTelemetry, precisará iniciar seu servidor Next.js com as seguintes variáveis de ambiente para direcionar os spans ao OTel collector:

Managed ClickStack
ClickStack Open Source

copy

OTEL_SERVICE_NAME=<YOUR_SERVICE_NAME> \
OTEL_EXPORTER_OTLP_ENDPOINT=<YOUR_OTEL_COLLECTOR_HTTP_ENDPOINT>
npm run dev

copy

HYPERDX_API_KEY=<YOUR_INGESTION_API_KEY> \
OTEL_SERVICE_NAME=<YOUR_SERVICE_NAME> \
OTEL_EXPORTER_OTLP_ENDPOINT=<YOUR_OTEL_COLLECTOR_HTTP_ENDPOINT>
npm run dev

Se você estiver implantando na Vercel, certifique-se de que todas as variáveis de ambiente acima estejam configuradas na sua implantação.

Primeiros passos

Recursos

Gerenciamento do ClickStack

Guias

Parceiros de integração

Instalação

Habilite o hook de instrumentação (obrigatório para a v15 e anteriores)

Instale o SDK OpenTelemetry do ClickHouse

Criar arquivos de instrumentação

Configure as variáveis de ambiente

​Instalação

​Habilite o hook de instrumentação (obrigatório para a v15 e anteriores)

​Instale o SDK OpenTelemetry do ClickHouse

​Criar arquivos de instrumentação

​Configure as variáveis de ambiente

Instalação

Habilite o hook de instrumentação (obrigatório para a v15 e anteriores)

Instale o SDK OpenTelemetry do ClickHouse

Criar arquivos de instrumentação

Configure as variáveis de ambiente