Skip to content
ClickHouse Docs
ClickHouse DocsClickHouse Docs

Next.js

يمكن لـ ClickStack استيعاب تتبعات OpenTelemetry الأصلية من وظائف Next.js بلا خادم في Next 13.2+.

يشمل هذا الدليل ما يلي:

  • سجلات وحدة التحكم
  • التتبعات

التثبيت

فعِّل خطاف أدوات الرصد (مطلوب للإصدار v15 وما دونه)

للبدء، عليك تفعيل خطاف أدوات الرصد في Next.js عبر ضبط experimental.instrumentationHook = true; في ملف next.config.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 

إنشاء ملفات أدوات الرصد

أنشئ ملفًا باسم instrumentation.ts (أو .js) في الدليل الجذر لمشروع Next.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 عبر OpenTelemetry، فستحتاج إلى تشغيل خادم Next.js باستخدام متغيرات البيئة التالية لتوجيه المقاطع إلى OTel collector:

OTEL_SERVICE_NAME=<MY_SERVICE_NAME> \
OTEL_EXPORTER_OTLP_ENDPOINT=http://your-otel-collector:4318
npm run dev

إذا كنت تنشر على Vercel، فتأكد من إعداد جميع متغيرات البيئة المذكورة أعلاه لعملية النشر الخاصة بك.

Navigation