Doavers

Kreasikan Inspirasimu

Subscribe

OpenTelemetry di Next.js: Konsep, Manfaat, dan Implementasi Lengkap

·

by

doavers
OpenTelemetry di Next.js: Konsep, Manfaat, dan Implementasi Lengkap

Apa Itu OpenTelemetry?

OpenTelemetry (OTel) adalah standar open-source observability yang digunakan untuk mengumpulkan traces, metrics, dan logs dari aplikasi. OpenTelemetry merupakan hasil penggabungan proyek OpenTracing dan OpenCensus yang kini menjadi standar industri.

Dengan OpenTelemetry, developer dapat:

  • Melacak alur request end-to-end (distributed tracing)
  • Mengukur performa aplikasi (metrics)
  • Mengkorelasikan log dengan trace dan span

OpenTelemetry bersifat vendor-neutral, sehingga dapat diintegrasikan dengan berbagai backend observability seperti:

  • Jaeger
  • Prometheus
  • Grafana
  • Datadog
  • New Relic
  • Elastic APM

Kenapa OpenTelemetry Penting untuk Aplikasi Next.js?

Next.js modern (App Router, Server Actions, Edge Functions) semakin kompleks. Tanpa observability yang baik, kita sulit:

  • Mengetahui API mana yang lambat
  • Melacak error di server-side rendering (SSR)
  • Memahami bottleneck di backend & frontend
  • Debug issue di production

OpenTelemetry membantu menjawab pertanyaan kritis seperti:

  • Request mana yang lambat?
  • Query database mana yang bermasalah?
  • Service mana yang menyebabkan cascading failure?

Komponen Utama OpenTelemetry

1. Traces

Mencatat alur sebuah request dari awal hingga akhir.

  • Trace → kumpulan span
  • Span → satu operasi (API call, DB query, dll)

2. Metrics

Mengukur performa sistem:

  • Request count
  • Response time
  • Error rate

3. Logs

Log terstruktur yang bisa dikaitkan langsung dengan trace dan span.

Arsitektur OpenTelemetry

Next.js App
   |
   |  (Instrumentation)
   v
OpenTelemetry SDK
   |
   v
OTel Collector
   |
   v
Observability Backend
(Jaeger, Prometheus, Grafana, etc)

Implementasi OpenTelemetry di Next.js (Node.js Runtime)

⚠️ Catatan: OpenTelemetry tidak mendukung Edge Runtime sepenuhnya. Gunakan Node.js runtime untuk server components & API routes.

1. Install Dependency OpenTelemetry

npm install \
@opentelemetry/sdk-node \
@opentelemetry/api \
@opentelemetry/auto-instrumentations-node \
@opentelemetry/exporter-trace-otlp-http

2. Buat File Instrumentation

Buat file instrumentation.ts di root project:

// instrumentation.ts
import { NodeSDK } from '@opentelemetry/sdk-node'
import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node'
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'

const sdk = new NodeSDK({
  traceExporter: new OTLPTraceExporter({
    url: 'http://localhost:4318/v1/traces',
  }),
  instrumentations: [getNodeAutoInstrumentations()],
})

sdk.start()

3. Aktifkan Instrumentation di Next.js

Tambahkan di next.config.js:

module.exports = {
  experimental: {
    instrumentationHook: true,
  },
}

Next.js akan otomatis menjalankan instrumentation.ts saat server start.

4. Contoh Custom Tracing di API Route

import { trace } from '@opentelemetry/api'

const tracer = trace.getTracer('nextjs-api')

export async function GET() {
  return tracer.startActiveSpan('get-user', async (span) => {
    try {
      await new Promise((r) => setTimeout(r, 500))
      span.setAttribute('user.id', 123)
      return Response.json({ success: true })
    } catch (err) {
      span.recordException(err as Error)
      throw err
    } finally {
      span.end()
    }
  })
}

5. Menjalankan OpenTelemetry Collector (Opsional tapi Disarankan)

Contoh otel-collector-config.yaml:

receivers:
  otlp:
    protocols:
      http:

exporters:
  jaeger:
    endpoint: jaeger:14250
    tls:
      insecure: true

service:
  pipelines:
    traces:
      receivers: [otlp]
      exporters: [jaeger]

6. Observability dengan Jaeger & Grafana

Gunakan Docker Compose:

version: '3'
services:
  jaeger:
    image: jaegertracing/all-in-one
    ports:
      - "16686:16686"
      - "14250:14250"

  otel-collector:
    image: otel/opentelemetry-collector
    volumes:
      - ./otel-collector-config.yaml:/etc/otelcol/config.yaml
    command: ["--config=/etc/otelcol/config.yaml"]
    ports:
      - "4318:4318"

Akses Jaeger UI:

http://localhost:16686

Best Practice OpenTelemetry di Next.js

✅ Gunakan Node.js runtime
✅ Jangan instrument Edge Functions
✅ Gunakan sampling di production
✅ Simpan traceId ke log
✅ Pisahkan environment (dev / staging / prod)

Kapan OpenTelemetry Dibutuhkan?

OpenTelemetry sangat direkomendasikan jika:

  • Aplikasi sudah masuk production
  • Menggunakan microservices
  • Traffic tinggi
  • Butuh SLA & SLO monitoring
  • Ingin root cause analysis cepat

Online OpenTelemetry Collector

Ada beberapa OpenTelemetry Collector / backend observability online yang menyediakan tier gratis (free / free-tier). Umumnya bentuknya SaaS observability platform yang menerima data OpenTelemetry langsung, jadi kamu tidak perlu host collector sendiri.

Berikut daftar yang realistis dipakai & benar-benar ada free tier-nya 👇

1. Grafana Cloud (Free Tier) ⭐ Paling populer

Support OpenTelemetry: ✅ Native
Gratis: ✅ Ya

Free Tier (per bulan, kira-kira):

  • Traces: 50 GB
  • Metrics: 10k series
  • Logs: 50 GB
  • User: hingga 3 user

Kelebihan:

  • Integrasi OTel sangat matang
  • UI tracing bagus (Tempo)
  • Metrics (Prometheus) + Logs (Loki) + Traces dalam satu platform
  • Cocok untuk Next.js & Node.js

Endpoint OTel:

https://otlp-gateway-prod-<region>.grafana.net/otlp

👉 Rekomendasi #1 untuk personal project & startup kecil

2. Honeycomb (Free Tier)

Support OpenTelemetry: ✅ Native
Gratis: ✅ Ya

Free Tier:

  • Hingga 20 juta events / bulan
  • Full distributed tracing
  • Unlimited services

Kelebihan:

  • Sangat kuat untuk debugging distributed systems
  • Query tracing sangat fleksibel

Kekurangan:

  • Fokus ke tracing (metrics & logs terbatas)
  • UI agak teknikal

👉 Cocok kalau fokus performance & tracing saja

3. New Relic (Free Tier)

Support OpenTelemetry: ✅ Native
Gratis: ✅ Ya

Free Tier:

  • 100 GB data ingest / bulan
  • 1 full platform user
  • Traces, metrics, logs

Kelebihan:

  • Enterprise-grade
  • Banyak fitur APM

Kekurangan:

  • UI kompleks
  • Agak berat untuk belajar awal

4. Axiom (Free Tier)

Support OpenTelemetry: ✅ Ya
Gratis: ✅ Ya

Free Tier:

  • 1 TB data ingest (fair usage)
  • Fokus ke logs & traces

Kelebihan:

  • Cepat
  • Query log sangat powerful

Kekurangan:

  • Kurang populer
  • Dokumentasi tidak sebanyak Grafana

5. SigNoz Cloud (Free Tier – OSS Friendly)

Support OpenTelemetry: ✅ Native
Gratis: ✅ Ya

Free Tier:

  • Traces + metrics + logs
  • Limit event (cukup untuk dev / staging)

Kelebihan:

  • Open-source friendly
  • UI mirip Datadog

Alternatif:

  • Bisa self-host kalau mau full gratis tanpa limit

Perbandingan Singkat

PlatformFree TierTracesMetricsLogsCocok Untuk
Grafana Cloud✅✅✅✅All-rounder
Honeycomb✅✅❌❌Debug tracing
New Relic✅✅✅✅Enterprise
Axiom✅✅❌✅Log-heavy
SigNoz Cloud✅✅✅✅OSS lover

Contoh Config Next.js → Grafana Cloud (OTLP HTTP)

new OTLPTraceExporter({
  url: 'https://otlp-gateway-prod-ap-southeast-1.grafana.net/otlp/v1/traces',
  headers: {
    Authorization: `Basic ${Buffer.from(
      `${GRAFANA_USER}:${GRAFANA_API_KEY}`
    ).toString('base64')}`,
  },
})

Apakah Bisa Tanpa OpenTelemetry Collector?

YA, untuk SaaS di atas:

  • Kamu bisa langsung kirim dari SDK OpenTelemetry
  • Collector jadi opsional, bukan wajib

Namun collector tetap disarankan jika:

  • Mau sampling
  • Mau routing ke banyak backend
  • Mau masking data sensitif

Kesimpulan

OpenTelemetry adalah fondasi observability modern yang sangat cocok untuk aplikasi Next.js berbasis Node.js. Dengan implementasi yang tepat, kamu bisa:

  • Debug lebih cepat
  • Mengetahui bottleneck performa
  • Meningkatkan reliability aplikasi
  • Vendor lock-in free

Jika kamu sudah menggunakan Next.js di production, OpenTelemetry bukan lagi opsional — tapi kebutuhan.

FAQ

Q: Apakah OpenTelemetry gratis?

A: Ya, OpenTelemetry open-source dan gratis. Biaya tergantung backend observability yang digunakan.

Q: Apakah OpenTelemetry menggantikan logging?

A: Tidak. OpenTelemetry melengkapi logging dengan tracing dan metrics.

Q: Apakah OpenTelemetry mendukung Next.js App Router?

A: Ya, selama menggunakan Node.js runtime.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *