Next.js

SDK Next.js pour ClickStack - La stack d’observabilité ClickHouse

ClickStack peut ingérer des traces OpenTelemetry natives à partir de vos fonctions serverless Next.js avec Next 13.2 et versions ultérieures.

Si vous recherchez la session replay ou la supervision côté navigateur, installez plutôt l’intégration Browser.

​

Installation

​

Activer le hook d’instrumentation (obligatoire pour la v15 et les versions antérieures)

Pour commencer, vous devez activer le hook d’instrumentation de Next.js en définissant experimental.instrumentationHook = true; dans votre fichier next.config.js.

Exemple :

const nextConfig = {
  experimental: {
    instrumentationHook: true,
  },
  // Ignore otel pkgs warnings 
  // 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;

​

Installer le SDK OpenTelemetry de ClickHouse

NPM

npm install @hyperdx/node-opentelemetry 

Yarn

yarn add @hyperdx/node-opentelemetry 

​

Créer les fichiers d’instrumentation

Créez un fichier nommé instrumentation.ts (ou .js) à la racine de votre projet Next.js avec le contenu suivant :

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: []
    });
  }
}

Cela permettra à Next.js d’importer l’instrumentation OpenTelemetry pour chaque invocation d’une fonction serverless.

​

Configurer les variables d’environnement

Si vous envoyez des traces directement à ClickStack via OpenTelemetry, vous devrez démarrer votre serveur Next.js avec les variables d’environnement suivantes afin d’envoyer les spans vers l’OTel collector :

Managed ClickStack

copy

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

ClickStack Open Source

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

Si vous effectuez le déploiement sur Vercel, assurez-vous que toutes les variables d’environnement ci-dessus sont bien configurées pour votre déploiement.