SvelteKit + OpenTelemetry → Grafana LGTM example

Minimal, barebone SvelteKit app (same tooling as ../frontend — pnpm, adapter-node, TypeScript — but without auth/UI libraries) demonstrating SvelteKit's built-in server observability feature wired up to a local Grafana LGTM stack via docker compose.

How it works

• svelte.config.js turns on the experimental kit.experimental.tracing.server and kit.experimental.instrumentation.server flags, which make SvelteKit emit OpenTelemetry spans for handle, load, form actions, etc.
• src/instrumentation.server.ts is loaded by SvelteKit before any app code. It boots an OpenTelemetry Node SDK with auto-instrumentations and OTLP/HTTP exporters for traces, logs and metrics, all pointed at OTEL_EXPORTER_OTLP_ENDPOINT (defaults to http://localhost:4318, which docker compose overrides to the otel-lgtm service).
• src/hooks.server.ts shows how to annotate the root span with a custom attribute (http.route) using event.tracing.root.
• src/routes/+page.server.ts and src/routes/api/hello/+server.ts each generate a request so you have two distinct traces to look at.
• src/routes/api/login/+server.ts is a simulated login endpoint showing manual instrumentation with tracer.startActiveSpan (nested validate-credentials / create-session spans, with an error status on invalid credentials), a correlated log record via @opentelemetry/api-logs (shows up in Loki with the request's trace_id/ span_id), and a login.attempts counter metric (shows up in Prometheus/Mimir).
• docker-compose.yml runs grafana/otel-lgtm (Grafana + Tempo + Loki + Mimir/Prometheus, all in one image with an OTLP receiver built in) alongside the built app.

Run it

docker compose up --build

Then:

1. Open the app at http://localhost:3001 and click around, and try the login form (this generates traces, logs and metrics).
2. Open Grafana at http://localhost:3000 (default login admin / admin).
3. Go to Explore:
   • Pick the Tempo data source and search for traces from the sveltekit-observability-example service.
   • Pick the Loki data source and query {service_name="sveltekit-observability-example"} to see the login logs, correlated with their trace.
   • Pick the Prometheus data source and query login_attempts_total to see the counter split by app_login_success.

Run it locally without docker

pnpm install
# start just the observability stack
docker run --rm -p 3000:3000 -p 4317:4317 -p 4318:4318 grafana/otel-lgtm
pnpm dev

The dev server reads OTEL_EXPORTER_OTLP_ENDPOINT from .env (copy .env.example), which defaults to http://localhost:4318.