Instrumentação de NextJS com OpenTelemetry


Passos para Instrumentar Next.js com OpenTelemetry

Aqui está um passo a passo para configurar:

Instale as dependências: Instale os pacotes do OpenTelemetry necessários para o ambiente de servidor e de cliente:bashCopiar códigonpm install @opentelemetry/api @opentelemetry/sdk-node @opentelemetry/resources @opentelemetry/semantic-conventions @opentelemetry/exporter-trace-otlp-http

Configure o SDK de OpenTelemetry: Crie um arquivo de inicialização (ex: tracer.js) para configurar o SDK e exportadores do OpenTelemetry. Isso pode incluir configurações de recurso e exportador de rastreamento:javascriptCopiar código// tracer.jsconst { NodeSDK } = require('@opentelemetry/sdk-node'); const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http'); const { Resource } = require('@opentelemetry/resources'); const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions'); const sdk = new NodeSDK({ resource: new Resource({ [SemanticResourceAttributes.SERVICE_NAME]: 'nextjs-app', }), traceExporter: new OTLPTraceExporter({ url: 'http://localhost:4318/v1/traces', // URL do seu backend de OpenTelemetry  }), }); sdk.start() .then(() => console.log('OpenTelemetry SDK iniciado')) .catch((err) => console.log('Erro ao iniciar o OpenTelemetry SDK', err)); process.on('SIGTERM', () => { sdk.shutdown().then(() => console.log('OpenTelemetry SDK desligado')); });

Instrumente o Servidor (Server-Side Rendering e APIs): No Next.js, use o arquivo de configuração next.config.js para executar o script tracer.js na inicialização do servidor.javascriptCopiar código// next.config.jsrequire('./tracer.js'); module.exports = { // Sua configuração do Next.js};

Instrumente o Client-Side (opcional): Se você deseja rastrear também interações do cliente, será necessário incluir o OpenTelemetry no código de cliente (ex. pages/_app.js ou pages/_document.js):javascriptCopiar código// _app.jsimport { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/tracing'; const provider = new WebTracerProvider(); provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); provider.register(); export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} />; }

  1. Enviar os dados para o coletor OpenTelemetry: Configure um backend de observabilidade para receber e visualizar os rastreamentos, como Prometheus, Jaeger, Grafana, ou outros.

Observações Importantes

  • Coletor OpenTelemetry: Configure o endpoint do coletor para receber os dados de telemetria.
  • Desempenho: Instrumentar o Next.js pode adicionar alguma latência, então é interessante monitorar o impacto.
  • Compatibilidade: Algumas dependências de Next.js (como Webpack) podem conflitar com o OpenTelemetry.