ClickStack peut ingérer des traces OpenTelemetry natives à partir de vos fonctions serverless Next.js avec Next 13.2 et versions ultérieures.
Ce guide intègre :
- Logs de la console
- Traces
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 install @hyperdx/node-opentelemetry 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: '<MY_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 :
OTEL_SERVICE_NAME=<MY_SERVICE_NAME> \
OTEL_EXPORTER_OTLP_ENDPOINT=http://your-otel-collector:4318
npm run devHYPERDX_API_KEY=<YOUR_INGESTION_API_KEY> \
OTEL_SERVICE_NAME=<MY_SERVICE_NAME> \
OTEL_EXPORTER_OTLP_ENDPOINT=http://your-otel-collector:4318
npm run devSi 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.