メインコンテンツまでスキップ
メインコンテンツまでスキップ

Next.js

ClickStackは、Next 13.2以上のNext.jsサーバーレス関数からネイティブなOpenTelemetryトレースを取り込むことができます。

このガイドには以下が統合されています：

  • コンソールログ
  • トレース
注記

セッションリプレイやブラウザ側の監視を探している場合は、ブラウザ統合をインストールしてください。

インストール​

計測フックの有効化（v15以下に必要）​

まず、next.config.js内でexperimental.instrumentationHook = true;を設定して、Next.jsの計測フックを有効にする必要があります。

例：

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;

ClickHouse OpenTelemetry SDKのインストール​

npm install @hyperdx/node-opentelemetry

計測ファイルの作成​

Next.jsプロジェクトのルートにinstrumentation.ts（または.js）というファイルを以下の内容で作成します：

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

これにより、Next.jsはサーバーレス関数の呼び出しに対してOpenTelemetryの計測をインポートできるようになります。

環境変数の設定​

もしトレースを直接ClickStackに送信する場合は、スパンをOTelコレクタに指し示すために、次の環境変数を設定してNext.jsサーバーを起動する必要があります：

HYPERDX_API_KEY=<YOUR_INGESTION_API_KEY> \
OTEL_SERVICE_NAME=<MY_SERVICE_NAME> \
OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318
npm run dev

Vercelにデプロイしている場合は、上記のすべての環境変数がデプロイに対して設定されていることを確認してください。