Nuxt 3にOpenTelemetryを導入する完全ガイド｜モジュール比較から本番運用まで

npm install @scayle/nuxt-opentelemetry
# OTel SDKとOTLPエクスポーターも必要
npm install @opentelemetry/sdk-node @opentelemetry/exporter-trace-otlp-http

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@scayle/nuxt-opentelemetry'],
  opentelemetry: {
    serviceName: 'my-nuxt-app',
  },
})

# .env
OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318
OTEL_SERVICE_NAME=my-nuxt-app

// server/instrumentation.ts
import { NodeSDK } from '@opentelemetry/sdk-node'
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node'
import { resourceFromAttributes } from '@opentelemetry/resources'
import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions'

const sdk = new NodeSDK({
  resource: resourceFromAttributes({
    [ATTR_SERVICE_NAME]: process.env.OTEL_SERVICE_NAME || 'nuxt-server',
  }),
  traceExporter: new OTLPTraceExporter({
    url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318/v1/traces',
  }),
  instrumentations: [getNodeAutoInstrumentations()],
})

sdk.start()

process.on('SIGTERM', () => {
  sdk.shutdown().then(() => process.exit(0))
})

{
  "scripts": {
    "dev": "node --import ./server/instrumentation.ts node_modules/nuxi/bin/nuxi.mjs dev",
    "start": "node --import ./server/instrumentation.ts .output/server/index.mjs"
  }
}

npm install @opentelemetry/sdk-node \
  @opentelemetry/exporter-trace-otlp-http \
  @opentelemetry/auto-instrumentations-node \
  @opentelemetry/resources \
  @opentelemetry/semantic-conventions

// plugins/otel.client.ts
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
import { ZoneContextManager } from '@opentelemetry/context-zone'
import { resourceFromAttributes } from '@opentelemetry/resources'
import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions'

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()

  const resource = resourceFromAttributes({
    [ATTR_SERVICE_NAME]: config.public.otelServiceName || 'nuxt-client',
  })

  const exporter = new OTLPTraceExporter({
    url: config.public.otelExporterEndpoint || 'http://localhost:4318/v1/traces',
  })

  const provider = new WebTracerProvider({
    resource,
    spanProcessors: [new BatchSpanProcessor(exporter)],
  })

  provider.register({
    contextManager: new ZoneContextManager(),
  })
})

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      otelServiceName: 'nuxt-client',
      otelExporterEndpoint: 'http://localhost:4318/v1/traces',
    },
  },
})

npm install @opentelemetry/sdk-trace-web \
  @opentelemetry/sdk-trace-base \
  @opentelemetry/exporter-trace-otlp-http \
  @opentelemetry/context-zone \
  @opentelemetry/resources \
  @opentelemetry/semantic-conventions

traceparent: 00-{trace-id}-{parent-id}-{trace-flags}

# docker-compose.yml
services:
  jaeger:
    image: jaegertracing/jaeger:2
    ports:
      - "16686:16686"  # Jaeger UI
      - "4317:4317"    # OTLP gRPC
      - "4318:4318"    # OTLP HTTP
    environment:
      COLLECTOR_OTLP_ENABLED: "true"

docker compose up -d

import { TraceIdRatioBasedSampler } from '@opentelemetry/sdk-trace-base'

const sdk = new NodeSDK({
  sampler: new TraceIdRatioBasedSampler(0.1), // 10%のリクエストをトレース
  // ... 他の設定
})

OTEL_TRACES_SAMPLER=traceidratio
OTEL_TRACES_SAMPLER_ARG=0.1

import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'

// バッチ設定のカスタマイズ
const processor = new BatchSpanProcessor(exporter, {
  maxQueueSize: 2048,         // キューの最大サイズ
  maxExportBatchSize: 512,    // 1回のエクスポートで送信する最大スパン数
  scheduledDelayMillis: 5000, // エクスポート間隔（ミリ秒）
})

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    otelEndpoint: process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318',
    otelServiceName: process.env.OTEL_SERVICE_NAME || 'nuxt-app',
    public: {
      otelEnabled: process.env.OTEL_ENABLED !== 'false',
    },
  },
})

import { SpanProcessor, ReadableSpan } from '@opentelemetry/sdk-trace-base'

class SanitizingSpanProcessor implements SpanProcessor {
  private inner: SpanProcessor

  constructor(inner: SpanProcessor) {
    this.inner = inner
  }

  onEnd(span: ReadableSpan): void {
    // Authorizationヘッダーやcookie情報を除去
    const sanitized = { ...span }
    this.inner.onEnd(sanitized)
  }

  // forceFlush, shutdown, onStart は inner に委譲
  onStart(span: any, context: any) { this.inner.onStart(span, context) }
  forceFlush() { return this.inner.forceFlush() }
  shutdown() { return this.inner.shutdown() }
}

OTEL_LOG_LEVEL=debug node --import ./server/instrumentation.ts .output/server/index.mjs

{
  "scripts": {
    "dev": "node --import ./server/instrumentation.ts node_modules/nuxi/bin/nuxi.mjs dev"
  }
}

# otel-collector-config.yaml
receivers:
  otlp:
    protocols:
      http:
        cors:
          allowed_origins:
            - "http://localhost:3000"
            - "https://your-domain.com"