경량 OpenTelemetry 뷰어를 로컬 개발용으로 만들었습니다

Source: Dev.to

문제

OpenTelemetry 계측을 로컬에서 테스트할 때마다 Jaeger나 전체 컬렉터 스택을 띄워야 했습니다. docker‑compose up을 실행하고, 기다리고, 익스포터를 설정하고, 포트 4317이 충돌하지 않기를 바라는… 이런 절차가 “내 트레이스가 올바른가?”를 확인하기엔 너무 번거롭게 느껴졌습니다.

그래서 otel‑front를 만들었습니다: OTLP 데이터를 받아 웹 UI에 표시해 주는 단일 바이너리입니다. Docker도 없고, 외부 데이터베이스도 없으며, 설정 파일도 필요 없습니다.

brew tap mesaglio/otel-front
brew install mesaglio/otel-front/otel-front
otel-front          # → http://localhost:8000 열림

앱을 localhost:4318(HTTP) 또는 localhost:4317(gRPC)으로 지정하면 끝입니다.

What it does

• Traces – 워터폴 뷰, 플레임 그래프, 나란히 트레이스 비교, 작업 또는 트레이스 ID로 검색
• Logs – 전체 텍스트 검색, 심각도/서비스 필터, trace_id 로 트레이스와 연관
• Metrics – 쿼리 빌더, 시계열 차트, 집계 (avg, sum, min, max, count)

Traces

Side‑by‑side comparison 두 실행 간 회귀를 찾기 위해:

Logs correlated by trace_id 트레이스 뷰에서 직접:

Logs

Metrics

How it’s built

Constraint: single binary, zero external dependencies.

Go + embedded frontend

백엔드는 Go (Gin)이며, React 프론트엔드는 Vite로 빌드한 뒤 Go의 embed.FS를 사용해 바이너리 안에 직접 포함합니다:

//go:embed static/*
var staticFiles embed.FS

go build 한 번으로 모든 것을 제공하는 단일 바이너리가 생성됩니다.

DuckDB as in‑memory store

SQL이 필요했지만 별도의 데이터베이스를 배포하고 싶지는 않았습니다. DuckDB는 프로세스 내에서 완전히 실행되며 설정이 필요 없고, 분석 쿼리를 잘 처리합니다.

모든 span, 로그, 메트릭은 속성을 위한 JSON 컬럼을 포함한 DuckDB 테이블에 저장됩니다. 예시:

CREATE TABLE spans (
    trace_id               TEXT,
    span_id                TEXT,
    name                   TEXT,
    start_time_unix_nano   BIGINT,
    end_time_unix_nano     BIGINT,
    attributes             JSON,
    ...
);

프로토콜 버퍼 파서를 처음부터 구현하는 대신 OpenTelemetry Collector의 pdata 라이브러리를 재사용했습니다. 이 라이브러리가 역직렬화를 담당하고, 우리는 결과를 내부 모델로 변환하기만 하면 됩니다.

빠른 시작

Homebrew

brew tap mesaglio/otel-front
brew install otel-front
otel-front

Docker

docker run -p 8000:8000 -p 4317:4317 -p 4318:4318 \
  ghcr.io/mesaglio/otel-front:latest

바이너리 (macOS / Linux, x86_64 & ARM64)

최신 릴리스에서 다운로드하세요.

앱을 구성하세요:

export OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4318"
export OTEL_EXPORTER_OTLP_PROTOCOL="http/protobuf"
export OTEL_LOGS_EXPORTER="otlp"
export OTEL_TRACES_EXPORTER="otlp"
export OTEL_METRICS_EXPORTER="otlp"

UI에는 …이 포함됩니다 (내용을 계속 작성하세요).

# Copy‑paste helper for these env vars

Source

GitHub: mesaglio/otel-front

PR과 피드백을 환영합니다. 로컬에서 OpenTelemetry를 사용하고 있으며 유용하다고 생각하거나(또는 문제가 있다면) 댓글로 알려주세요.